移动适配（rem/px）

适配

流式布局

.flexlab (@display: flex,@justify:center,@align:center) {

  display: @display;

  justify-content: @justify;

  align-items: @align;

}

Sass(使用Sass的函数、混合宏这些功能来实现):

写一个函数px2em传入参数px及基础字体

因为字体实际的rem为

（原始px字体大小／跟字体大小）*1rem

@function px2em($px, $base-font-size: 16px) {
  @if (unitless($px)) {
    @warn "Assuming #{$px} to be in pixels, attempting to convert it into pixels for you";
    @return px2em($px + 0px); // That may fail.
  } @else if (unit($px) == em) {
    @return $px;
  }
  @return ($px / $base-font-size) * 1em;

混合宏px2rem

@mixin px2rem($property,$px-values,$baseline-px:16px,$support-for-ie:false){
  //Conver the baseline into rems
  $baseline-rem: $baseline-px / 1rem * 1;
  //Print the first line in pixel values
  @if $support-for-ie {
    #{$property}: $px-values;
  }
  //if there is only one (numeric) value, return the property/value line for it.
  @if type-of($px-values) == "number"{
    #{$property}: $px-values / $baseline-rem;
  }
  @else {
    //Create an empty list that we can dump values into
    $rem-values:();
    @each $value in $px-values{
      // If the value is zero or not a number, return it
      @if $value == 0 or type-of($value) != "number"{
        $rem-values: append($rem-values, $value / $baseline-rem);
      }
    }
    // Return the property and its list of converted values
    #{$property}: $rem-values;
  }
}

cssRem

在编辑器插件中配置好（一般用sublime）

{
    "px_to_rem": 40, //px转rem的单位比例，默认为40
    "max_rem_fraction_length": 6, //px转rem的小数部分的最大长度。默认为6。
    "available_file_types": [".css", ".less", ".sass",".html"]
    //启用此插件的文件类型。默认为：[".css", ".less", ".sass"]
}

less中

.px2rem(@name, @px) {
    @{name}: @px / 100 * 1rem;
}

与response.js（设置dpr）结合使用

// function browserRedirect() {
//   var sUserAgent = navigator.userAgent.toLowerCase()
//   var bIsIpad = sUserAgent.match(/ipad/i) === 'ipad'
//   var bIsIphoneOs = sUserAgent.match(/iphone os/i) === 'iphone os'
//   var bIsMidp = sUserAgent.match(/midp/i) === 'midp'
//   var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) === 'rv:1.2.3.4'
//   var bIsUc = sUserAgent.match(/ucweb/i) === 'ucweb'
//   var bIsAndroid = sUserAgent.match(/android/i) === 'android'
//   var bIsCE = sUserAgent.match(/windows ce/i) === 'windows ce'
//   var bIsWM = sUserAgent.match(/windows mobile/i) === 'windows mobile'
//   // console.log('您的浏览设备为：')
//   if (bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM) {
//     return 'phone'
//   } else {
//     return 'pc'
//   }
// }

if (typeof window !== 'undefined') {
  // We are in the browser
  (function (win) {
    var doc = win.document
    var docEl = doc.documentElement
    var metaEl = doc.querySelector('meta[name="viewport"]')
    // var tid

    var dpr = 0
    var rem
    var scale = 0
    var clientWidth = docEl.clientWidth
    if (clientWidth === undefined) return
    // console.log(window.devicePixelRatio)
    // console.log(docEl.clientWidth)
    if (!dpr && !scale) {
      // 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倍的方案，其余的用1倍方案
        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 = clientWidth * dpr / 7.5

    // 设置viewport，进行缩放，达到高清效果
    metaEl.setAttribute('content', 'width=' + dpr * clientWidth + ',initial-scale=' + scale + ',maximum-scale=' + scale + ', minimum-scale=' + scale + ',user-scalable=no')

    // 设置data-dpr属性，留作的css hack之用
    docEl.setAttribute('data-dpr', dpr)

    // 动态写入样式
    // docEl.firstElementChild.appendChild(fontEl)
    // fontEl.innerHTML = 'html{font-size:' + rem + 'px!important}'
    docEl.style.fontSize = rem + 'px'

    // 给js调用的，某一dpr下rem和px之间的转换函数
    win.rem2px = function (v) {
      v = parseFloat(v)
      return v * rem
    }
    win.px2rem = function (v) {
      v = parseFloat(v)
      return v / rem
    }

    win.dpr = dpr
    win.rem = rem
  })(window)
}

转换的比例(跟路径)

Rem = rem = clientWidth * dpr / 7.5

1、先引入设置dpr和font-size的js

• 动态改写标签
• 给元素添加data-dpr属性，并且动态改写data-dpr的值
• 给元素添加font-size属性，并且动态改写font-size的值

2、美化工作——视觉稿中的px转换成rem

视觉设计师给到前端开发人员手中的视觉稿尺寸一般是基于640px、750px以及1125px宽度为准

Flexible会将视觉稿分成100份（主要为了以后能更好的兼容vh和vw），而每一份被称为一个单位a。同时1rem单位被认定为10a

快速计算

CSSREM是一个CSS的px值转rem值的Sublime Text3自动完成插件

除了插件之外

使用sass混合宏

文本又将如何处理适配

不希望文本在Retina屏幕下变小，另外，我们希望在大屏手机上看到更多文本，以及，现在绝大多数的字体文件都自带一些点阵尺寸，通常是16px和24px，所以我们不希望出现13px和15px这样的奇葩尺寸

只不过使用[data-dpr]属性来区分不同dpr下的文本字号大小。

mixin font-dpr($font-size){
    font-size: $font-size;

    [data-dpr="2"] & {
        font-size: $font-size * 2;
    }

    [data-dpr="3"] & {
        font-size: $font-size * 3;
    }
}
@include font-dpr(16px);

3、丈量设计稿

设计稿是750x1500的应该怎么办？其实这个还好，750刚好就是375的2倍，iPhone6的宽度。因此量出来的尺寸直接除以2就行了。如果是1080x1920等很大很大的尺寸呢？1.首先保存整张设计稿.jpg 2.新建一个psd，宽度375px，高度1000px(高度可以高一点，无所谓) 3.将保存的设计稿.jpg丢进去。这样量出来的页面元素的尺寸，就是你需要的尺寸。

ps：最好的方法，就是让设计师用sketch出设计稿。

4

自己只是用来放在移动端的页面，别人却在pc上打开了，因此可以设置一个html的最大宽度与最小宽度。580px就是手机上浏览器的最大宽度。

5、一、rem的适用性很有局限，仅仅只能够用于只在移动端展示的页面。如果你的页面还需要适配到pc端，那么就老老实实的使用px吧。

参考链接：http://www.jianshu.com/p/d0fe770b07ae

https://juejin.im/post/588192872f301e0069858c4a