rem自适应布局适合用于pc端

转载

网络安全侠 2024-10-16 20:13:20

文章标签 rem自适应布局适合用于pc端 javascript css css3 html5 文章分类 机器学习人工智能

简要概述

自适应布局是指页面在不同大小的终端设备呈现时，页面的结构和样式都会根据屏幕的大小去显示适合当前屏幕大小的页面，较好地提升用户体验。
个人理解：像不同身材的人穿同一款式的衣服时有一个适合自己的型号选择，而不是穿同一件衣服，瘦小的身材人扎起来穿，胖大身材的人使劲撑着穿。

关于rem(root em)和em

em

em在css中是一种相对长度单位，类似于百分数，相对于当前元素的字体尺寸根据比例因子进行放缩。如一般字体大小默认为16px，则2em =16 X 2 =32px。

rem

rem 是根 em（root em）的缩写，rem作用于非根元素时，相对于根元素字体大小；rem作用于根元素字体大小时，相对于其初始字体大小。

为什么使用rem来自适应布局

自适应布局简单来说就是根据显示设备的不同尺寸自动变化‘盒子’的大小，使之更适应当前设备。页面的结构和样式不变，变的是页面中各个‘盒子’的尺寸大小，大小的变化参考基准就是显示屏幕的大小。
而em这种相对长度单位是相对于当前元素的字体尺寸；由于存在继承，如果当前元素没有明确设置字体大小时，每个元素将自动继承其父元素的字体大小。因此以 em 为单位会受到父元素、父元素的父元素等等的大小影响，页面的自适应将会变得繁杂和不可控。
rem与em不同，rem即根 em，只相对于根元素的字体大小，不受元素间继承的影响；使得一个页面中盒子的相对尺寸变化有了统一个基准参考，只要我们根据不同的终端设备尺寸设置了不同的HTML根标签元素字体大小，根标签元素字体大小改变，页面也会随之变化，也就完成了自适应布局。

实现方案

使用媒体查询+rem实现

实现流程大致分为两大部分：

1.首先根据设计稿，不要管适配的问题，以rem为单位进行页面实现；

确定页面html标签的font-size的值，叫rem的基准值；为方便计算，可以把fontsize设定为100px，此时1rem=100px；
量设计稿，以rem为单位进行页面实现
举例：
量出一个盒子的width是20px ，换成rem 则是0.2rem；55px，换成rem就是0.55rem（基准值设置为100px时）。
即量出来的Px单位，只需要除以基准值，就换算成为了rem单位；

2.使用媒体查询进行适配

当完成设计稿的页面实现后，可以进行下一步的适配问题。以上述设计稿750px，基准值为100px为例：

@media only screen and (width:750px) 
 {
  html{ font-size: 100px; } 
  }
 @media only screen and (width:375px) 
 { 
 html{ font-size: 50px; }
  }
 @media only screen and (width:320px)
  { 
  html{ font-size: 42.6666px; } 
  }
 @media only screen and (width:414px)
  { 
  html{ font-size: 55.2px; } 
  }
    // ....

媒体查询与（if···else···）类似，主要就是根据显示屏幕的’width’值的不同有着不同的根元素font-size值；
换算方式：
现基准值（font-size）=原基准值 X （现屏幕宽度/原屏幕宽度）；
如width为375px时,现基准值应为：100 X 375/750 =50px；

优缺点

缺点：需要对不同的设备进行逐个换算适配，操作繁杂且不易适配全面。
优点：比较灵活，可以进行不同换算方案的适配
媒体查询+rem

JS+rem来实现

方案思想

此方案与媒体查询实现方案的第一个步骤是一样的，都是首先以rem为单位，按照设计稿进行页面实现。与媒体查询适配相比，使用js进行适配更加简约：
参考代码：

<script>
        let docEle = window.document.documentElement; // 表示获取窗口

        // 此函数是计算不同屏的html标签的font-size
        function refresh(){
            // width 表示手机屏的宽度
            let width = docEle.getBoundingClientRect().width; // 一屏的宽度 
            if(width>750){  width=750 }
            let fs = width / 7.5
            document.querySelector("html").style.fontSize = fs + "px"
        }

        refresh();  

        // window叫事件源   addEventListenere用来绑定事件的
        // resize叫浏览器窗口大小改变事件  ()=>{}叫事件监听器
        window.addEventListener("resize",()=>{
            refresh()
        })
        // pageshow 页面显示出来
        window.addEventListener("pageshow",()=>{
            refresh()
        })
    </script>