移动适配（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