1. 目的 : 在浏览器不同的宽度下实现不同的样式
2.用法
/*屏幕宽度超出1200px时的样式块*/
@media only screen and (min-width: 1200px) {
.box{
}
}
/*屏幕宽度间于600至1200px*/
@media only screen and (min-width: 600px) and (max-width: 1200px) {
.box{
}
}
/*屏幕宽度小于600px*/
@media only screen and (max-width: 600px) {
.box {
}
}
3. 注意
- 在响应式布局内,css语法同正常样式表语法
- 响应式布局之间存在不同屏幕尺寸的限制,使用样式相互不影响
解释:满足当前屏幕尺寸时,该样式块起作用,不满足时,则样式块失效 - 当响应式布局中样式块起作用时,会与正常样式块设置协同布局,遵循选择器的优先级规则
4. 原则
- 采用响应式布局的页面,基本样式块只做共性样式设置
需要根据页面尺寸进行适应变化的样式均有响应式布局处理 - 要进行响应式布局的页面要处理所有屏幕尺寸下的样式块
