手机网页自适应 rem 与 px 转换方案:
基础知识点:
1、浏览器默认字体大小为 16px;
2、通过手机屏幕的宽度 和 网页最大宽度 的换算比例,设置html 的font-size;
3、css 中统一使用 rem 单位来表示。
关键 rem.js代码(让 100px = 1rem ,这样就十分容易换算,比如10px = 0.1rem;1px = 0.01rem;20px=0.2rem 以此类推):
我的设计稿宽度是 750px,手机网页的最大宽度 750px,所以js 中是 750
function setRemPx(pwidth,prem){
var oWidth = document.body ? document.body.clientWidth : document.documentElement.clientWidth;
oWidth = oWidth > pwidth ? pwidth : oWidth;
var html = document.getElementsByTagName("html")[0];
html.style.fontSize = oWidth/pwidth*prem + "px";
}
setRemPx(750,100);
window.onresize = function(){
setRemPx(750,100);
/*640代表设计师给的设计稿的宽度,你的设计稿是多少,就写多少;
100代表换算比例,这里写100是为了以后好算,
比如,你测量的一个宽度是100px,就可以写为1rem,以及1px=0.01rem等等
*/
};
//解决安卓系统 微信中,由于微信APP字体变大后,网页错乱的问题.
(function() {
if (typeof WeixinJSBridge == "object" && typeof WeixinJSBridge.invoke == "function") {
handleFontSize();
} else {
document.addEventListener("WeixinJSBridgeReady", handleFontSize, false);
}
function handleFontSize() {
// 设置网页字体为默认大小
WeixinJSBridge.invoke('setFontSizeCallback', { 'fontSize' : 0 });
// 重写设置网页字体大小的事件
WeixinJSBridge.on('menu:setfont', function() {
WeixinJSBridge.invoke('setFontSizeCallback', { 'fontSize' : 0 });
});
}
})();
HTML 代码中引用:
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8" />
<meta name="renderer" content="webkit" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
<meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport" />
<title></title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link rel="Shortcut Icon" type="image/x-icon" href="fav.ico" />
<link rel="apple-touch-icon-precomposed" href="/apple_touch_icon144.png" />
<meta name="apple-touch-fullscreen" content="yes" />
<meta name="apple-mobile-web-app-title" content="档案" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<script src="rem.js"></script>
<link href="style.css?202011021200" type="text/css" rel="stylesheet" />
</head>
CSS中的写法:如 .3rem就相当于设计稿中的30px;.5rem = 50px,这样写css 就非常轻松。
注:-webkit-overflow-scrolling: touch;-webkit-text-size-adjust: 100% !important; 是为了解决ios端微信APP字体变大,网页字体g跟着变大破坏布局的问题。android 微信APP字体变大破坏布局的问题,已在 rem.js 中解决了。
body{max-width:750px; min-width:320px;margin:0 auto;font-size: .3rem;line-height: .5rem;color:var(--maincolor);-webkit-overflow-scrolling: touch;-webkit-text-size-adjust: 100% !important;}
.suplrpad{padding-left:.6rem !important;padding-right:.6rem !important;}
.biglrpad{padding-left:.5rem !important;padding-right:.5rem !important;}
.milrpad{padding-left:.4rem !important;padding-right:.4rem !important;}
.ltlrpad{padding-left:.2rem !important;padding-right:.2rem !important;}
.blank10px,.blank15px,.blank20px,.blank30px,.blank40px,.blank50px{clear:both;display:block;width:100%;overflow:hidden;}
.blank10px{height:.1rem;}
.blank15px{height:.15rem;}
.blank20px{height:.2rem;}
.blank30px{height:.3rem;}
.blank40px{height:.4rem;}
.blank50px{height:.5rem;}
写代码调试工具:chrome 手机模式 iphone 6/7/8 下调试。