移动端布局方案

移动端布局方案

前提

0. 移动端上的设计和适配 (opens new window)
1. 走向视网膜(Retina)的Web时代 (opens new window) 付款码：451082
2. CSS实现长宽比的几种方案 (opens new window) 付款码：137642

方案一 淘宝的flexbile

参考：

1. 2015 - 付费 使用Flexible实现手淘H5页面的终端适配 (opens new window) 付费码：980951
2. 2015 - 免费 使用Flexible实现手淘H5页面的终端适配 (opens new window)
3. 2015 - 免费 使用Flexible实现手淘H5页面的终端适配 (opens new window)

原理： V1 根据dpr的值来修改viewport的scale实现1px的线，未设置width=device-width 根据dpr的值来修改html的font-size，从而使用rem实现等比缩放 使用Hack手段用rem模拟vw特性

问题iframe

V2 全局设置width=device-width 根据dpr的值来修改html的font-size，从而使用rem实现等比缩放

方案二 VW

1. 2017-再聊移动端页面的适配 (opens new window) 付款码: 203853
2. 如何在Vue项目中使用vw实现移动端适配 (opens new window) 付款码: 700803

使用vw替代rem

总结:

1. 使用vw来实现页面的适配，并且通过PostCSS的插件postcss-px-to-viewport把px转换成vw。
2. 为了更好的实现长宽比，特别是针对于img、vedio和iframe元素，通过PostCSS插件postcss-aspect-ratio-mini来实现，在实际使用中，只需要把对应的宽和高写进去即可 (使用padding设置容器高度)
3. 为了解决1px的问题，使用PostCSS插件postcss-write-svg,自动生成border-image或者background-image的图片

其他

1. 2018-10 手淘Web页面Bar和纵向适配的设计 (opens new window) 付款码: 330951