主要介绍了vue移动端自适应,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习 价值,需要的朋友们一起来学习学习吧
方案一:直接引入js (自己 写的动态改变fontsize的js)
function htRem () {
var ww = document.documentElement.clientWidth;
if (ww > 750) {
ww = 750;
}
document.documentElement.style.fontSize = ww / 7.5 + "px";
}
htRem();
window.onresize = function () {
htRem();
};
在main.js中import引入即可
方案二:使用插件
- 安装依赖
cnpm install lib-flexible postcss-pxtorem --save-dev
//或
npm install lib-flexible --save
npm install postcss postcss-pxtorem --save-dev
main.js
导入
// 移动端适配
import ‘lib-flexible/flexible’;
- 创建.
postcssrc.js
并配置
// https://github.com/michael-ciniawsky/postcss-load-config
module.exports = {
plugins: {
autoprefixer: {
overrideBrowserslist: ['Android 4.1', 'iOS 7.1', 'Chrome > 31', 'ff > 31', 'ie >= 8']
},
'postcss-pxtorem': {
rootValue({ file }) {
return file.indexOf('vant') !== -1 ? 37.5 : 75;
},//这样当遇到vant组件,rootValue值为37.5,而其他我们自己的样式文件rootValue值为75
propList: ['*']
}
}
}
- 按照上面的步骤写完后,使用时设计图750px的,那设计图要是300px的宽度,那代码里面写成300px。这样就可以了
- postcss-pxtorem切换版本
当进行项目启动,会发现报错,查了原因可能是版本不匹配。
所以切换postcss-pxtorem的版本
npm i postcss-pxtorem@5.1.1 --save-dev
注意
-
不使用行内样式
对于行内样式,阿里手淘并不能将px转rem,所以对于需要自适应的样式,如font-size、width、height等请不要写在行内。同理,对于不需要转化的样式可以写在行内,或者使用PX(大写)作为单位。 -
字号不使用rem
我们都知道chrome的最小显示的字体是12px,如果字体用rem,计算出来小于12px,那么就也会以12px显示,而且我们不希望出现13px或者15px这样的奇葩尺寸,所以字体最好是用PX(大写)来表示,至于适应,我们可以写媒体查询
.item {
border-bottom: 1PX #8d8d8d dashed;
font-size: 12PX;
line-height: 16PX;
@media screen and (min-width: 576PX) {
font-size: 14PX;
line-height: 18PX;
}
@media screen and (min-width: 768PX) {
font-size: 16PX;
line-height: 28PX;
}
@media screen and (min-width: 992PX) {
font-size: 16PX;
line-height: 32PX;
}
@media screen and (min-width: 1200PX) {
font-size: 18PX;
line-height: 64PX;
}
}
vm适配
- 安装依赖
npm install postcss-px-to-viewport -D
- 在根目录下新建
.postcssrc.js
文件
module.exports = {
plugins: {
autoprefixer: {
overrideBrowserslist: ['Android 4.1', 'iOS 7.1', 'Chrome > 31', 'ff > 31', 'ie >= 8']
},
'postcss-px-to-viewport': {
viewportWidth: 375, // 视窗的宽度,对应的是我们设计稿的宽度,一般是750
unitPrecision: 3, // 指定`px`转换为视窗单位值的小数位数(很多时候无法整除)
viewportUnit: 'vw', // 指定需要转换成的视窗单位,建议使用vw
selectorBlackList: ['.ignore', '.hairlines'], // 指定不转换为视窗单位的类,可以自定义,可以无限添加,建议定义一至两个通用的类名
minPixelValue: 1, // 小于或等于`1px`不转换为视窗单位,你也可以设置为你想要的值
mediaQuery: false // 允许在媒体查询中转换`px`
}
}
}
- 保存文件后我们重启项目即可
当然啦,前面的都是建立在没有进行rem的适配,如果你的项目进行了rem 的适配我们需要在做如下操作:
main.js 文件中删除如下代码
import "lib-flexible/flexible";
package.json 文件中删除如下代码
"lib-flexible": "^0.3.2",
"postcss-plugin-px2rem": "^0.8.1",
重启项目