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单位
电脑端
手机浏览器
微信内置浏览器
手机谷歌浏览器