百分比布局 @media查询

百分比布局

宽高设置百分比相对于父类的宽高
margin padding相对于父类的宽
定位后相对于它对应的 元素

 

 

@media查询 也遵循选择器权重

max-width min-width 判断浏览器窗口大小

当小于max-width的值的时候，设置样式

@media screen  and (max-width:800px) {

}

 

当大于min-width的值的时候，设置样式

@media screen  and (min-width:800px) {

}

 

当在min-width和max-width 值中间 的时候，设置样式

@media screen  and (min-width:800px)  and (max-width:1600px) {

}

 

在screen前加Not 取反

@media  not screen  and (min-width:800px)  and (max-width:1600px) {

}

 

 

 

max-device-width  min-device-width 判断设备屏幕大小(移动端适配）

用于不同的机器类型引用不同的CSS

使用方法

link media="screen and (max-width:1000px)"

注意：正常样式写在上面