何为分辨率?有如何写响应式布局?

一、什么叫分辨率，为什么出现分辨率？

我不知道大家上过大学物理课么，光学那部分，经常做这种题目，给你一个墙缝宽度，计算人眼在多远完全看不到这缝隙。这电脑屏幕小方块很相似，你很近看电脑屏幕，你可以看很多小方块。当我们把问题反过来，人眼已经在一定距离范围内看电脑屏幕，方块大小为多少，才看不出。

这就是分辨率，由此而看，网页的分辨率为72ppi，这样子可以便于理解分辨率。

二、响应式布局的分辨率

当然，你就这样子了解分辨率显然不够，由于现在屏幕技术越来越发达，在五寸的分辨率都为1920*1080。然后根据以下公式算出他的分辨率， 大概为300多ppi，还有更高的ppi。。

如果用bootstrap布局，bootstrap分别对应的是小屏幕768px，中屏幕992px，大屏幕1200px。那岂不是达不到响应式的要求了，那这是怎么回事呢？

其实就区分几个概念，网上有很多说发，有的比较复杂，没必要那么复。

1. point 代表人眼实际看到的一个点，大小不固定，通过像素密度计算得出。

2. pixel 是用来显示图像的屏幕上的像素，是屏幕用来“实现” point 的基本单位，大小不固定。

请记住：Media Query 查询的不是 px，但其实是 pt。
（或者另外一中说发1pt可以含多个px，72pt大学是2.54cm，也就一寸）

举例来说

1. iPhone 5 分辨率 320x568，屏幕像素 640x1136，@2x

2. iPhone 6 分辨率 375x667，屏幕像素 750x1334，@2x

3. iPhone 6 Plus 分辨率 414x736，屏幕像素 1242x2208，@3x

后面的 @2x 其实就是像素密度，代表 1pt = 2px 。

要适配 iPhone 6，其实只需要查询width:375就可以了，而不是 750，因为分辨率其实是考虑了像素密度的。

另外介绍一个手机屏幕分辨率的网址：http://screensiz.es/tablet

文章:http://screensiz.es/tablet

文/丁向明

做一个有博客的web前端自媒体人，专注web前端开发，关注用户体验，加我qq/微信交流：6135833

http://dingxiangming.com