手机网页自适应 rem px 方案

最新推荐文章于 2023-12-11 17:12:22 发布

tongwei0071

最新推荐文章于 2023-12-11 17:12:22 发布

阅读量479

点赞数

分类专栏：手机网页 css2 & css3 微信

本文链接：https://blog.csdn.net/tongwei0071/article/details/109484922

版权

css2 & css3 同时被 3 个专栏收录

2 篇文章 0 订阅

订阅专栏

微信

2 篇文章 0 订阅

订阅专栏

手机网页

1 篇文章 0 订阅

订阅专栏

手机网页自适应 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 下调试。

tongwei0071

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
手机网页自适应 rem px 方案

手机网页自适应 rem 与 px 转换方案：基础知识点：1、浏览器默认字体大小为 16px；2、通过手机屏幕的宽度和网页最大宽度的换算比例，设置html 的font-size；3、css 中统一使用 rem 单位来表示。关键 rem.js代码（让 100px = 1rem ，这样就十分容易换算，比如10px = 0.1rem；1px = 0.01rem；20px=0.2rem 以此类推）：function setRemPx(pwidth,prem){ var oWid
复制链接

扫一扫