布局视口、视觉视口、理想视口

移动开发

1.物理像素：

我们知道显示屏是由一个个的发光点组成的，一个个的发光点又是由红绿蓝三原色组成，而一个发光点就是1物理像素（physical pixel），也叫设备像素（dp:device pixel）。

2.逻辑像素：

逻辑像素（logical pixel），也叫css像素，也就是我们在开发中使用的像素px。

3. 设备像素比（dpr:device pixel ratio）：

计算方法：dpr=设备像素/CSS 像素（缩放比是1的情况下），
dpr>1 的我们都可以认为是高清屏

4. PPI：(Pixels Per Inch)

每英寸的物理像素点，
也叫像素密度，所表示的是每英寸所拥有的像素数量。因此PPI数值越高，即代表显示屏能够以越高的密度显示图像。当然，显示的密度越高，拟真度就越高
。

5. 二倍图

一张css像素的图片，在手机中打开，按照物理像素比会放大倍数，会造成图片模糊
所以我们使用倍图来提高图片质量，解决在高清屏设备中的模糊问题

在标清屏上，1个css像素使用1个物理像素表示
    在高清屏上，1个css像素使用2个物理像素表示
    也就是说，图片在高清屏上会被放大2倍，所以50 * 50 的图片会被放大到100 * 10
    
解决方法：
    如果我们想在手机上显示50*50的图片，根据手机的dpr，如果是2，则使用一张100*100的图片，然后
    通过css将其设置为 50*50，那么到了高清屏下，会自动的将其放大2倍，成为100*100，而我们图片
    本身就是100*100，所以不会失帧

6.CSS3 盒子模型 box-sizing

• 设置盒子的尺寸以内容为准还是边框为准

• w3c盒子模型 ： content-box宽度计算：盒子宽度= CSS 中设置的 border+width+padding

• css3盒子模型: border-box宽度计算：盒子宽度=CSS 中设置的width 里面包含了 border 和 padding

• 注意：移动端可以全部使用CSS3盒子模型，PC端如果需要兼容，使用传统模式，不考虑兼容，使用CSS3 盒子模型

7.单独做移动版本的页面的几种布局方式

单独制作移动端页面（主流）

• 流式布局（百分比布局）
• flex弹性布局（强烈推荐）
• less+rem+媒体查询布局
• 混合布局

8布局视口、视觉视口、理想视口

1. 布局视口

布局视口可以理解成画板，也就是说纸张只有这么大，如果你想在A4纸上画等比例清明上河图，那显然是会溢出去的。

2.视觉视口

视觉视口就是浏览器的宽高。只是在 PC 端，浏览器窗口可以随意改变大小，我们可以直观的看到。而在 Client 端，大部分手机、平板的浏览器是不支持改变浏览器宽高的，所以其视觉视口就是其屏幕大小。

3.理想视口

• 布局视口宽度 = 视觉视口宽度 = 设备宽度( = 内容宽度)

规定开发者在开发过程中，内容的宽度不能超出布局视口的宽度