移动端页面开发学习笔记

基本思路

参考链接：再聊移动端页面的适配

总结出来就是：

• 使用vw来实现页面的适配，并且通过PostCSS的插件postcss-px-to-viewport把px转换成vw。这样我们可以直接使用px单位，插件帮我们自动转换。
• 为了跟好的实现长宽比，特别是针对于img/vedio/iframe元素，通过PostCSS插件postcss-aspect-ratio-mini来实现，在实际使用中，只需要把对应的宽高写进去即可。
• 为了解决1px问题,使用PostCSS插件postcss-write-svg,自动生成border-image或者background-image的图片。

*可以使用vw的地方*：

• 容器适配
• 文本适配
• 大于1px的边框、圆角、阴影
• 内距和外距

插件的使用

postcss-px-to-viewport

yarn add postcss-px-to-viewport

配置如下：webpack+vue(vue-cli)

postcss: [
    require('postcss-px-to-viewport')({
        viewportWidth: 375, //px 可以直接设置为设计稿的宽度，然后开发中就可以直接使用px做单位。
        viewportHeight: 667, //高
        unitPrecision: 5, //精度
        viewportUnit: 'vw',
        selectorBlackList: [],
        minPixelValue: 1,
        mediaQuery: false
    })
]