(function(win, lib) {
  var doc = win.document; // 当前文档对象
  var docEl = doc.documentElement; // 文档对象根元素的只读属性
  var metaEl = doc.querySelector('meta[name="viewport"]');
  var flexibleEl = doc.querySelector('meta[name="flexible"]');
  var dpr = 0;
  var scale = 0;
  var tid;
  var flexible = lib.flexible || (lib.flexible = {});
  if (metaEl) {
    // 当 meta 中 viewport 的标签设置了 scale 时，将根据 scale 手动设置 dpr
    console.warn('将根据已有的 meta 标签来设置缩放比例');
    var match = metaEl.getAttribute('content').match(/initial\-scale=([\d\.]+)/);
    if (match) {
      scale = parseFloat(match[1]);
      dpr = parseInt(1 / scale);
  } else if (flexibleEl) {
    // 当 meta 中 flexible 的标签存在时，据此设置 dpr
    var content = flexibleEl.getAttribute('content');
    if (content) {
      var initialDpr = content.match(/initial\-dpr=([\d\.]+)/);
      var maximumDpr = content.match(/maximum\-dpr=([\d\.]+)/);
      if (initialDpr) {
        dpr = parseFloat(initialDpr[1]);
        scale = parseFloat((1 / dpr).toFixed(2));
      if (maximumDpr) {
        dpr = parseFloat(maximumDpr[1]);
        scale = parseFloat((1 / dpr).toFixed(2));
  if (!dpr && !scale) {
    // 根据 js 获取到的 devicePixelRatio 设置 dpr 及 scale，scale 是 dpr 的倒数
    var isAndroid = win.navigator.appVersion.match(/android/gi);
    var isIPhone = win.navigator.appVersion.match(/iphone/gi);
    var devicePixelRatio = win.devicePixelRatio;
    if (isIPhone) {
      // iOS 下，对于 2 和 3 的屏，分别用 2 和 3 倍方案
      if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {
        dpr = 3;
      } else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)) {
        dpr = 2;
      } else {
        dpr = 1;
    } else {
      // 其他设备下，仍旧使用 1 倍的方案
      dpr = 1;
    scale = 1 / dpr;
  // 文本字号不建议使用 rem，flexible 适配方案中，文本使用 px 作为单位，使用 [data-dpr] 属性来区分不同 dpr 下的文本字号
  docEl.setAttribute('data-dpr', dpr);
  if (!metaEl) {
    // 添加 meta 标签，设置 name 为 viewport，content 根据 scale 设置缩放比(默认、最大、最小缩放比)
    metaEl = doc.createElement('meta');
    metaEl.setAttribute('name', 'viewport');
    metaEl.setAttribute(
      'content',
      'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no'
    if (docEl.firstElementChild) {
      docEl.firstElementChild.appendChild(metaEl);
    } else {
      var wrap = doc.createElement('div');
      wrap.appendChild(metaEl);
      doc.write(wrap.innerHTML);
  function refreshRem() {
    // 更新 rem 值
    var width = docEl.getBoundingClientRect().width;
    if (width / dpr > 540) {
      width = 540 * dpr;
    // 将当前视口宽度 width 10 等分
    var rem = width / 10; // 1rem = viewWidth / 10
    docEl.style.fontSize = rem + 'px';
    flexible.rem = win.rem = rem;
  // resize 与 pageshow 延时 300ms 触发 refreshRem(), 使用防抖函数，防止事件被高频触发可能引起性能问题
  win.addEventListener(
    'resize',
    function() {
      clearTimeout(tid);
      tid = setTimeout(refreshRem, 300);
    false
  win.addEventListener(
    'pageshow',
    function(e) {
      // 当一条会话历史记录被执行的时候触发事件，包括后退/前进按钮，同时会在 onload 页面触发后初始化页面时触发
      if (e.persisted) {
        // 表示网页是否来自缓存
        clearTimeout(tid);
        tid = setTimeout(refreshRem, 300);
    false
  // 在 html 文档加载和解析完成后设置 body 元素字体大小
  if (doc.readyState === 'complete') {
    doc.body.style.fontSize = 12 * dpr + 'px';
  } else {
    doc.addEventListener(
      'DOMContentLoaded',
      function(e) {
        doc.body.style.fontSize = 12 * dpr + 'px';
      false
  // 浏览器有最小字体限制，css 在 pc 上 font-size 是 12px (移动端最小是 8px), 也就是 css 像素是 12，其 DPR 为 1，在移动端 dpr 有可能为 2 和 3，为了保证字体不变小，需要用 12 * dpr 进行换算。
  refreshRem();
  //实现 rem 与 px 相互转换
  flexible.dpr = win.dpr = dpr;
  flexible.refreshRem = refreshRem;
  flexible.rem2px = function(d) {
    var val = parseFloat(d) * this.rem;
    if (typeof d === 'string' && d.match(/rem$/)) {
      val += 'px';
    return val;
  flexible.px2rem = function(d) {
    var val = parseFloat(d) / this.rem;
    if (typeof d === 'string' && d.match(/px$/)) {
      val += 'rem';
    return val;
})(window, window['lib'] || (window['lib'] = {}));

// 以1080px作为设计稿基准
$vw_base: 1080 @function vw($px) {
  @return ($px / 1080) * 100vw;
纯 css 移动端适配方案，不存在脚本依赖问题
相对于 rem 以根元素字体大小的倍数定义元素大小，逻辑清晰简单，视口单位依赖于视口的尺寸 1vw ＝ 1/100 viewport width，根据视口尺寸的百分比来定义元素宽度
存在一些兼容性问题，Android 4.4 以下不支持
rem + vw/vh 方案
vw/vh 方案能够实现宽度和高度的自适应，并且逻辑清晰，由于其被支持得较晚，所以存在一定的兼容性问题。将 vw/vh 方案与 rem 方案相结合，给根元素设置随视口变化的 vw 单位，可以通过 postcss-plugin-vwtorem 将其转换
对于 1080px 宽的设计稿，设置默认根字号的大小为 100px，那么设计稿中 1px 对应的是 100vw/1080 = 0.0925926vw，并且 1rem = 100px，也就可以得到 1rem = 9.256926vw
同时可以使用媒体查询限制根元素的最大最小值，实现对页面的最大最小宽度限制，对用户的视觉体验更好。
rem 弹性布局方式作为移动端 web 页面适配方法，后期从 rem 过渡到 vw ，只需要通过改变根元素大小的计算方式，不需要其他处理。vw 将会成为一种更好的适配方式，目前由于兼容性的原因得不到广泛应用。rem+vw/vh 不存在 vw/vh 的兼容性问题，可以成为由 rem 向 vw/vh 转变的一种过渡方案。
基于媒体查询的响应式设计
响应式设计使得一个网站同时适配多种设备和多个屏幕，让网站的布局和功能随用户的使用环境（屏幕大小、输出方式、设备/浏览器能力而变化），使其视觉合理，交互方式符合习惯。如使得内容区块可伸缩与自由排布，边距适应页面尺寸，图片适应比例变化，能够自动隐藏/部分显示内容，能自动折叠导航和菜单。
主要实现是通过媒体查询，通过给不同分辨率的设备编写不同的样式实现响应式布局，用于解决不同设备不同分辨率之间兼容问题，一般是指 PC、平板、手机设备之间较大的分辨率差异。
实现上不局限于具体的方案，通常结合了流式布局 + 弹性布局方案。比如给小屏幕手机设置@2x 图，为大屏手机设置@3x 图
@media only screen and (min-width: 375px) {
  /* 样式1 */
@media only screen and (min-width: 750px) {
  /* 样式2 */
能够使网页在不同设备、不同分辨率屏幕上呈现合理布局，不仅仅是样式伸缩变换
要匹配足够多的设备与屏幕，一个 web 页面需要多个设计方案，工作量比较大
通过媒体查询技术需要设置一定量的断点，到达某个断点前后的页面发生显著变化，用户体验不太友好
其他通用问题
1 像素问题
是指设置边框为 1px css 像素，在普通屏幕下 1px，高清屏幕 (dpr 为 2)下 2px 的情况。是由于不同移动设备的 dpr 不同，导致 1px css 像素，转换成物理像素后显示不一样。
设置 scale 为 1/dpr
css 中涉及 1 像素的地方仍然使用 px 作为单位，设置 <meta> 标签中 initial-scale=1/dpr ，将整个页面缩小 dpr 倍，对于页面采用 rem 方案的情况，将页面的根字体再放大 dpr 倍，这个时候就能够在不改变页面其他布局的情况下，保持边框的 css 像素为 1px。
transform 的 scale 属性
transform 的 scale 属性允许对元素进行缩放，其中 scaleY(y) 通过设置 Y 轴的值来定义缩放转换，并结合伪元素使用，通过 transform-origin: 50% 0% 修改元素变换的中心点实现。针对横着的边框线用 scaleY(y)，针对竖着的边框线要用 scaleX(x)，针对一圈的边框线用 scale()，并且需要注意转移元素变换中心点。
/* 针对竖着的边框线 */
.className::before {
  /* 其他样式 */
  transform-origin: 50% 0%;
/* dpr 为 2 时 */
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
  .className::before {
    transform: scaleY(0.5);
/* dpr 为 3 时 */
@media only screen and (-webkit-min-device-pixel-ratio: 3) {
  .className::before {
    transform: scaleY(0.33);
border-image 属性
使用 border-image，在元素的边框上设置一个一半透明一半显示的图片，也可以使用 CSS3 渐变填充
对图片的处理
加载网页时，平均 60% 以上的流量来自加载图片。
指定图像宽度时使用相对单位，防止意外溢出视口，如 width: 50%，将图片宽度设置为包含元素宽度的 50%。因为 css 允许内容溢出容器，需要使用 max-width: 100% 来保证图像及其他内容不会溢出。
使用 img 元素的 alt 属性提供描述，描述有助于提高网站的可访问性，能提供语境给屏幕阅读器及其他辅助性技术。
维护自适应页面中图片宽高比固定比较常用的方法是使用 padding 设置。
对于不同 dpr 以及不同分辨率/尺寸的屏幕，为了避免资源浪费和等待时间延长，需要针对不同的屏幕使用合适的图片，加载的图片分为通过标签引入的图片和背景图片。
srcset 和 sizes
对于 <img> 引入的图片，如果想要图片适应不同像素密度的屏幕，并且屏幕上显示图片的实际尺寸相同，使用 srcset 属性用来指定多张图像。它的值是一个逗号分隔的字符串，每个部分都是一张图像的 URL，后面接一个空格，后接是像素密度描述符。浏览器根据当前设备的像素密度，选择需要加载的图像。如果 srcset 属性都不满足条件，那么就加载 src 属性指定的默认图像。
<img srcset="foo-320w.jpg, foo-480w.jpg 1.5x, foo-640w.jpg 2x" src="foo-640w.jpg" />
<!--srcset属性给出了三个图像URL，适应三种不同的像素密度， 后面的像素密度描述符，格式是像素密度倍数 + 字母x。1x表示单倍像素密度，可以省略。-->




    

如果想要针对不同屏幕，使用不同分辨率版本和尺寸的图片，使用属性 srcset 和 sizes 。srcset 定义了允许浏览器选择的图像集，以及每个图像的大小（使用 w 单位）。sizes 定义了一组媒体条件（例如屏幕宽度），指明当某些媒体条件为真时，什么样的图片尺寸是最佳选择。
  srcset="elva-fairy-320w.jpg 320w, elva-fairy-480w.jpg 480w, elva-fairy-800w.jpg 800w"
  sizes="(max-width: 320px) 280px,
         (max-width: 480px) 440px,
         800px"
  src="elva-fairy-800w.jpg"
  alt="Elva dressed as a fairy"
浏览器的查询过程：
查看设备宽度；
检查 sizes 列表中哪个媒体条件是第一个为真；
查看给予该媒体查询的槽大小；
加载 srcset 列表中引用的最接近所选的槽大小的图像
<img> 引入的图片，使用 js 自带的异步加载图片。根据不同的 dpr，加载不同分辨率的图片。
<img id="img" data-src1x="[email protected]" data-src2x="[email protected]" data-src3x="[email protected]" />
var dpr = window.devicePixelRatio;
if (dpr > 3) {
  dpr = 3;
var imgSrc = $('#img').data('src' + dpr + 'x');
var img = new Image();
img.src = imgSrc;
img.onload = function(imgObj) {
  $('#img')
    .remove()
    .prepend(imgObj); //替换img对象
picture
为不同的视口提供不同的图片，使用 <picture> 标签。<picture> 是 html5 中定义的一个容器标签，内部使用 <source> 和 <image>，浏览器会匹配 <source> 的 type,media,srcset 等属性，找到最适合当前布局/视口宽度/设备像素密度的图像进行加载。这里的 <img> 标签是浏览器不支持 picture 元素，或者支持 picture 但没有合适的媒体定义时的后备，不能省略。
<picture>
  <source media="(min-width: 30px)" srcset="cat-vertical.jpg" />
  <source media="(min-width: 60px)" srcset="cat-horizontal.jpg" />
  <img src="cat.jpg" alt="cat" />
</picture>
Image-set
对于背景图片，使用 image-set 根据用户设备的分辨率匹配合适的图像，同时要考虑兼容性问题。
.css {
  background-image: url(1x.png); /*不支持image-set的情况下显示*/
  background: -image-set(
    url(1x.png) 1x,
    /* 支持image-set的浏览器的[普通屏幕]下 */ url(2x.png) 2x,
    /* 支持image-set的浏览器的[2倍Retina屏幕] */ url(3x.png) 3x /* 支持image-set的浏览器的[3倍Retina屏幕] */
media query
对于背景图片，使用媒体查询自动切换不同分辨率的版本
/* 普通显示屏(设备像素比例小于等于1)使用1倍的图 */
.css {
  background-image: url(img_1x.png);
/* 高清显示屏(设备像素比例大于等于2)使用2倍图  */
@media only screen and (min-device-pixel-ratio: 2) {
  .css {
    background-image: url(img_2x.png);
/* 高清显示屏(设备像素比例大于等于3)使用3倍图  */
@media only screen and (min-device-pixel-ratio: 3) {
  .css {
    background-image: url(img_3x.png);
对于上述的各种移动端 web 页面自适应方案来说，都存在着一些优势和不足。对于国内的一些互联网站，通过查看网页源代码发现，它可能不是某一种方案的单独使用，而是几种方案的结合。
一个页面上，元素的宽度设置上有百分比，也有 rem，字体的样式中有 rem，有 em，也有固定大小的 px；在屏幕宽度过大时不再缩放，也会用到媒体查询，并且响应式设计更多地可能是针对不同设备间的自适应。
对于移动端 web 页面的自适应方案来说，现在用的比较多的是 rem，逐渐向 vw/vh 发展，而 rem+vw/vh 则是作为 vw/vh 向后兼容的一种过渡。