移动端rem匹配

最新推荐文章于 2021-06-02 15:28:58 发布

wyw223

最新推荐文章于 2021-06-02 15:28:58 发布

阅读量122

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/wyw223/article/details/84312565

版权

vue 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

Rem是相对于根元素font-size大小的单位

记inphone5屏幕宽度是 320px font-size16px 1rem=16px

<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>smiledemo</title>
    <style>
       .test{
         width: 20rem;
         height: 10rem;
         background-color:bisque;
         text-align: center;
       }
       .hello{
         color: red;
         font-size: 1rem;
       }
    </style>
  </head>
  <body>
    <div id="app"></div>
    <div class="test">
       <p class="hello" >hello wangyawei</p>
    </div>
  </body>
</html>

在这里插入图片描述
于是我们在js中写适配方案3行代码即可搞定

<script>
     let htmlwidth=document.documentElement.clientWidth||document.body.clientWidth;
     console.log(htmlwidth);
     let htmlDom=document.getElementsByTagName("html")[0];
     //以imphone5的屏幕作为适配 320/16=20
     htmlDom.style.fontSize=htmlwidth/20+"px";
  </script>

在这里插入图片描述

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

wyw223

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
移动端rem匹配

Rem是相对于根元素font-size大小的单位记inphone5屏幕宽度是 320px font-size16px 1rem=16px&lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;meta name="viewport" content="width=device-width,initial-scal...
复制链接

扫一扫