移动高清适配

像素

CSS像素

• 在CSS中，使用px作为单位，该px和物理像素并不是相等的，是相对的关系。
• CSS中的像素只是一个抽象的单位，在不同的设备或不同的环境中，CSS中的1px所代表的物理像素是不同的。在PC端，CSS的1px一般对应着电脑屏幕的1个物理像素，但在移动端，CSS的1px等于几个物理像素是和屏幕像素密度有关的。
• CSS的1px等于几个物理像素，除了和屏幕密度dpr有关，还和用户缩放有关系。例如，当用户把页面放大一倍，那么CSS中1px所代表的物理像素也会增加一倍；反之把页面缩小一倍，CSS中1px所代表的物理像素也会减少一倍。

设备像素（又称物理像素）

设备像素又被称为物理像素、设备物理像素，它是显示器（电脑、手机屏幕）最小的物理显示单位，每个物理像素由颜色值和亮度值组成。所谓的一倍屏、二倍屏（Retina）、三倍屏，指的是设备以多少物理像素来显示一个CSS像素，即多倍屏以更多更精细的物理像素点来显示一个CSS像素点，在普通屏幕下1个CSS像素对应1个物理像素，而在Retina屏幕下，1个CSS像素对应的却是4个物理像素。

设备独立像素

设备独立像素又被称为CSS像素，是写CSS所用的像素，它是一个抽象的单位，主要使用在浏览器上，用来精确度量Web页面上的内容。

设备像素比（device pixel ratio）

设备像素比简称dpr，定义了物理像素和设备独立像素的对应关系：设备像素比=物理像素/设备独立像素。

视口viewport

viewport是设备上用来显示网页的那一块区域，但viewport不局限于浏览器可视区域的大小，可能比浏览器的可视区域要大，也可能比浏览器的可视区域要小。在默认情况下，一般来讲，移动设备上的viewport都是要大于浏览器可视区域的，这是因为考虑到移动设备的分辨率相对于桌面电脑来说都比较小，所以为了能在移动设备上正常显示那些传统的为桌面浏览器设计的网站，移动设备上的浏览器都会把自己默认的viewport设为980px或1024px（也可能是其它值，这个是由设备自己决定的），但带来的后果就是浏览器会出现横向滚动条，因为浏览器可视区的宽度是比这个默认的viewport的宽度要小的。

• visual viewport 可见视口，指屏幕宽度
• layout viewport 布局视口，指DOM宽度
• ideal viewport 理想视口，使布局视口就是可见视口即为理想适口

适配

为了适应各种移动端设备，完美呈现应有的布局效果

图片模糊问题

一个位图像素是栅格图像(如：png, jpg, gif等)最小的数据单元。每一个位图像素都包含着一些自身的显示信息(如：显示位置，颜色值，透明度等)。理论上，1个位图像素对应于1个物理像素，图片才能得到完美清晰的展示。对于dpr=2的Retina屏幕而言，1个位图像素对应于4个物理像素，由于单个位图像素不可以再进一步分割，所以只能就近取色，导致图片看起来比较模糊。
　
如果普通屏幕下，也用了两倍图片，在普通屏幕下，200×300(CSS pixel)img标签，所对应的物理像素个数就是200×300个，而两倍图片的位图像素个数是200×300×4个，所以就出现一个物理像素点对应4个位图像素点，但它的取色也只能通过一定的算法取某一个位图像素点上的色值，这个过程叫做(downsampling)，肉眼看上去虽然图片不会模糊，但是会觉得图片缺少一些锐利度，或者是有点色差。

自适应适配方案

• em、rem、vw/vh
  • em：相对单位，1em等于当前元素的font-size值的1倍。
  • rem：相对单位1->root根节点（html）根据html的字体大小计算其他元素尺寸1rem就是html的font-size值。
  • vm/vh： 把屏幕（即浏览器可视区域）分为100份，1vw就等于屏幕宽度的1%。
• 媒体查询
  通过查询设备的宽度来执行不同的css代码，达到界面的配置。
  • 优点
    • 方法简单，成本低，特别是对移动和PC维护同一套代码的时候。
    • 调整屏幕宽度的时候不用刷新页面即可响应式展示。
  • 缺点
    • 代码量比较大，维护不方便。
    • 为了兼顾大屏幕或高清设备，会造成其他设备资源浪费，特别是加载图片资源。
    • 为了兼顾移动端和PC端各自响应式的展示效果，难免会损失各自特有的交互方式。
• 百分比与Flex布局

  • 布局的特性
    关键元素高宽和位置都不变，只有容器元素在做伸缩变换。这种布局是一种典型的弹性布局。

  • 布局方式

    • 局盒子采用百分比。
    • 容器盒子与文字采用固定大小。
    • Flex 确定位置(也可以采用浮动)。

  • 优缺点

    • 好处: 大屏下可以展示更多内容。
    • 坏处: 宽屏下比例会比较不协调。

  • 注意
    这种情况css尺寸单位用px就好，不要用rem，避免增加复杂度。

• rem布局
  • 布局特性
    关键元素盒子大小与文字都随着屏幕大小不同,而展示不同的大小
  • 布局方式
    • 根据屏幕大小不同设置html不同的字体大小
    • 所有的盒子尺寸和文字大小采用rem的布局方式
• 缩放布局
  固定高度宽度.文字大小，通过改变缩放比例适配.
  根据屏幕的分辨率动态设置适配缩放比例，达到等比缩放的功能。根据dpr来设置不同的viewport缩放比例。

参考资料
移动端高清适配方案（解决图片模糊问题、1px细线问题）
移动端高清屏适配方案
谈谈移动端屏幕适配的几种方法
移动端适配布局(设备像素,独立像素和css像素的区别,以及自适应适配方案)