@media响应式pc端屏幕分辨率适配

1、以下几个宽度是我们比较常用的:

1024 1280 1366 1440 1680 1920

2、PC端响应式媒体断点

@media (min-width: 1024px){body{font-size: 18px}} />=1024的设备/

@media (min-width: 1100px) {body{font-size: 20px}} />=1024的设备/@media (min-width: 1280px) {body{font-size: 22px;}}

@media (min-width: 1366px) {

body{font-size: 24px;}

}

@media (min-width: 1440px) {

body{font-size: 25px !important;}

}

@media (min-width: 1680px) {

body{font-size: 28px;}

}

@media (min-width: 1920px) {

body{font-size: 33px;}

}

注:用min-width时,小的放上面大的在下面,同理如果是用max-width那么就是大的在上面,小的在下面

另外在查资料时找到 谷歌浏览器插件 Window Resizer (火狐用户可以搜Firesizer)可以调用各种类型的分辨率尺寸查看效果

你可能感兴趣的:(@media响应式pc端屏幕分辨率适配)