移动适配（rempx）

适配

流式布局

.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