文档章节

(响应式PC端媒体查询)电脑屏幕分辨率尺寸大全

kitty1116
 kitty1116
发布于 02/12 17:55
字数 335
阅读 8
收藏 0

PC端

按屏幕宽度大小排序(主流的用橙色标明)

分辨率   比例 | 设备尺寸

1024*500 (8.9寸)

1024*768 (比例4:3  | 10.4寸、12.1寸、14.1寸、15寸; )

1280*800(16:10  |15.4寸)

1280*1024(比例:5:4  | 14.1寸、15.0寸)

1280*854(比例:15:10 | 15.2)

1366*768 (比例:16:9 | 不常见)

1440*900 (16:10  17寸 仅苹果用)

1440*1050(比例:5:4  | 14.1寸、15.0寸)

1600*1024(14:9  不常见)

1600*1200 (4:3 | 15、16.1)

1680*1050(16:10 | 15.4寸、20.0寸)

1920*1200 (23寸)

 

通过上面的电脑屏蔽及尺寸的例表上我们得到了几个宽度

1024  1280  1366  1440  1680  1920  

 

PC端响应式媒体断点

CSS代码

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

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

@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那么就是大的在上面,小的在下面

本文转载自:https://www.cnblogs.com/maixi/p/4736828.html

共有 人打赏支持
kitty1116
粉丝 0
博文 109
码字总数 31493
作品 0
武汉
前端工程师
私信 提问
从零开始学 Web 之 移动Web(六)响应式布局

大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:http://www.cnblogs.com/lvonve/ CSDN...

Daotin
2018/08/13
0
0
布局的几种方式(静态布局、自适应布局、流式布局、响应式布局、弹性布局)

一、静态布局 页上的所有元素的尺寸一律使用px作为单位 1.布局特点 不管浏览器尺寸具体是多少,网页布局始终按照最初写代码时的布局来显示。 常规的pc的网站都是静态(定宽度)布局的,也就是...

神秘者007
2018/10/31
0
0
media查询尺寸

PC端 按屏幕宽度大小排序(主流的用橙色标明) 分辨率 比例 | 设备尺寸 1024*500 (8.9寸) 1024*768 (比例4:3 | 10.4寸、12.1寸、14.1寸、15寸; ) 1280*800(16:10 |15.4寸) 1280*102...

袁max
2017/11/23
0
0
web前端响应式设计总结

一、响应式概述   响应式是指根据不同设备浏览器分辨率或尺寸来展示不同页面结构、行为、表现的设计方式。这里总结了响应式网站设计需要涉及到的相关的内容,有不正确的欢迎大家指正。谈到...

ouven
2016/01/17
3.6K
2
移动端 web 开发的设计稿与工作流

致谢 一直以来移动端适配便是困扰自己的一个难题,今天休息,查阅了很多资料将其整理出来。本文中很多做法是直接借鉴了网上的文章,主要有从网易与淘宝的font-size思考前端设计稿与工作流跟手...

明易
2018/12/05
0
0

没有更多内容

加载失败,请刷新页面

加载更多

使用keepalived实现nginx的高可用

概述 是这样子的,我想让家中所有的应用服务都从nginx中出去,让nginx处于访问的最边缘地带,为了让nginx可靠性加强,所以nginx就得实现高可用,分别是下面两台机器要做nginx的集群 10.10.10...

bboysoulcn
今天
1
0
Mysql索引机制B+Tree

1、问题引入 有一个用户表,为了查询的效率,需要基于id去构建索引。构建索引我们需要考虑两个方面的问题,1个是查询的效率,1个是索引数据的存储问题。该表的记录需要支持百万、千万、甚至上...

万山红遍
今天
40
0
RDD

1.概念: RDD是spark整个体系中最基础核心的概念,RDD(Resilient Distributed DataSet)即弹性分布式数据集 弹性: RDD支持横向多分区,纵向操作内存不足写入磁盘,hdfs等,实现数据在内存和...

仟昭
今天
1
0
springboot整合mycat

动态数据源项目整合 Maven依赖信息 <parent> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-parent</artifactId> <version>2.0.4.RELEASE</version> <relat......

须臾之余
今天
2
0
深入解析Vue 和微信小程序的区别、比较

写了vue项目和小程序,发现二者有许多相同之处,在此想总结一下二者的共同点和区别。 一、生命周期 先贴两张图: vue生命周期 小程序生命周期 相比之下,小程序的钩子函数要简单得多。 vue的...

前端攻城小牛
今天
9
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部