JavaScript-rem布局

最新推荐文章于 2024-05-12 06:39:48 发布

可可鸭~

最新推荐文章于 2024-05-12 06:39:48 发布

阅读量941

点赞数

分类专栏： JavaScript学习文章标签： html5 html css3 javascript

本文链接：https://blog.csdn.net/qq_43547255/article/details/121500858

版权

JavaScript学习专栏收录该内容

26 篇文章 4 订阅

订阅专栏

JavaScript-rem布局

一、什么是Rem

rem和em很容易混淆，其实两个都是css的单位，并且也都是相对单位，现有的em，css3才引入的rem，在介绍rem之前，我们先来了解下em:

em作为font-size的单位时，其代表父元素的字体大小，em作为其他属性单位时，代表自身字体大小——MDN

em可以让我们的页面更灵活，更健壮，比起到处写死的px值，em似乎更有张力，改动父元素的字体大小，子元素会等比例变化，这一变化似乎预示了无限可能,有些人提出用em来做弹性布局页面，但其复杂的计算让人诟病，甚至有人专门做了个px和em的计算器，不同节点像素值对应的em值。

在这里插入图片描述

二、举例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
      .d1 {
        width: 5rem;
        height: 5rem;
        background-color: pink;
      }
    </style>
  </head>

  <body>
    <div class="d1"></div>
    <script>
      /* Rem布局 
        同比例的窗口放大和缩小
        1.设计师设计的设计稿 1000px
        2.因为设备不同，或者浏览器分辨率不同需要在不同的分辨率下打开
        3.屏幕大小是1000px  1000px 1rem == 100px(设计稿的),10rem就会刚刚好占满整个屏幕的宽度
        4.屏幕大小是500px     1rem大小等于50px  保证10rem
        5.如果750就设计为screenWidth/7.5
        */
      window.onresize = function() {
        setRem();
      };
      function setRem() {
        var screenWidth = window.innerWidth;
        var danwei = screenWidth / 10;
        var html = document.querySelector("html");
        html.style.fontSize = danwei + "px";
      }
      setRem();
    </script>
  </body>
</html>

在这里插入图片描述

可可鸭~

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
JavaScript-rem布局

JavaScript-rem布局一、什么是Remrem和em很容易混淆，其实两个都是css的单位，并且也都是相对单位，现有的em，css3才引入的rem，在介绍rem之前，我们先来了解下em:em作为font-size的单位时，其代表父元素的字体大小，em作为其他属性单位时，代表自身字体大小——MDNem可以让我们的页面更灵活，更健壮，比起到处写死的px值，em似乎更有张力，改动父元素的字体大小，子元素会等比例变化，这一变化似乎预示了无限可能,有些人提出用em来做弹性布局页面，但其复杂的计算让人诟病
复制链接

扫一扫