网站建设中不同分辨率显示不同样式的解决方法
在css2中允许我们使用media的属性,例如使用screen和print,我也写过一篇关于使用CSS media的print来定义打印网页的样式的文章,关于css2中的media文章,推荐下w3c的。今天来说说CSS3的Media Queries。CSS3中不仅仅可以使用screen和print,而且支持多媒体多分辨率的样式表。
我们先来看下CSS3 Media Queries的演示实例:css3media.html,来自于(Web Designer Wall)
Max Width
故名思意,就是最大宽度的意思,例如下面的代码是在宽度小于600px的时候才执行的。
@media screen and (max-width: 600px) {
.class {
background: #ccc;
}
}
也可以在link标签里面使用media属性,即下面的写法:
<link rel="stylesheet" media="screen and (max-width: 600px)" href="http://blog.163.com/wenchangqing_live/blog/small.css" />
Min Width
跟Max Width相反,是最小宽度,例如当宽度大于900px的时候才运行下面的代码
@media screen and (min-width: 900px) {
.class {
background: #666;
}
}
也可以在link标签里面使用media属性,即下面的写法:
<link rel="stylesheet" media="screen and (min-width: 900px)" href="http://blog.163.com/wenchangqing_live/blog/big.css" />
Max和Min组合使用
例如下面的代码是当屏幕的宽度在600px~900px之间才有效的:
@media screen and (min-width: 600px) and (max-width: 900px) {
.class {
background: #333;
}
}
Device Width
这里的意思指的是设备的最大宽度,就是屏幕的宽度,像素,例如下面的代码:
@media screen and (max-device-width: 480px) {
.class {
background: #000;
}
}
IE6~IE8多分辨率兼容问题
引入 respond.min.js
下载地址:https://github.com/scottjehl/Respond
注意样式必须使用 <link>标签来引入,否则没有效果。
我们先来看下CSS3 Media Queries的演示实例:css3media.html,来自于(Web Designer Wall)
Max Width
故名思意,就是最大宽度的意思,例如下面的代码是在宽度小于600px的时候才执行的。
@media screen and (max-width: 600px) {
.class {
background: #ccc;
}
}
也可以在link标签里面使用media属性,即下面的写法:
<link rel="stylesheet" media="screen and (max-width: 600px)" href="http://blog.163.com/wenchangqing_live/blog/small.css" />
Min Width
跟Max Width相反,是最小宽度,例如当宽度大于900px的时候才运行下面的代码
@media screen and (min-width: 900px) {
.class {
background: #666;
}
}
也可以在link标签里面使用media属性,即下面的写法:
<link rel="stylesheet" media="screen and (min-width: 900px)" href="http://blog.163.com/wenchangqing_live/blog/big.css" />
Max和Min组合使用
例如下面的代码是当屏幕的宽度在600px~900px之间才有效的:
@media screen and (min-width: 600px) and (max-width: 900px) {
.class {
background: #333;
}
}
Device Width
这里的意思指的是设备的最大宽度,就是屏幕的宽度,像素,例如下面的代码:
@media screen and (max-device-width: 480px) {
.class {
background: #000;
}
}
IE6~IE8多分辨率兼容问题
引入 respond.min.js
下载地址:https://github.com/scottjehl/Respond
注意样式必须使用 <link>标签来引入,否则没有效果。
上一条: 网站优化的一些通俗术语,你认识几个呢?
下一条: 什么是SSL证书