响应式布局媒体查询@media尺寸断点

lemon_su_lemon

于 2019-06-05 16:34:03 发布

阅读量1k

点赞数

本文链接：https://blog.csdn.net/qq_41188808/article/details/90904697

版权

**用min-width时，小的放上面大的在下面，同理如果是用max-width那么就是大的在上面，小的在下面 **
1、移动端@media断点
2、PC端响应式媒体断点

@media screen and(min-width: 1100px) {
body{font-size: 20px}
} 
@media screen and(min-width: 1280px) {
body{font-size: 22px;}
} 

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

body{font-size: 24px;}
}  

@media screen and(min-width: 1440px) {
body{font-size: 26px }
} 

@media screen and(min-width: 1680px) {
body{font-size: 28px;}
} 
@media screen and(min-width: 1920px) {
body{font-size: 30px;}
} 
/* min-width:尺寸从小到大  max-width:尺寸大小从大到小 *