第一步引入标签
在所有页面都引入这个 属性名为viewport的meta标签来设置视窗，视窗的大小等于设备宽度
第二步 还是使用手淘的flexible方案
引入阿里的cdn js文件
<sccriptsrc="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"> </script>
建议对JS做内联处理，在所有资源加载之前执行这个JS。执行这个JS后，会在元素上增加一个data-dpr属性，以及一个font-size样式。JS会根据不同的设备添加不同的data-dpr值，比如说2或者3，同时会给html加上对应的font-size的值，比如说75px。
目前Flexible会将视觉稿分成**100份**（主要为了以后能更好的兼容vh和vw），而每一份被称为一个单位a。同时1rem单位被认定为10a。针对750px视觉稿可以计算出：
1a = 7.5px
1rem = 75px
那么这个设计稿就分成了10a，也就是整个宽度为10rem，对应的font-size为75px： 这样一来，对于750px设计稿上的元素尺寸换算，只需要原始的px值除以rem基准值即可。例如此例设计稿中的图片，其尺寸是176px * 176px,转换成为2.346667rem * 2.346667rem。
第三步 如何使用rem
在实际生产当中，如果每一次计算px转换rem，或许会觉得非常麻烦，直接影响平时的开发效率。可以使用sublime 插件cssrem进行转换
CSSREM是一个CSS的px值转rem值的Sublime Text3自动完成插件。这个插件是由@正霖编写
这个插件会将px自动转换为rem，具体如何使用，请点击访问cssrem
第四步 不使用cssrem插件的话，例如vscode党以及webstorm党的px转rem方法，写给使用sass的同学，本人也是喜欢使用sass以及是vscoed党
@function pxrem($px, $font-size: 75px) {
@return ($px / $base-font-size) * 1rem;
}这里的这个参数$font-size: 75px，可以通过设计稿的宽度来计算。假如设计稿宽750，则$font-size为75px。设计稿量得多少就写多少
例如设计稿的盒子宽190px 高190px，实际代码就可以写成
box { width: pxrem(190px); height: pxrem(190px);
}下面是演示代码
<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script> 多页面
<div class=”box” >我是个傻盒子</div>
base.scss 文件(需要使用打包工具webpack或者glup进行编译成css文件才能使用)
@function pxrem($px, $font-size: 75px) {
@return ($px / $base-font-size) * 1rem;
}.box{ width: pxrem(190px); height: pxrem(190px);
}在每个页面都要引入js cdn文件以及加上meta标签哦，写完你的项目，打包编译后就可以美滋滋地放上服务器被各种机型手机访问了
随时随地看视频
