CSS3 Media Query的使用方法
博客专区 > big_cat 的博客 > 博客详情
CSS3 Media Query的使用方法
big_cat 发表于3年前
CSS3 Media Query的使用方法
  • 发表于 3年前
  • 阅读 75
  • 收藏 1
  • 点赞 0
  • 评论 0

移动开发云端新模式探索实践 >>>   

摘要: CSS3 Media Query的使用方法简单介绍。

响应小实例看这:简单的响应式页面小示例

现在移动优先的站点越来越多,响应式网站的设计也越来越普及,更多的前端框架被开发出来,比如众所周知的bootstrap,国产的拼图也挺不错,但貌似上了1.0版本就没在更新,其实响应式的机理就是media query。

下面展示几个最基本的使用方法

1、在header中进行媒体查询来判定引入哪个css样式表

   使用media做查询

<link rel="stylesheet" type="text/css"  media="screen and (max-width: 400px)" href="small.css">
<link rel="stylesheet" type="text/css"  media="screen and (min-width:401) and (max-width:800px)" href="middle.css">

  或者使用import命令:

<style type="text/css">
	@import url('small.css') screen and (max-width: 400px);
	@import url('middle.css') screen and (min-width: 401px) and (max-width: 800px);
</style>

   或者直接在style标签里写内联样式,其实就和普通css一样,写在css文件里引入做外联,直接写在style里做内联

<style type="text/css">
@media screen and and (max-width: 400px) {
    //when the width lower to 400px
    body {
    background: #cccccc;
     }
}
@media screen and (min-width: 401px) and (max-width: 800px) {
    //when the width between 401px and 800px
     body {
     background: #ffffff;
     }
}
</style>

以上将会实现当屏幕宽度小于400px时引入small.css,当大于400px小于800px时则引入middle.css

2、在css文件中进行媒体查询

media,在css文件中也可直接编写media query样式

//
@media screen and and (max-width: 400px) {
    //when the width lower to 400px
    body {
    background: #cccccc;
     }
}

@media screen and (min-width: 401px) and (max-width: 800px) {
    //when the width between 401px and 800px
     body {
     background: #ffffff;
     }
}

import,你可以建立一个全局的样式文件,style.css,将响应模块的样式做如下导入即可

//当小于400px时导入small.css
@import url('small.css') screen and (max-width: 400px);
//当大于400px小于800px时导入middle.css
@import url('middle.css') screen and (min-width: 401px) and (max-width: 800px);


其实查询就是两种方式,import是用来做导入判断的,media既可以做导入,也可以直接做查询。

  • 打赏
  • 点赞
  • 收藏
  • 分享
共有 人打赏支持
粉丝 45
博文 188
码字总数 140798
×
big_cat
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: