html{font-size:100px!important;}rem+simple-flexible适配方案简单分析rem相对于根元素的font-size的大小，以sitting为单位进行计算；simple-flexible是基于手淘团队lib-flexible.js对比重写的插件，兼容UC竖屏转横屏出现的BUG，自定义视觉设计稿的宽度：designWidth，设置最大宽度：maxWidth这里是simple-flexible的Github地址，下载使用即可；第一个参数是视觉设计稿的宽度，一般视觉设计稿有750px，可以根据实际情况调整。第二个参数是设置生产稿的最大宽度。如果超过750px，则750px为最大限制；使用时的转换比为1:100。即1rem=100px；使用步骤将simple-flexibleflexible.min.js或flexible.js代码复制到页面的也可以使用模块化的方式npm:npmi-Samfe-flexibleJS:import'amfe-flexible'/*dosomething*/优缺点在UC浏览器上找，横竖竖screenscannotbeconverted这种情况，已经找到了兼容的解决方案，解决方法是通过js在页面的中生成定义元素的font-size的style元素！html{font-size:100px!important;}并且官方也表示这是vw的over-the-top方案，不建议长期使用；PostCSS+VW适配方案简单解析PostCSS将CSS转换成JavaScript的数据，使其可操作；VW基于Viewpost是窗口的长度单位；Viewpost是指浏览器的可视化区域，可视化区域是窗口的大小。innerWidth/window.innerHeight；Viewpost相关的单位有以下四个vw：是Viewportwidth1的缩写vw=窗口。内部宽度的1%；vh：视口高度的简写1vw=window.innerHeight1%；vmin：vw和vh中较小的值vmax：vw和vh中较大的值使用步骤假设视觉设计稿的宽度为750px，即1vw=7.5px，那么vw的单位要根据到设计图的px值。为了避免这样的计算，本方案当然使用了PostCSS和postcss-px-to-viewport这个PostCSS插件。构建项目时使用打包工具是最爽快的。建议在以下环境中尝试；parceljswebpack用过前端脚手架的童鞋应该都看到了，项目根目录下会有一个.postcssrc文件，里面包含了所有的一些配置选项，比较有名的autoprefixer，cssnano，px2rem，cssnext...和其他好玩的配置插件，不过这些说明这里不做介绍，只介绍postcss-px-to-vi使用npmwithewport和vw：npmi-Spostcss-px-to-viewport打开.postcssrc，假设视觉设计稿的宽度为750px，重写配置如下：//..."plugins":{"postcss-px-to-viewport":true},"rule":{"postcss-px-to-viewport":{"viewportWidth":750,"viewportHeight":1334,"unitPrecision":5,"viewportUnit":"vw","selectorBlackList":[],"minPixelValue":1,"mediaQuery":false}}//...配置完成后直接在项目中使用px，会自动转换建造时到大众单位。不太酷是的；postcss-px-to-viewport配置项说明"viewportWidth"//设置视觉设计稿的宽度"viewportHeight"//设置视觉设计稿的高度"unitPrecision"://单位的精度，即,保留多少位小数"viewportUnit"://转换单位"selectorBlackList"://需要忽略的选择器"minPixelValue"://最小像素值"mediaQuery"://是否允许媒体查询是否转换为px。vw的兼容性好像还不行，可能需要做降级处理。您需要使用CSSHoudini和CSSPolyfill对vw单元进行降级处理；与marginpx混合时，vw可能会超过100vw。目前使用padding代替margin重新配置上面的box-sizing可以解决，也可以使用css的calc()函数做一次计算；转换时仍有少许像素差异，无法完全还原；不需要加rem计算的设备在sublime上，有个插件cssrem可以让你手写px然后sublime会自动转换如果你成为rem，你可能会爱上css。配置说明如下：px_to_rem//px与rem的单位比例，默认为40，基本定义为视觉设计稿的宽度/10；max_rem_fraction_length//px到rem长度的最大小数部分，默认为6；available_file_types//为此插件启用文件类型。默认是：[.css],".less",".sass"];综上所述，这里总结的三种适配方案都是我自己用的。如果说用得最多的应该是第一个，因为发现的时间比较早，自然用的比较多；当然还有很多不为人知的方案，但所有的适配方案都是为了完美还原视觉设计稿，完美解决兼容性问题。当然，这些都是理想状态；感谢@白白的帮助（名词解析）+鼓励（提醒）感谢@w3cplus，@头头发展博客，感谢你们的四篇文章，给了我很大的启发，下面说说移动端页面的适配和使用灵活实现手机购物H5页面终端适配
