本文是内部分享和沉淀。 它偏向于基础知识并涉及一些有趣的细节。
后端的主要任务之一就是兼容页面在不同内核、不同设备、不同分辨率的浏览器中的行为，使页面能够在各种主机环境下正常工作。
本文的主题——联通开发的兼容性适配与性能优化，就是从联通开发的一些常见问题入手，理清Web联通开发的前后，一些技术的发展过程，以及一些问题的优化一些常见兼容性问题的处理方法和解决方案。
什么是响应式设计
首先我们来说说响应式设计css3 图片比例缩放，它与中国联通的发展息息相关。
响应式设计就是RWD，ResponsiveWebDesign。
这里百度或者微软会有各种答案。 这是知乎上我认为很棒的一个答案的摘录：什么是响应式布局设计？
根据维基百科及其参考资料，理论上，响应式界面可以适应不同的设备。 描述响应式界面最著名的一句话是“Contentis like water”，翻译成英语就是“如果将屏幕视为一个容器，那么内容就像水”。
为什么要设计响应式界面
为什么要费尽心思去统一所有设备呢？
响应式界面的四个级别 响应式界面的基本规则
我认为上一段已经包含了响应式设计的大部分内容。 简要概括如下：
媒体查询、边界断点规则设置（Mediaqueries&&breakpoint）
内容可扩展性功效（Flexibelvisuals）
流体网格
主要内容及图片质量（主要内容及图片质量）
响应式与自适应
响应式设计是ResponsiveWebDesign（RWD），自适应设计是AdaptiveWebDesign（AWD）。 有时人们会混淆两者，或者根本分不清所谓的响应性和适应性。
虽然当我写这篇文章时，我并不能完全区分这两者。
RWD和AWD都是为了适应各种联通设备而形成的技术，旨在提高用户体验。 其核心思想是利用技术使网页适应从小到大（如今到超大）不同码率的屏幕。 一般来说，RWD 是 AWD 的一个子集。
RWD：EthanMarcote 的文章就是你认为的RWD 的起源。 他提出的RWD解决方案是通过具有流体布局的HTML和CSS的媒体查询技术来实现的。 RWD 往往只改变元素的外观和布局，而不会实质性改变内容。 Jeffrey Zeldman 总结道，我们将 RWD 定义为可用于优化各种帧速率和设备性能的视觉体验的任何技术。
AWD：自适应设计是 Aaron Gustafson 的书的标题。 他认为AWD除了RWD的CSS媒体查询技术外，还应该使用Javascript来操作HTML，以更好地适应中国联通设备的能力。 AWD可以按照联通最终用户的内容和功能来划分。 AWD可以在服务器端进行优化，并将优化后的内容发送到终端。
一张图片胜过千言万语。
根据定义，RWD 是一组适用于所有屏幕的代码。 而AWD是多终端、多组代码。 本文不会过多担心响应性和适应性之间的差异。 我觉得这三者的本质都是为了适应不同的设备，更好的提升用户体验。
Quora-ResponsiveDesignvs.AdaptiveDesign？知乎--Responsivedesign和Adaptivedesign的区别
渐进式提升与高贵降级
区别：优雅的降级从复杂的现状开始，并尝试减少用户体验，而增量改进从非常基本的功能版本开始，并进行扩展以满足未来环境的需求。 退化（功能衰退）意味着向前看； 渐进式改进意味着向前看，同时将其根植于安全的地方。
渐进式提升/高贵降级是 AWD 通常涉及的另一个技术术语。 本质上，随着屏幕尺寸的变化，功能也会逐渐增加。
它通常也用于一些中间 CSS3 属性。 我们对一些CSS属性进行特征检查，甚至不进行特征检查就直接使用它们。 造成的后果是该属性在支持它的网页上正常显示，但在不支持它的网页上该属性不生效，但不影响用户的基本使用。
一个典型的例子就是CSS3逐渐被大众认识和使用的时期，PC端页面开始从IE678转向更兼容的IE9+、chrome、firefox浏览器。 我们可以直接在页面元素上使用阴影、圆角等属性。 对于不支持的低级IE来说，没有损失，但对于支持的中级浏览器来说，给用户带来了更好的交互视觉体验，这是增量的改进。
联通终端屏幕适配方案
下面将讨论一些具体情况。 首先是高保真还原设计稿，即如何适应中国联通的长屏尺寸。
一般来说，设计者只会给出单个码率的设计稿，而我们要做的就是以这个设计稿为基准，适配所有不同尺寸的联通设备。
在此之前，有一些基本概念需要了解。
有些概念性的东西对于大多数人来说很难一次性记住，或者记住了又忘记。 我觉得记忆更多的是方法，比如联想法、想象法，把那些尖锐的概念和一些常识结合起来。 与记忆相关的知识往往可以收到事半功倍的效果。
与设备无关的像素
以iPhone6/7/8为例，这里我们打开Chrome开发者工具：
这里的375*667代表什么？ 它表示设备独立像素（DIP），也可以理解为CSS像素，也称为逻辑像素：
设备独立像素 = CSS 像素 = 逻辑像素
怎么记住呢？ 这里使用CSS像素来记住，即。 我们设置一个长度为375px的div，刚好可以填满这个设备的一行，而高度为667px，div的大小刚好可以填满整个屏幕。
化学像素
好的，那么哪些是数学像素？ 当我们去电商网站订购手机时，我们会看一下手机的参数。 以京东上的iPhone 7为例：
可以看到，iPhone 7的帧率为1334x750，描述的是屏幕的实际化学像素。
化学像素，也称为设备像素。 显示屏是由数学像素一一组成的，1334x750代表手机垂直和水平方向的像素数量。 通过控制每个像素的颜色，屏幕可以显示不同的图像。 从屏幕从鞋厂下来那天起，里面的数学像素就固定下来了，单位是pt。
设备像素 = 化学像素
DPR(DevicePixelRatio)设备像素比
OK，有了前两个概念，就可以逻辑推导出下一个概念了。 DPR（DevicePixelRatio）设备像素比，这个和我们一般所说的黄斑屏（多屏、Retina屏）有关。
设备像素比描述了未缩放状态下数学像素与设备独立像素之间的初始比率关系。
简单的估算公式：
DPR=化学像素/设备独立像素
我们应用iPhone7里面的数据（取设备的化学像素长度和设备的独立像素长度来估算）：
iPhone7的DPR=iPhone7的化学像素长度/iPhone7的设备独立像素长度=2
750/375=2 或 1334/667=2
iPhone7的dpr可得为2，这就是我们常说的黄斑屏。
视网膜屏幕是苹果公司“发明”的一个营销术语。 Apple 将 dpr > 1 的屏幕称为黄斑屏幕。
在黄斑屏幕中，以dpr=2为例，将4（2x2）像素作为1像素，这样使得屏幕看起来更加美观，而元素本身的大小并没有改变：
好吧，我们再看看iPhoneXSMax：
其化学像素为2688x1242如上图，
其CSS像素为896x414，很容易得出iPhoneXSMax的dpr为3。
前三个概念（CSS像素、设备独立像素、DPR）我认为比较重要css3 图片比例缩放，还有一些其他比较重要的概念PPI和DPI不影响后续内容，大家可以自行加深理解。
好的，到这里我们已经完成了一个小里程碑。 我们一般所说的H5手机适配是指这两个维度：
适配不同屏幕尺寸，即适配不同屏幕下的CSS像素
适配不同像素密度，即适应不同屏幕下dpr不一致带来的一些问题
适应不同屏幕尺寸
适配不同屏幕尺寸，即适配不同屏幕下的CSS像素。 最早针对联通终端屏幕的CSS像素适配解决方案是CSS媒体查询。 并且很难做到接近100%的高保真还原。
适配不同的屏幕尺寸似乎只需要遵循一个原则，保证页面元素的尺寸与屏幕尺寸保持一定的比例，那就是：按比例还原设计稿
假设我们现在收到一份标记为375*667的设计稿，其中一个元素标记如下：
根据页面长度，
这样，无论屏幕的CSS像素长度是320px、375px还是414px，按照等效比例还原出来的界面总是正确的。
然而，理想很丰满，现实很感性。 实现上述比例方案的核心需要一个全球通用的基准单位，这样所有的比例都可以基于它来显示，而在CSS中，根据CSSValuesandUnitsModuleLevel4的定义：
比率值总是相对于另一个量，例如宽度。 每个允许使用比率值的属性还定义比率值所指的数量。 该量可以是同一元素的另一个属性的值、祖先元素的属性的值，甚至是低级上下文的度量（例如包含块的长度）。
具体来说：
首先，支持比率单位的度量属性有自己的参考，其次，并非所有度量属性都支持比率单位。 所以我们需要寻找另一种方法。
rem适配方案
在vw方案下来之前，最被接受的方案是使用rem进行适配。 由于rem满足上述条件，因此它可以成为全球基准单位。
rem(fontsizeoftherootelement)，CSSValuesandUnitsModuleLevel3中的定义是根据网页的根元素设置字体大小，而em(fontsizeoftheelement)，不同的是em是根据其父元素的字体大小设置，而rem是根据网页元素（html）的根元素来设置字体大小。
灵活的
基于此，天猫早年实施了基于rem的适配方案：lib-flexible。 其核心方法是：
关于前两点，虽然现在的lib-flexible库早已不再这样做了，它不再缩放Viewport，而且字体大小设置也直接使用rem
热门CSS
hotcss 不是一个库，也不是一个框架。 联通终端布局开发解决方案。 使用hotcss可以让联通终端的布局开发变得更加简单。 本质思想和灵活是一模一样的。
rem方案的一些总结
使用flexible/hotcss作为屏幕长度适配方案存在一些问题：
动态改变视口存在一定的风险。 例如，通过Viewport改变页面的缩放比例后，获取到的innerWidth/innerHeight也会发生剧烈的变化。 如果业务逻辑获取这个高度和宽度用于其他估计，可能会导致意想不到的结果。 错误;
明天，虽然有很多各种各样的rem解决方案是在flexible的基础上演化出来的，但有些不会缩放Viewport，自己处理1px边框问题。
flexible/hotcss不是一个纯粹的CSS解决方案，它需要引入一定的Javascript代码
rem 的设计并不是为了解决这类问题。 使用 rem 来调整页面的长度有点hacky。
存在一定的兼容性问题，4.4以下的Android版本系统不支持viewport缩放（事实上flexible处理Android系列时，仍然认为自己的dpr为1，不进行viewport缩放）
大众改装方案
严格来说，虽然使用rem进行页面适配是一种hack方法，但是rem单元本身的初衷并不是用来适配联通的页面长度的。
明天有更好的替代方案，使用vw进行适配。
比例适配方案的核心需要一个全球通用的基准单元，rem就不错，需要用Javascript动态改变根元素的font-size，vw/vh(vmax/vmin)的外观很好弥补 rem 需要 JS 辅助的缺点。
根据CSSValuesandUnitsModuleLevel4：vw等于初始包含块（html元素）长度的1%，即
以之前设计稿的元素为例，所以，
根据相关测试，可以使用vw的宽度单位有：
一个简单的页面，看一下效果，完全就是比例缩放的效果：
大众汽车
CodePenDemo（联通开放）：使用vw进行页面适配
手动转换插件
当我们使用rem作为宽度单位时，通常会使用Sass/Less来实现一个转换函数，像这样：
// 假设设计稿的宽度是 375px，假设取设计稿宽度下 1rem = 100px
$baseFontSize: 100;
@function px2rem($px) {
@return $px / $baseFontSize * 1rem;
}
同样，在vw方案下，我们只需要重写这个方法：
// 假设设计稿的宽度是 375px
@function px2vw($px) {
@return $px / 375 * 100vw;
}
其实我们也可以使用一些插件包来实现这种手动转换，提高效率，比如postcss-px-to-viewport
大众polyfill
虽然vw还存在兼容性问题，但是看看兼容性：
虽然大部分设备已经覆盖，但是如果业务使用，出现兼容性问题，应该如何处理？ 降级处理有两种形式：
vw方案的一些总结
大众汽车看起来确实不错，但也存在一些问题：
也未能解决高清屏下1px边框的显示问题，需要自行处理
因为vw方案是完全算术缩放，设计稿完全算术还原带来的一个问题是很难定义最大最小长度值，因为rem方案使用了Javascript，所以这个比vw要好对物将变得更加灵活
事实上，虽然现阶段两种解决方案都可以使用甚至一起使用，但您可以阅读更多详细信息：
1 像素线
当谈到使用vw来适应屏幕尺寸时，缺点之一是在Retina屏幕下很难显示真实的1px化学像素腰线。
设计师想要的 border:1px 的视网膜下，虽然是 1 个化学像素长度，而不是 1CSS 像素长度，对于 CSS 来说：
然而，并不是所有的移动浏览器都能识别 border-width: 0.5px。 在iOS7和Android等其他系统中，大于1px的单位将被视为0px。 那么如何实现这0.5px和0.33px呢？
有以下几种方法：
Retina屏幕下1px线的实现
图像适配与优化
图片通常占据了网页上大部分下载资源。 优化图像通常可以最大限度地减少从网站下载的字节数并提高网站性能。
一般来说，有一些通用的优化方法：
去除多余的图片资源
尽可能使用CSS3SVG矢量图像来替换单个光栅图像
谨慎使用字体图标，使用网络字体而不是在图像中编码文本
选择正确的图像格式
为不同的DPR屏幕提供最合适的图像规格
本文主要介绍如何让图片在不同的dpr屏幕下看起来不失真。
首先是上面的第二点，尝试使用CSS3SVG矢量图像来代替单个光栅图像。 一些可以用CSS3快速实现的简单几何图标和图形应尽量避免使用光栅图像。 这确保了它们在任何规格下都不会变形。
其次，说到必须使用光栅图像的时候，有很多方法可以保证图像在各种场景下不失真。
无脑测谎仪
假设我们需要一张联通侧CSS像素为300x200的图片。 考虑到已经存在dpr=3的设备，为了保证图像在dpr=3的设备下高清显示，我们可能需要一张900x600的原图。
这样，无论设备的dpr是否为3，我们都会统一使用3倍的图像。 这样，即使在dpr=1和dpr=2的设备上，图片也能很好的显示。
其实这是不可取的，它会导致带宽的大量浪费。 现代浏览器提供了更好的方法，使得我们可以根据设备的不同dpr提供不同规格的图片。
具有 1x2x 像素密度描述符的 srcset
简单来说，srcset可以根据不同的dpr拉取相应规格的图片：
<div class='illustration'>
<img src='illustration-small.png'
srcset='images/illustration-small.png 1x,
images/illustration-big.png 2x'
style='max-width: 500px'/>
</div>
srcset里面的1x和2x代表像素密度描述符，意思是
srcset属性与sizes属性配合w长度描述符
里面1x和2x的写法更容易让人接受和理解。
另外，srcset属性还有aw长度描述符，可以与sizes属性一起使用来覆盖更多的表面。
以下代码是一个示例：
<img
sizes = “(min-width: 600px) 600px, 300px"
src = "photo.png"
srcset = “photo@1x.png 300w,
photo@2x.png 600w,
photo@3x.png 1200w,
>
解析它：
size="(min-width:600px)600px,300px"表示如果屏幕当前CSS像素长度小于等于600px，则图片的CSS长度为600px，否则为图片的CSS长度是 300 像素。
即sizes属性声明了不同长度下图像的CSS长度表现。 这里可以理解为大屏幕上图片的长度为600px，小屏幕上图片的长度为300px。 （具体媒体查询代码由CSS实现）
这里的sizes属性仅表示不同长度的图像的CSS长度表示，而在小于600px的屏幕上将图像显示为600px的实际代码需要通过CSS或JS来实现，这有点混乱。
srcset="photo@1x.png300w, photo@2x.png600w, photo@3x.png1200w 上面的300w、600w、900w称为长度描述符，如何确定当前场景中将选择哪张图片？
当前屏幕dpr=2，CSS长度为375px。
当前屏幕的CSS长度为375px，图像的CSS长度为300px。 将上述三个长度描述符的值分别乘以300。
300/300=1
600/300=2
1200/300=4
其中估计的1、2、4就是计算出的有效像素密度，转换成相当于x描述符的值。 这里600w计算出来的2满足dpr=2的情况，所以选择这张图。
当前屏幕dpr=3，CSS长度为414px。
当前屏幕的CSS长度为414px，图像的CSS长度仍然是300px。 再次估计：
300/300=1
600/300=2
1200/300=4
由于dpr=3，2已经不够了，所以此时会选择1200w的图片。
当前屏幕dpr=1，CSS长度为1920px。
当前屏幕的CSS长度为1920px，图像的CSS长度变为600px。 再次估计：
300/600=.5
600/600=1
1200/600=2
由于dpr=1，此时会选择600w对应的图片。
具体来说，你可以尝试这个Demo：CodePenDemo--srcset attribute with w length描述器和sizes属性
这个方案的意义在于它考虑到了响应式布局的复杂性和屏幕的多样性。 借助上述规则，可以同时适应PC端的大屏和联通端的高清屏，一箭多鸟。
CSS 有一个类似的属性 image-set()，一起使用效果更好。
