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

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端响应式媒体断点

    @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/shimily/articles/8032450.html

原文地址:https://www.cnblogs.com/xiaobai-y/p/10556752.html

时间: 2024-08-02 13:36:10

pc端常用电脑屏幕 ((响应式PC端媒体查询)电脑屏幕分辨率尺寸大全)的相关文章

html5 响应式布局(媒体查询)

响应式布局 响应式布局,简而言之,就是一个网站能够兼容多个终端--而不是为每个终端做一个特定的版本.这个概念是为解决移动互联网浏览而诞生的. 响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验,而且随着目前大屏幕移动设备的普及,用"大势所趋"来形容也不为过.随着越来越多的设计师采用这个技术,我们不仅看到很多的创新,还看到了一些成形的模式. html5/css3响应式布局介绍及设计流程,利用css3的media query媒体查询功能.移动终端一般都是对css3支持比较好的

响应式网页之媒体查询

由于现在的网页要兼容各种pc尺寸及ipad甚至手机屏幕,所以响应式的网页变得尤为重要.手写响应式网页,具体技术点有: 1.声明viewport元标签(响应式网页必备) <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> width - viewport的宽度 height - viewport的高度 initial-scale - 初

响应式设计:媒体查询

媒体查询可以让我们根据设备显示的特性为其设定CSS样式.可以在不改变页面内容的情况下,为特定的一些输出设变指定显示效果. 一.媒体查询语法 1.<link>标签:通过link标签的media属性为样式表指定设备类型,例如: 以下代码表示媒体类型是显示屏,媒体特性为显示屏纵向放置,此时才引入cssy样式 <link rel="stylesheet" type="text/css" media="screen and (orientation

响应式布局之媒体查询

媒体查询可以根据设备显示器特性设定CSS样式. 媒体查询语法: 1.写在样式里:@media 条件 @media screen and (max-width: 550px){ /*样式*/ } 2.写在link标签里 <link rel="stylesheet" media="screen and (max-width:550px)" href="media.css"/> 媒体查询常用的是检测视口宽度(width)和屏幕宽度(devi

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

(响应式PC端媒体查询)电脑屏幕分辨率尺寸大全 时间:2015-08-17 16:50:40      阅读:3961      评论:0      收藏: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寸)

0083 移动端WEB开发之响应式布局、bootstrap

移动端WEB开发之响应式布局 1. 响应式开发原理 1.1 响应式开发原理 就是使用媒体查询针对不同宽度的设备进行布局和样式的设置,从而适配不同设备的目的. 设备的划分情况: 小于768的为超小屏幕(手机) 768~992之间的为小屏设备(平板) 992~1200的中等屏幕(桌面显示器) 大于1200的宽屏设备(大桌面显示器) 1.2 响应式布局容器 响应式需要一个父级做为布局容器,来配合子级元素来实现变化效果. 原理就是在不同屏幕下,通过媒体查询来改变这个布局容器的大小,再改变里面子元素的排列

响应式设计之媒介查询

你必须像水那样无形:当你把水倒进杯子中,水就变成了杯子的形状:当你把水倒进瓶子中,水就变成了瓶子的形状:当你把水倒进茶壶中,水就变成了茶壶的形状. - 李小龙 之前读<响应式Web设计实践>,这大概是我印象最深的一句话了.李小龙的功夫了得,可他的功夫哲学更是令人叹服.如今的前端,面临着更多的挑战,尺寸大小不一的设备涌现出来,就像形状各异的容器,而我们的网页必须像水一般, 能够接受各式各样的考验. 为了能够让同一个页面在不同尺寸的设备浏览器中呈现出与之适配的样式,CSS3引入了Media que

浅谈移动端的自适应问题——响应式、rem/em、利用Js动态实现移动端自适应

随着3G的普及,越来越多的人使用手机上网.移动设备正超过桌面设备,成为访问互联网的最常见终端.于是,网页设计师不得不面对一个难题:如何才能在不同大小的设备上呈现同样的网页?本篇文章将讲述自适应网页设计的概念和方法,使网页开发人员维护同一个网页代码,即可使网站在多种设备上具有更好的阅读体验.本文详细介绍了自适应网页的实现方法,希望能给迷惑的你带来帮助. 一. 在HTML的头部加入meta标签 在HTML的头部,也就是head标签中增加meta标签,告诉浏览器网页宽度等于设备屏幕宽度,且不进行缩放,

HTML5+CSS3的响应式网页设计:自动适应屏幕宽度

这几天都在修改博客上面的样式.本来用的是d83.0的模板.自己又修改了许多地方,其中自己修改的一些地方在手机里面显示的效果不是很理想,于是想改成自适应的效果.对CSS3不是特别的熟练,只能去网上找找案例看了.发现一个不错的文章.写的比较入门,也很仔细.所以拿过来分享给大家.如果还想看图片的响应式案例可以看我找的另外的一篇<分享一个非常有用的HTML5+CSS3响应式图片案例>. 移动设备正超过桌面设备,成为访问互联网的最常见终端.于是,网页设计师不得不面对一个难题:如何才能在不同大小的设备上呈