再聊移动端页面的适配_Layout|再聊移动端页面的适配_Layout, 布局, mobile, CSS 教程_w3cplus2018-08-29
vue2.0项目中使用postcss
需要遇到的插件：
postcss-loader
postcss-loader
SugarSS（https://github.com/postcss/sugarss）
css module工程化（https://www.cnblogs.com/xiaohuochai/p/8537959.html）
autoprefixer（)
=>主要用来处理浏览器的私有前缀，这个已经是大家经常使用的一个PostCSS插件了。这里需要提出的是，如果你的项目中使用了
postcss-px-to-viewport（http://www.360doc.com/content/18/0308/15/53188426_735395418.shtml+http://www.w3cplus.com/css/vw-for-layout.html）
=>目前出视觉设计稿，我们都是使用750px宽度的，从上面的原理来看，那么100vw = 750px，即1vw = 7.5px。那么我们可以根据设计图上的px值直接转换成对应的vw值。看到这里，很多同学开始感到崩溃，又要计算，能不能简便一点，能不能再简单一点，其实是可以的，我们可以使用PostCSS的插件postcss-px-to-viewport，让我们可以直接在代码中写px，著作权归作者所有。
配置：
"postcss-px-to-viewport": {
viewportWidth: 750,
【再聊移动端页面的适配_Layout|再聊移动端页面的适配_Layout, 布局, mobile, CSS 教程_w3cplus2018-08-29】viewportHeight: 1334,
unitPrecision: 5,
viewportUnit: 'vw',
selectorBlackList: [],
minPixelValue: 1,
mediaQuery: false
}
postcss-write-svg（）
=>使用普通的border: 1px solid red;
生成的1px线是会粗一点的，这是由于retine屏幕导致的。该插件主要用来处理移动端1px的解决方案。该插件主要使用的是border-image和background配合SVG绘制的矢量图来做1px的相关处理。（https://www.w3cplus.com/css/fix-1px-for-retina.html）
配置：
"postcss-write-svg": {
utf8: false
},
别忘了，有一点千万别忘了，记得在中添加：
1.安装
npm i postcss-pxtorem
2.配置项目目录下的.postcssrc.js文件
"postcss-pxtorem": {
rootValue: 75,
unitPrecision: 5,
propList: ['*'],
selectorBlackList: [],
replace: true,
mediaQuery: false,
minPixelValue: 0
}
3.预览
原本的css代码
.helloA
display: flex
width: auto
height: 40px
padding: 0 5px
line-height: 3.46
-webkit-box-sizing: border-box
box-sizing: border-box
font-size: 16px
color: #666
运行npm run dev预览
._36SgQit0oYVhmLJ3fJBxU7_0 {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
width: auto;
height: 2.5rem;
padding: 0 0.3125rem;
line-height: 3.46;
-webkit-box-sizing: border-box;
box-sizing: border-box;
font-size: 1rem;
color: #666;
但是有一个问题：
页面元素大小不变，不是随屏幕大小而变
推荐阅读
- 移动端h5调试方法
- python|8. 文件系统——文件的删除、移动、复制过程以及链接文件
- 被催稿了，所以聊聊|被催稿了，所以聊聊 长链接在移动端开发中如何做到和短链接一样高效
- 移动端事件绑定
- 移动用户体验设计（底部导航）
- 前端页面表格控件handsontable在vue项目中的应用
- 人工智能与智能系统3->|人工智能与智能系统3-> 机器人学3 | 移动机器人平台
- 移动5G网络下，如何做好网络主播，成为百万主播（）
- 《哈尔的移动城堡》观后感
- 移动互联网创业者的三大误区