一、媒体查询
在CSS3中写入媒体查询时,要注意将主样式写在前面,媒体查询写在后面。
媒体查询的编写主要有两种方法,一种是从小到大,一种是从大到小。大小同时使用编写代码时也要按照这两种方法排序。
在@media之后可写all、screen或者省略,all表示所有,screen表示所有的屏幕。
设置主样式为:
.block{
height: 2000px;
border: 1px solid red;
margin: 0 auto;
}
从大到小写法的代码如下:
@media all and (max-width: 1500px) {
.block{
width: 1190px;
background-color: red;
}
}
@media all and (max-width: 1024px) {
.block{
width: 768px;
background-color: blue;
}
}
@media all and (max-width: 768px) {
.block{
width: 680px;
background-color: yellow;
}
}
从小到大的代码写法如下:
@media all and (min-width: 768px) {
.block{
width: 680px;
background-color: yellow;
}
}
@media all and (min-width: 1024px) {
.block{
width: 768px;
background-color: blue;
}
}
@media all and (min-width: 1500px) {
.block{
width: 1190px;
background-color: red;
}
}
大小同时使用的代码如下:
@media all and (min-width: 768px) and (max-width: 1024px) {
.block{
width: 680px;
background-color: yellow;
}
}
@media all and (min-width: 1024px) and (max-width: 1500px) {
.block{
width: 1024px;
background-color: blue;
}
}
@media all and (min-width: 1500px) {
.block{
width: 1190px;
background-color: red;
}
}
二、手机自适应
标签内与手机自适应相关的属性有
name="viewport",表示视口;
content="width=device-width,initial-scale=1.0,maximum-scale=3.0,minimum-scale=1.0,user-scalable=yes"其中width=device-width表示宽度为屏宽,initial-scale=1.0表示1:1放置,maximum-scale=3.0表示最大比例为3.0,minimum-scale=1.0表示最小比例为1.0,user-scalable=yes表示是否允许用户进行缩放。
强制性兼容语句:
其中要了解到的就是CSS hack,CSS hack不是CSS3里面的样式。CSS hack的目的就是使CSS代码兼容不同的浏览器。
目前我们学习到的是CSS hack的条件注释法:
只在IE下生效:
只在IE6下生效:
只在IE6以上版本生效:
只在IE6上不生效:
非IE浏览器生效:
手机自适应中的兼容语句示例:
-ms-表示IE浏览器,-moz-表示火狐浏览器,-webkit-表示谷歌浏览器。