(响应式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寸)

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

原文:http://www.cnblogs.com/maixi/p/4736828.html

时间: 2024-10-25 00:50:08

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

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寸 仅苹果用) 144

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

移动端媒体查询的一些尺寸参考

/*iphone4 4s*/ @media only screen and (device-height :480px) and (-webkit-device-pixel-ratio:2){ /* Styles */ } @media screen and (min-width: 320px) and (max-width: 480px) { /* Styles */ } /*iphone5*/ @media (device-height:568px) and (-webkit-min-dev

响应式设计之媒介查询

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

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

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

[转]响应式WEB设计学习(1)—判断屏幕尺寸及百分比的使用

原文地址:http://www.jb51.net/web/70360.html 现在移动设备越来越普及,用户使用智能手机.pad上网页越来越普遍.但是传统的fix型的页面在移动终端上无法很好的显示.因此,Ethan Marcotte提出一种响应式web设计的概念. 响应式web设计的英文为Responsive Web Design,简写为RWD. 在图书馆借到一本O'REILLY的<Head First Moblie Web>,里面讲到了一些做RWD的技巧. 今天学到的两招是: 1.使用med