rem布局

学习笔记 专栏收录该内容
10 篇文章 0 订阅

<!-- 

    rem --r root,em 相对单位,相对于HTML的字体大小单位,可以用于任何设定长度的单位。

    可以始终让1rem = 100px

   -->

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Document</title>

  <style>

    *{

      margin: 0;

    }

    .d1{

      background-color: skyblue;

      width: 5rem;

      height: 5rem;

    }

  </style>

</head>

<body>

  <div class="d1"></div>  

   <script>

//动态获取浏览器窗口的宽度,假设设计稿为1000px,设置1rem = 1000px/10=100px,

//则页面1rem = html字体大小 = 浏览器窗口宽度/10

     function remFont() {

       let screenWidth = window.innerWidth

      //  假设设计稿1000px占满屏幕

       let danwei = screenWidth/10

       let html = document.querySelector('html')

       html.style.fontSize = danwei + 'px'

     }

    //  当屏幕的宽度发生改变

     window.onresize = function() {

        remFont()

     }

  //页面刚加载时进行初始化

     window.onload = function () {

      remFont()

     }

   </script>

</body>

</html>

 

rem响应式的布局思想:

  • 一般不要给元素设置具体的宽度,但是对于一些小图标可以设定具体宽度值
  • 高度值可以设置固定值,设计稿有多大,我们就严格有多大
  • 所有设置的固定值都用rem做单位(首先在HTML总设置一个基准值:pxrem的对应比例,然后在效果图上获取px值,布局的时候转化为rem值)
  • js获取真实屏幕的宽度,让其除以设计稿的宽度,算出比例,把之前的基准值按照比例进行重新的设定,这样项目就可以在移动端自适应了

----(作者:八叉树 链接:https://juejin.im/post/5caaa230e51d452b672f9703 来源:掘金)

  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 打赏
    打赏
  • 扫一扫,分享海报

©️2022 CSDN 皮肤主题:深蓝海洋 设计师:CSDN官方博客 返回首页

打赏作者

Glory of the king

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值