摘要：适配方案简单解析相对于根元素的的大小来计算坐作为一个单位是根据手淘团队，比较，改写的一个插件，兼容竖屏转横屏出现的，自定义视觉设计稿的宽度，设定最大宽度这里有的地址，下载下来用即可第一个参数是视觉设计稿的宽度，一般视觉设计稿有，可
rem + simple-flexible 适配方案 简单解析
rem 相对于根元素 的 font-size 的大小来计算坐作为一个单位；
simple-flexible 是根据手淘团队 lib-flexible.js，比较，改写的一个插件，兼容 UC 竖屏转横屏出现的 BUG，自定义视觉设计稿的宽度：designWidth，设定最大宽度：maxWidth
这里有 simple-flexible 的 Github 地址，下载下来用即可;
第一个参数是视觉设计稿的宽度，一般视觉设计稿有 750px，可以根据实际调整
第二个参数则是设置制作稿的最大宽度，超过 750px，则以 750px 为最大限制；
使用时候的换算比例，是 1：100， 即 1rem = 100px；
使用步骤复制 simple-flexible 的 flexible.min.js 或 flexible.js 代码到页面的 的
也可以使用模块化方式
Npm:
npm i -S amfe-flexible
JS:
import "amfe-flexible" /* do something */优劣
在 UC 浏览器上发现了，横批竖屏转换不过来的情况，已经找到兼容方案，是通过js在页面的 里生成定义了 元素 font-size 的 style 元素来解决！
而且官方也说明这个是 vw 的过度方案，不建议长期使用；
PostCSS + VW 适配方案 简单解析PostCSS 将 CSS 变成 JavaScript 的数据，使它变成可操作;
VW 是基于 Viewpost 视窗的长度单位;
Viewpost 是指浏览器可视化的区域，而可视化区域即是 window.innerWidth/window.innerHeight 的大小;
与 Viewpost 相关的单位有以下四个
vw : 是 Viewport width 的简写 1vw = window.innerWidth的 1%；
vh : 是 Viewport height 的简写 1vw = window.innerHeight 1%；
vmin : vw 和 vh 之间的较小值
vmax : vw 和 vh 之间的较大值
使用步骤假设视觉设计稿的宽度是 750px 即 1vw = 7.5px，那么就得根据设计图的 px 值来转换 vw单位，为了避免这样的计算，当然就需要使用到 PostCSS ，以及 postcss-px-to-viewport 一个 PostCSS 的插件
本方案使用打包工具构建项目的时候使用是最酸爽的，建议在以下环境下尝试；
parceljs
webpack
有过使用前端脚手架的童鞋，应该都有看到过项目根目录下面都会有一个 .postcssrc 文件，它里面都是一些配置选项比较著名的 autoprefixer，cssnano，px2rem，cssnext...等等好玩的配置插件，但是这里不作这些说明，只介绍 postcss-px-to-viewport 配合 vw 使用
Npm：
npm i -S postcss-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 ，构建的时候就会自动转换为 vw 单位了，简直不要太爽了；
postcss-px-to-viewport 配置项说明
"viewportWidth" //设置视觉设计稿的宽度 "viewportHeight" //设置视觉设计稿的高度 "unitPrecision": //单位的精度，即保留多少位小数 "viewportUnit": //转换的单位 "selectorBlackList": //需要忽略的选择器 "minPixelValue": //最小像素值 "mediaQuery": //是否允许媒体查询转换为 px优劣
vw 的兼容性貌似还没那么好，有可能需要做降级处理，需要使用到 CSS Houdini 和 CSS Polyfill 上一些针对 vw 单位做一个降级处理；
vw 在混合使用到 margin 的 px 时候 有可能超出 100vw ，目前使用 padding 来代替 marging 再配置上 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，@前端开发博客，
感谢两位的四篇文章，给我带来的启发
再聊移动端页面的适配
使用Flexible实现手淘H5页面的终端适配
rem自适应布局
rem自适应js
原文链接 愈发熟练的CSS 技巧
原文博客 时之物语 欢迎来玩哦~
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/113393.html
摘要：适配方案简单解析相对于根元素的的大小来计算坐作为一个单位是根据手淘团队，比较，改写的一个插件，兼容竖屏转横屏出现的，自定义视觉设计稿的宽度，设定最大宽度这里有的地址，下载下来用即可第一个参数是视觉设计稿的宽度，一般视觉设计稿有，可 showImg(https://segmentfault.com/img/bVbbjpG?w=1366&h=660); rem + simple-flexi...
摘要：学编程真的不是一件容易的事不管你多喜欢或是多会编程，在学习和解决问题上总会碰到障碍。熟练掌握核心内容，特别是和多线程初步具备面向对象设计和编程的能力掌握基本的优化策略。 学Java编程真的不是一件容易的事,不管你多喜欢或是多会Java编程，在学习和解决问题上总会碰到障碍。工作的时间越久就越能明白这个道理。不过这倒是一个让人进步的机会，因为你要一直不断的学习才能很好的解决你面前的难题...
摘要：输入的时候少按一个键浏览器兼容问题比如使用的选择器命名，在是无效的能良好区分变量命名变量命名是用不要纯数字中文等命名，尽量使用英文字母来表示。选择器和类选择器最大的不同在于使用次数上。当需要设置英文字体时，英文字体名必须位于中文字体名之前。 回顾上一节HTML 思维导图 showImg(https://segmentfault.com/img/bVbno3O?w=1378&h=1178...
阅读 1370·2023-04-25 16:45
阅读 1916·2021-11-17 09:33
阅读 2305·2021-09-27 14:04
阅读 913·2019-08-30 15:44
阅读 2632·2019-08-30 14:24
阅读 3411·2019-08-30 13:59
阅读 1689·2019-08-29 17:00
阅读 886·2019-08-29 15:33
