一、利用CSS媒体查询维护两套样式
媒体查询:实现页面在不同设备下正常预览 [判断当前设备]
DOM一致,仅通过CSS媒体查询做不同样式
例子:
利用媒体查询,对屏幕宽度大于800px的设备进行一些样式上的处理
@media screen and(min-width:800px) {
.......
}
拓展-媒体查询
媒体类型
- all (所有的设备)
- print (打印设备)
- screen (电脑屏幕,平板电脑,智能手机)
媒体特性
- width 网页显示区域完全等于设置的宽度
- height 网页显示区域完全等于设置的高度
- max-width / max-height 网页显示区域小于等于设置的宽度
- min-width / min-width 网页显示区域大于等于设置的宽度
- orientation: portrait (竖屏模式) | landscape (横屏模式)
语法关键字
- and 可以将多个媒体特性链接到一块,相当于且
- not 排除某个媒体特性 相当于非,可以省略
- only 指定某个特定的媒体类型, 可以省略
- 内嵌式语法
@media only screen and (max-width: 420px) {
body {
background-color: red;
}
}
备注: 多个条件联写
@media only screen and (width: 320px) and (height: 568px)