百分比布局 @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)"

注意:正常样式写在上面

发布了48 篇原创文章 · 获赞 3 · 访问量 878

猜你喜欢

转载自blog.csdn.net/procul/article/details/104714791
今日推荐