最近一个人维护前端的所有的项目,也在新开的项目里面加入了移动端适配,记录一下.下次我要闭着眼睛赋值粘贴，哈哈哈哈哈哈哈哈, 这个我们用了快2年，所以稳稳的！
目前vue-cli版本为Vue Cli 4.5.0
1.安装包
npm i postcss-aspect-ratio-mini postcss-px-to-viewport
postcss-write-svg postcss-cssnext postcss-viewport-units cssnano cssnano-preset-advanced --save
或者直接在package.json里面加入:
"dependencies": {
"cssnano": "^4.1.11",
"postcss-aspect-ratio-mini": "^1.1.0",
"postcss-cssnext": "^3.1.1",
"postcss-import": "^12.0.1",
"postcss-px-to-viewport": "^1.1.1",
"postcss-url": "^8.0.0",
"postcss-viewport-units": "^0.1.6",
"postcss-write-svg": "^3.0.1",
},
"devDependencies": {
"cssnano-preset-advanced": "^4.0.7",
},
然后npm install
因为我安装的时候,确实会遇到版本问题,如果有问题,复制我package.json里面的版本号,谢谢~
2.在项目src同层建立vue.config.js文件(vue cli4开始要手动加入)
module.exports = {
plugins: {
'postcss-import': {},
'postcss-url': {},
'postcss-aspect-ratio-mini': {},
'postcss-write-svg': {
utf8: false
},
'postcss-cssnext': {},
'postcss-px-to-viewport': {
viewportWidth: 750, // 设计稿的尺寸
viewportHeight: 1334, // 设计稿高度。不用vh单位，可以不指定。
unitPrecision: 3, // 指定`px`转换为视窗单位值的小数位数（很多时候无法整除）
viewportUnit: 'vw', // 指定需要转换成的视窗单位，建议使用vw
selectorBlackList: ['.ignore', '.hairlines'], // 指定不转换为视窗单位的类，可以自定义，
//无限添加,建议定义一至两个通用的类名
minPixelValue: 1, // 小于或等于`1px`不转换为视窗单位，你也可以设置为你想要的值
mediaQuery: false // 允许在媒体查询中转换`px`
},
'postcss-viewport-units': {},
'cssnano': {
preset: 'advanced',
autoprefixer: false,
'postcss-zindex': false
},
}
}
如果是Nuxt.js项目,写入到nuxt.config.js的build
build: {
postcss: {
// 添加插件名称作为键，参数作为值
// 使用npm或yarn安装它们
plugins: {
"postcss-import": {},
"postcss-url": {},
"postcss-aspect-ratio-mini": {},
"postcss-write-svg": {
"utf8": false,
},
"postcss-cssnext": {},
"postcss-px-to-viewport": {
"viewportWidth": 750, // 设计稿的尺寸
"viewportHeight": 1334, // 设计稿高度。不用vh单位，可以不指定。
"unitPrecision": 3, // 指定`px`转换为视窗单位值的小数位数（很多时候无法整除）
"viewportUnit": "vw", // 指定需要转换成的视窗单位，建议使用vw
"selectorBlackList": [".ignore", ".hairlines"], // 指定不转换为视窗单位的类，可以自定义，可以无限添加,建议定义一至两个通用的类名
"minPixelValue": 1, // 小于或等于`1px`不转换为视窗单位，你也可以设置为你想要的值
"mediaQuery": true, // 允许在媒体查询中转换`px`
},
'postcss-viewport-units': {},
"cssnano": {
"preset": "advanced",
"autoprefixer": false,
"postcss-zindex": false,
},
},
preset: {
// 更改postcss-preset-env 设置
autoprefixer: {
grid: true,
},
},
},
}
3.在public/index.html中写入(写在下面就行)
<script src="//g.alicdn.com/fdilab/lib3rd/viewport-units-buggyfill/0.6.2/??
viewport-units-buggyfill.hacks.min.js,viewport-units-buggyfill.min.js"></script>
<script>
window.webVer = '1.0.3'
window.onload = function () {
window.viewportUnitsBuggyfill.init({
hacks: window.viewportUnitsBuggyfillHacks
})
}
</script>
4.样式初始化
建立文件src/assets/styles/index.scss
/*
html5doctor.com Reset Stylesheet
v1.4.1
2010-03-01
Author: Richard Clark - http://richclarkdesign.com
*/
html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
summary,
time,
mark,
audio,
video {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
text-decoration: none;
-webkit-touch-callout: none;
-webkit-tap-highlight-color: transparent;
}
body {
line-height: 1;
}
:focus {
outline: 1;
}
article,
aside,
canvas,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
summary {
display: block;
}
nav ul {
list-style: none;
}
blockquote,
q {
quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
content: '';
content: none;
}
a {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
text-decoration: none;
}
ins {
background-color: #ff9;
color: #000;
text-decoration: none;
}
mark {
background-color: #ff9;
color: #000;
font-style: italic;
font-weight: bold;
}
del {
text-decoration: line-through;
}
abbr[title],
dfn[title] {
border-bottom: 1px dotted #000;
cursor: help;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #cccccc;
margin: 1em 0;
padding: 0;
}
input,
select {
vertical-align: middle;
}
input,
textarea,
button {
padding:0;
border: none;
outline: none;
background-color: transparent;
-webkit-appearance: none;
-webkit-tap-highlight-color: transparent;
}
li {
list-style: none
}
a,
input {
-webkit-tap-highlight-color: rgba(255, 0, 0, 0);
}
em,i{
font-style: normal;
}
/* Viewport Units Buggyfill还提供了其他的功能。详细的这里不阐述了。
但是content也会引起一定的副作用。比如img和伪元素::before(:before)或::after（:after）。
在img中content会引起部分浏览器下，图片不会显示。需要全局添加这个样式。 */
img {
content: normal !important;
}
main.js中引入:
import '@/assets/styles/reset.css'
在浏览器测试的时候,给样式加上一个大于16px的样式再测，效果明显一点，不是不生效！！！！
5.如何使用
这个是按照750px的手机宽度尺寸,设计图的宽度也就是750px，平时设计图量出来多少px，就写多少px，不用任何转换~
其实这个还有个小问题: 那就是style里面的px没法去做适配,但是style这种写法,本应该去避免这么写的,所以不会太影响！
6.参考
如何在Vue项目中使用vw实现移动端适配(转)
HTML5 Reset Stylesheet
推荐(我写的):
移动端适配rem/vw,vh原理(详细)
