从web专业角度谈谈如何对screen设备宽度断点

来源：互联网发布：金润软件成都编辑：程序博客网时间：2024/04/30 14:54

声明：很多地方都是引用前辈们整理的资料，最后本人会做出一些总结，原创也只是那部分总结内容和整理资料的汗水，

智慧都是大家的，希望互联网行业蒸蒸日上！

望各位转发时作者注明出处：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/79G

15.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英寸分辨率为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.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一套，手机一套

还需要加入

以及ie9以下浏览器没有@media和不支持h5处理的js

在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，谢谢

1 0