@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)可以调用各种类型的分辨率尺寸查看效果

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 一、使用真实手机测试未发布网页的方法 方法① 在虚拟机中搭建xampp,将文件通过FTP传到虚拟机,在一个局域网中...
    fastwe阅读 4,042评论 0 0
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    love2013阅读 6,826评论 0 11
  • 了解真实的『REM』手机屏幕适配rem 作为一个低调的长度单位,由于手机端网页的兴起,在屏幕适配中得到重用。 使用...
    张宪宇阅读 6,687评论 0 5
  • 1、垂直对齐 如果你用CSS,则你会有困惑:我该怎么垂直对齐容器中的元素?现在,利用CSS3的Transform,...
    kiddings阅读 8,382评论 0 11
  • 春暖大地,花开满山。 越来越多的人们选择周末近郊游,带上孩子和老人,趁春色好。 于是,各种旅游小镇风生水起,文化古...
    走歌人强子阅读 2,507评论 0 7