声明:很多地方都是引用前辈们整理的资料,最后本人会做出一些总结,原创也只是那部分总结内容和整理资料的汗水,
智慧都是大家的,希望互联网行业蒸蒸日上!
望各位转发时作者注明出处:home.yuwq1098.com点击打开链接 @不羁的狂鱼
液晶显示器分辨率是指单位面积显示像素的数量。
液晶显示器的物理分辨率是固定不变的,对于CRT显示器而言,
只要调整电子束的偏转电压,就可以改变不同的分辨率。
但是在液晶显示器里面实现起来就复杂得多了,必须要通过运算来模拟出显示效果,实际上的分辨率是没有改变的。
由于并不是所有的像素同时放大,这就存在着缩放误差。
当液晶显示器使用在非标准分辨率时,文本显示效果就会变差,文字的边缘就会被虚化。
常见的显示器分辨率:
8.9英寸,1024x600,点距:0.19mm<====众多笔记本
9.7英寸,1024x768,点距:0.193mm<====iPad1代和2代
10.2英寸,1024x600,点距:0.218mm<====Asus/MSI/HP10.2英寸笔记本
15英寸,1280x720,16:9,点距:0.259mm<====AOC/BenQ显示器
17英寸,1280x720,16:9,点距:0.291mm<====Gateway/三星/优派显示器
8.9英寸,1280x768,15:9,点距:0.151mm<====HP2133
10.6英寸,1280x768,15:9,点距:0.18mm<====FujitsuLifeBookP7230WG
12.1英寸,1280x768,15:9,点距:0.206mm<====FujitsuLifebookB6220T
12.1英寸,1280x800,16:10,点距:0.204mm<====众多12英寸笔记本
13.3英寸,1280x800,16:10,点距:0.224mm<====DellM1330、AsusW6/W7
14.1英寸,1280x800,16:10,点距:0.237mm<====主流宽屏笔记本电脑
15.4英寸,1280x800,16:10,点距:0.259mm<====笔记本电脑
15.2英寸,1152x768,15:10,点距:0.279mm<====ApplePowerBookG4Titanium
15.2英寸,1280x854,15:10,点距:0.251mm<====ApplePowerBookG4Titanium/Aluminum
15.2英寸,1440x960,15:10,点距:0.223mm<====ApplePowerBookG4Aluminum
13.4英寸,1366x768,16:9,点距:0.217mm
15.6英寸,1366x768,16:9,点距:0.252mm<====主流笔记本用的16:9面板
16.0英寸,1366x768,16:9,点距:0.259mm<====笔记本的16:9面板
18.5英寸,1366x768,16:9,点距:0.3mm
13.3英寸,1440x900,16:10,点距:0.199mm<====LenovoX300
14.1英寸,1440x900,16:10,点距:0.211mm<====HPCompaq6910p
15.4英寸,1440x900,16:10,点距:0.23mm<====AsusM50/M51NB
17.0英寸,1440x900,16:10,点距:0.255mm
19.0英寸,1440x900,16:10,点距:0.284mm
13.1英寸,1600x900,16:9,点距:0.181mm<====SonyVAIOVGN-Z11WN/B
16.4英寸,1600x900,16:9,点距:0.226mm<====SonyVAIOVGN-FW140E/H、VGN-FW15T...等
20.0英寸,1600x900,16:9,点距:0.276mm
18.4英寸,1680x945,16:9,点距:0.243mm<====ToshibaDynabookQosmioGX/79G15.4英寸,1680×1050,16:10,点距:0.197mm<====AsusG1/G1S/G1Sn等笔记本
17.0英寸,1680×1050,16:10,点距:0.219mm<====HPCompaq8710w
19.0英寸,1680×1050,16:10,点距:0.243mm
20.1英寸,1680×1050,16:10,点距:0.258mm
21.0英寸,1680×1050,16:10,点距:0.269mm
21.6英寸,1680×1050,16:10,点距:0.276mm
22.0英寸,1680×1050,16:10,点距:0.282mm
16.0英寸,1920X1080,16:9,点距:0.184mm<====某些新的16英寸笔记本面板,如Gateway
18.4英寸,1920X1080,16:9,点距:0.213mm<====Acer/Sony18.4英寸笔记本
21.5英寸,1920X1080,16:9,点距:0.248mm
23.0英寸,1920x1080,16:9,点距:0.266mm
23英寸,2048x1152,16:9,点距:0.249mm
23.6英寸1920x108016:9点距:0.272mm
24.0英寸,1920x1080,16:9,点距:0.276mm
15.4英寸,1920x1200,16:10,点距:0.173mm<====DellLatitudeD810
17.0英寸,1920x1200,16:10,点距:0.191mm<====很多的17英寸笔记本,如AsusG2S/M70
22.0英寸,1920x1200,16:10,点距:0.247mm<====主流显示器
23.0英寸,1920x1200,16:10,点距:0.258mm
24.0英寸,1920x1200,16:10,点距:0.27mm
25.5英寸,1920x1200,16:10,点距:0.258mm<====NEC2690等高端显示器
27.0英寸,1920x1200,16:10,点距:0.303mm
27.0英寸,1920×1080,16:9,点距:0.311mm
27.0英寸,2560×1440,16:9,点距:0.233mm<====苹果显示器
30.0英寸,2560x1600,16:10,点距:0.252mm<====戴尔U3011
智能手机屏幕尺寸和分辨率一览表 :
2.8英寸分辨率为640x480(VGA) 像素密度286PPI
3.2英寸分辨率为480x320(HVGA) 像素密度167PPI
3.3英寸分辨率为854x480(WVGA) 像素密度297PPI
3.5英寸分辨率为480x320(HVGA) 像素密度165PPI
3.5英寸分辨率为800x480(WVGA) 像素密度267PPI
3.5英寸分辨率为854x480(WVGA) 像素密度280PPI
3.5英寸分辨率为960x640(DVGA) 像素密度326PPI(苹果 iphone4)
3.7英寸分辨率为800x480(WVGA) 像素密度252PPI
3.7英寸分辨率为800x480(WVGA) 像素密度252PPI
3.7英寸分辨率为960x540(qHD) 像素密度298PPI
4.0英寸分辨率为800x480(WVGA) 像素密度233PPI
4.0英寸分辨率为854x480(WVGA) 像素密度245PPI
4.0英寸分辨率为960x540(qHD) 像素密度275PPI
4.0英寸分辨率为1136x640(HD) 像素密度330PPI(苹果 iphone5)
4.2英寸分辨率为960x540(qHD) 像素密度262PPI
4.3英寸分辨率为800x480(WVGA) 像素密度217PPI
4.3英寸分辨率为960x640(qHD) 像素密度268PPI
4.3英寸分辨率为960x540(qHD) 像素密度256PPI
4.3英寸分辨率为1280x720(HD) 像素密度342PPI
4.5英寸分辨率为960*540(qHD) 像素密度245PPI
4.5英寸分辨率为1280x720(HD) 像素密度326PPI
4.5英寸分辨率为1920x1080(FHD) 像素密度490PPI
4.7英寸分辨率为1280x720(HD) 像素密度312PPI
4.7英寸分辨率为1280x720(HD) 像素密度312PPI
4.7英寸分辨率为1280x720(HD) 像素密度312PPI
4.8英寸分辨率为1280x720(HD) 像素密度306PPI
5.0英寸分辨率为480x800(WVGA) 像素密度186PPI
5.0英寸分辨率为1024x768(XGA) 像素密度256PPI
5.0英寸分辨率为1280*720 像素密度294PPI
5.0英寸分辨率为1920x1080(FHD) 像素密度441PPI
5.3英寸分辨率为1280x800(WXGA) 像素密度285PPI
5.3英寸分辨率为960x540(qHD) 像素密度207PPI
6.0英寸分辨率为854×480 像素密度163PPI
6.0英寸分辨率为1280 X 720 像素密度245PPI
6.0英寸分辨率为2560×1600 像素密度498ppi
7.0英寸分辨率为800x480(WVGA) 像素密度128PPI
7.0英寸分辨率为1024*600 像素密度169PPI
7.0英寸分辨率为1280*800 像素密度216PPI
9.7英寸分辨率为1024x768(XGA) 像素密度132ppi
9.7英寸分辨率为2048x1536 像素密度264PPI
10 英寸分辨率为1200X600 像素密度170ppi
10 英寸分辨率为2560x1600 像素密度299ppi
望各位转发时作者注明出处:home.yuwq1098.com点击打开链接 @不羁的狂鱼
好了,以上是我在百度、知乎、腾讯技术,各大牛人技术博客里搜罗的关于分辨率的资料,
下面就讲一讲我们在web开发中如何对设备宽度进行断点判断
由于手机像素密度比较大,物理像素比是逻辑像素的几倍,我通常习惯在做移动端开发时在head内加入
<metacontent="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"name="viewport">
这样一条meta属性,那么我在开发中不用考虑其他东西,只需考虑逻辑像素,逻辑像素的单位就是我们在网页中常用的px,
好了,关于逻辑像素,物理像素,设备宽度的关系我在此不再赘述。
接下来我们就来分一下,web前端需要我们处理的设备宽度是那些,我们给其设断点,并分配几个方案。
pc实际设备宽度(单位pt--points):
1024pt 1152pt 1280pt 1366pt 1440pt
1600pt 1680pt 1920pt 2048pt 2560pt
手机及平板实际设备宽度(单位pt--points):
320pt iphone 4s
360pt 三星galaxy s5
375pt iphone6
400pt 魅族MX2
384pt 魅族MX4
414pt iphone6 plus
435pt Nexus 6p
768pt iPad平板
下面再附一张pc分辨率占比:
望各位转发时作者注明出处:home.yuwq1098.com点击打开链接 @不羁的狂鱼
我就先贡献出一套自己常用的web设备宽度断点方案吧:
320dt 360dt 400dt 435dt 768dt 1024dt 1280dt 1440dt 1920dt
pc一套,手机一套
<link rel="stylesheet" type="text/css" media="screen and (max-width:768px)" href="css/screenMobile.css"><link rel="stylesheet" type="text/css" media="screen and (min-width:768px)" href="css/screenPC.css">
还需要加入
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
以及ie9以下浏览器没有@media和不支持h5处理的js
<!--因为IE8既不支持HTML5也不支持CSS3 Media,所以我们需要加载两个JS文件,来保证我们的代码实现兼容效果-->
<!--[if lt IE 9]>
<script src="//cdn.bootcss.com/html5shiv/3.7.3/html5shiv.js"></script>
<script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]--> <!--使用http://www.bootcdn.cn-->
在screenMobile.css文件内底部加上:
@media only screen and (min-width: 320px) and (max-width: 360px) {}
@media only screen and (min-width: 360px) and (max-width: 400px) {}
@media only screen and (min-width: 400px) and (max-width: 435px) {}
@media only screen and (min-width: 435px) and (max-width: 768px) {}
@media only screen and (min-width: 768px){}
在screenPC.css文件内底部加上
@media only screen and (min-width:768px) and (max-width: 1024px) {}
@media only screen and (min-width:1024px) and (max-width: 1280px) {}
@media only screen and (min-width:1280px) and (max-width: 1440px) {}
@media only screen and (min-width: 1440px) and (max-width: 1920px) {}
@media only screen and (min-width: 1920px){}
这只是本人常使用的一套方案,个人喜好,各位可以照搬也可自行琢磨一套,觉得本屌丝写的不好或者发现了错误,
希望大家积极与我联系,本人QQ:1098654043,谢谢