移动端布局方案总结&&原理分析阿里柔性布局-1.x版该布局于2017年8月9日被2.0版替换，实现原理假设（UI稿750px宽)settingThescaleofviewport=1/window.devicePixelRatio把屏幕分成10份，font-size=实际屏幕宽度/10；开发时直接填入（设计稿DOM宽度）px并使用px2rem插件转换为->实际rem阿里柔性布局-版本2.xflexible2.x：https://github.com/amfe/lib-f...实现原理使用viewport的idealviewport，去掉1.x版本的scalescaling，其余仍然和1.x版本一样网易布局我很喜欢的布局方案的原理假设(UIdraft750pxwide)如低版本浏览器：UIdraftusesfont-size=100px;作为参考，totalwidth=7.5remdesigndraftDOM对应px/100=actualrem（计算出来很方便）其他屏幕根据屏幕宽度的百分比缩放font-size的值。对于高版本浏览器：1px/750px≈0.1333333%根据低版本逻辑：font-size=0.1333333%*100=13.33333vwwebpackpluginpostcss-px-to-viewport，顾名思义，将px转换为vw，vh,vmin,vmax{viewportWidth:750,viewportHeight:1334,unitPrecision:3,viewportUnit:'vw',selectorBlackList:['.ignore','.hairlines'],minPixelValue:1,mediaQuery:false}完文章分享是同步于：https://github.com/zhongmeizh...返回首页
