今天来讲vue如何适配移动端？我的项目采用的是Mint-ui框架，目前更受欢迎的适配的两大方法分别为：rem布局和淘宝出的 lib-flexible 插件。项目中我采用的是rem布局，所以我会主要讲解rem布局的过程，淘宝的lib-flexible 插件，大家有兴趣的话，可以自行去学习了解。
rem布局原理：
rem是根据html的font-size大小来变化，正是基于这个出发，我们可以在每一个设备下根据设备的宽度设置对应的html字号，从而实现了自适应布局。
一、rem布局如下：
- 在目录结构中的 index.html 文件中的<head>标签内添加上如下js代码：
<script>
(function (doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
if (clientWidth >= 750) { //750是宽度，是根据UI设计稿来填写的
docEl.style.fontSize = '100px';
} else {
docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
}
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
</script>
- 在build/webpack.base.conf.js 里面的module.exports 里的 module 里添加下面这段配置：
{
test: /\.less$/,
use: [
"style-loader",
"css-loader",
"less-loader"
]
}
-
以上配置完成后，我们的可以写个简单的demo来测试下rem布局是否有生效：
image.png
-
rem布局完成后，接下来就是页面的具体页面布局了。
-
布局过程中遇到的一些小问题，避免以后踩坑：
5.1 如何让图片与div并非并垂直水平居中？=》采用flex布局就可以实现效果了。
image.png
.index_logo{
display: flex;justify-content: center;align-items: center;
}
5.2 轮播图这里引入图片时，图片并没有显示出来，打开F12控制台发现图片的确引入进来了，经过查找后发现是没有给高度造成的图片不能正常显示出来。
image.png
image.png
<div class="goods_swipe">
<mt-swipe :auto="0" class="solve_swipe"> //这里绑定一个class
<mt-swipe-item>
<img src="../assets/mobile/mobile_solve_one.png">
</mt-swipe-item>
<mt-swipe-item>
<img src="../assets/mobile/mobile_solve_two.png">
</mt-swipe-item>
<mt-swipe-item>
<img src="../assets/mobile/mobile_solve_three.png">
</mt-swipe-item>
<mt-swipe-item>
<img src="../assets/mobile/mobile_solve_four.png">
</mt-swipe-item>
</mt-swipe>
</div>
.solve_swipe{
height: 500px;margin-top: 20px
}
如何更改mint ui 轮播图小圆点的默认样式？我有专门写过一篇《如何修改mint-ui组件默认 轮播图小圆点颜色》，大家有兴趣的可以去看。
5.3 当写好一个标题或是一行文字，再引入一张图片后发现两者中间距离相隔很远，并不像平时引入图片后两者的位置距离正好，或是微调就达到预期的效果。
奇怪的是，在完成图片与文字的布局后，发现这两者的中间莫名的多出了一段空白，在F12控制台中查看这两者又是单独分开的，但在点击整个div时，空白就显示出来并能明显看出来了。为了调这个效果，尝试了用padding、margin、给div和img单独再加一层div、修改字体的大小等方法，然鹅并没有得到解决。这时联想到做pc端时，一个div中包含一个p标签，里面有一行文字，就算你不给div宽高度，但文字的大小就可以撑起整个div的宽高度，突然间我想到这里有可能是这个原因造成的。于是我重新查看了当前的代码，并没有给宽高度，我再次去F12控制台中查找原因，最后我在样式栏最下面发现了Style Attribute 这个选项，我试着去掉勾后，惊喜的一幕出现了，那就是效果如愿的出现并实现了。但是效果是出现了，但和它样式相同的上下样式被影响污染了，这时我给相同的样式加上相应的高度替换rem布局默认高度后，样式效果就完美解决了。
其实，Style Attribute这个选项和html根部的font-size大小是一样的，会随着它的变动而变动。
image.png
image.png
<div>
<div class="solve_title">解决方案</div>
<img src="../assets/mobile/mobile_icon_fg.png">
</div>
.solve_title{ //这是加上高度后就解决了问题
height: 1px;font-size:20px;font-weight:bold;color:rgba(0,51,85,1);padding: 40px 0 0 0;
font-family:PingFang-SC-Bold;
}
通过这次使用mint ui框架，发现框架有些默认的样式会影响后续的页面布局。
所以，在开发过程中最好是都给定高度，避免出现这样那样的问题。
网友评论