前端响应式布局需要用到CSS3 @media 查询,接下来我将介绍媒体查询怎么使用。
CSS3 @media 查询
使用 @media 查询,你可以针对不同的媒体类型定义不同的样式。
@media 可以针对不同的屏幕尺寸设置不同的样式,特别是如果你需要设置设计响应式的页面,@media 是非常有用的。
当你重置浏览器大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面。
CSS3 @media 查询实例
当浏览器宽度最大为400px时,改变body的背景颜色为红色
@media screen and (max-width: 400px) {
body { background-color:red;}
}
当浏览器宽度在300px到400px时,改变body的背景为红色
@media screen and (min-width: 300px) and (max-width){
body {background-color:red;}
}
在手机端我们一般是这样写:
@media screen and (max-device-width: 400px) {
body {background-color:red;}
}
那么问题来了,max-width和max-device-width有什么区别?
device-width 定义输出设备的屏幕可见宽度。
max-width 定义输出设备中的页面最大可见区域宽度。
height也是这样对应。
针对不同的媒体使用不同的样式文件
上面的实例是在一个css文件里面根据不同的宽带来调用不同的样式,我们也可以根据不同的宽度来引入不同的css文件,我推荐下面的这种方式。
<!-- 宽度大于 1000px 的屏幕使用该样式 -->
<link rel="stylesheet" media="screen and (min-width: 1000px)" href="bcdong1.css">
<!-- 宽度小于或等于 500px 的屏幕使用该样式 -->
<link rel="stylesheet" media="screen and (max-width: 500px)" href="bcdog2.css">
....
到这里CSS3 @media 查询的一些基本用法已经介绍完了,如果还是有不懂的,可以上w3cschool或者菜鸟教程查看更详细的教程。
© 版权声明
如果没有特殊说明,文章版权归编程狗所有,转载请注明出处。
THE END
暂无评论内容