用CSS3 @media(媒体) 查询实现网站响应式布局

前端响应式布局需要用到CSS3 @media 查询,接下来我将介绍媒体查询怎么使用。

u_738757113_1167077080&fm_253&fmt_auto&app_138&f_JPEG

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
喜欢就支持一下吧
点赞0 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片