写给自己看的vue中移动端适配

1. 创建一个vue项目

vue create demo

2. 安装normolize.css进行初始化

npm install normalize.css

在main.js引入

import ‘normalize.css/normalize.css’

3. 安装lib-flexible

npm install lib-flexible --save

(1) 在main.js引入

import ‘lib-flexible’

(2) 注释掉html文件的head中的 meta name="viewport"标签

4. 禁止微信内置浏览器调整字体大小

(1) 将下面的代码搞成一个js文件，并且在main.js引入

(function() {
           if (typeof WeixinJSBridge == "object" && typeof WeixinJSBridge.invoke == "function") {
               handleFontSize();
           } else {
               if (document.addEventListener) {
                   document.addEventListener("WeixinJSBridgeReady", handleFontSize, false);
               } else if (document.attachEvent) {
                   document.attachEvent("WeixinJSBridgeReady", handleFontSize);
                   document.attachEvent("onWeixinJSBridgeReady", handleFontSize);  }
           }
           function handleFontSize() {
               // 设置网页字体为默认大小
               WeixinJSBridge.invoke('setFontSizeCallback', { 'fontSize' : 0 });
               // 重写设置网页字体大小的事件
               WeixinJSBridge.on('menu:setfont', function() {
                   WeixinJSBridge.invoke('setFontSizeCallback', { 'fontSize' : 0 });
               });
           }
       })();

(2) 在App.vue使用该样式，或者搞成一个css文件在main.js引用

body { /* IOS禁止微信调整字体大小 */
   -webkit-text-size-adjust: 100% !important;
   text-size-adjust: 100% !important;
   -moz-text-size-adjust: 100% !important;
}

5. 下面代码参考哔哩哔哩up主 pink老师的视频

/* 为了覆盖normalize的margin: 0样式  */
/*添加html提高权重*/
html body {
  min-width: 320px;
  max-width: 750px;
  /* flexible 默认给我们划分了 10 等份 */
  width: 10rem;
  margin: 0 auto;
  background-color: #999;
  /* IOS禁止微信调整字体大小 */
  -webkit-text-size-adjust: 100% !important;
  text-size-adjust: 100% !important;
  -moz-text-size-adjust: 100% !important;
}
/* 这个插件默认的html文字大小 cssroot  16px */
/* 如果我们的屏幕超过了 750px  那么我们就按照 750设计稿来走 不会让我们页面超过750px */
@media screen and (min-width: 750px) {
  html {
    font-size: 75px !important;
  }
}

6. 在vscode安装并且使用cssrem

根据设计给的设计稿进行 px单位换算成rem单位

电脑端

手机浏览器
微信内置浏览器

手机谷歌浏览器

例子： 附上github链接