rem布局

2021-08-30 本文已影响0人王果果

em单位和rem单位区别

em作为font-size的单位时，其代表父元素的字体大小，em作为其他属性单位时，代表自身字体大小——MDN , 改动父元素的字体大小，子元素会等比例变化
rem作用于非根元素时，相对于根元素字体大小；rem作用于根元素字体大小时，相对于其出初始字体大小——MDN,

/* 作用于根元素，相对于原始大小（16px），所以html的font-size为32px*/
html {font-size: 2rem}

/* 作用于非根元素，相对于根元素字体大小，所以为64px */
p {font-size: 2rem}

Rem布局原理

rem布局的本质是等比缩放，一般是基于屏幕宽度
先按定高宽设计出来页面，然后转换为rem单位,配合js查询屏幕大小来改变html的font-size,达到整个页面的缩放
rem是弹性布局的一种实现方式，弹性布局可以算作响应式布局的一种，但响应式布局不是弹性布局，弹性布局强调等比缩放，100%还原；响应式布局强调不同屏幕要有不同的显示，比如媒体查询

实际开发中的rem适配方案

rem适配方案2 简洁高效rem适配方案flexible.js

手机淘宝团队出的简洁高效移动端适配库
我们再也不需要在写不同屏幕的媒体查询，因为里面js做了处理
它的原理是把设备划分成10等份，但在不同设备下，比例还是一致的
我们要做的就是确定好我们当前设备的html 文字字体大小就可以了
比如当前设计稿是750px 那么只需要把html文字大小设置为75px （750px/10）就可以
里面页面元素rem值：页面元素的px值 / 75
剩余的，让flexible.js去计算
github地址: https://github.com/amfe/lib-flexible

rem+媒体查询+less技术

1、设计搞常见的尺寸宽度

image.png

一般情况，我们以两套大部分适应的屏幕，放弃极端屏对其优雅降级，牺牲一些效果，现在基本以750为准

2、动态设置 html 标签 font-size 大小

假设设计稿是750px
假设我们把整个屏幕划分为15等分（划分标准不一可以是20等份也可以是10等份）
每一份作为html字体大小，这里就是50px
那么在320px设备的时候，字体大小为320/15 就是21.33px
用我们页面元素的大小除以不同的 html 字体大小会发现他们比例还是相同的
比如我们以750 为标准设计稿
一个100*100像素的页面元素在 750屏幕下，就是 100 / 50转换为rem 是 2rem * 2rem 比例是1比1
320屏幕下，html字体大小就为 21.33 则2rem = 42.66px, 此时宽和高都是42.66，但是高和宽还是1比1
但是已经能实现不同屏幕下，页面元素盒子等比例缩放的效果

3、元素大小取值方法

最后的公式：页面元素的rem值 = 页面元素值（px） / (屏幕宽度 / 划分的份数)
屏幕的宽度 / 划分的份数就是 html font-size 的大小
或者：页面元素的rem值 = 页面元素值（px） / html font-size 字体大小

4、总结出得一个媒体查询的公共文件 common.less

// 定义一个公共的common.less文件  先装nodejs node -v
// npm install -g less 查看下安装成功没 lessc -v
// vscode 插件可以直接将less文件转换为css文件  （Easy-LESS）
// 设置常见的屏幕尺寸， 修改里面的html文字大小

// 一定要写最上面 
html{
  font-size: 50px;
}
// 我是定义的划分是15等份
@no: 15;
// 320
@media screen and (min-width: 320px){
  html{
    font-size: 320px / @no;
  }
}
// 360
@media screen and (min-width: 360px){
  html{
    font-size: 360px / @no;
  }
}
// 375 iphone 678
@media screen and (min-width: 384px){
  html{
    font-size: 384px / @no;
  }
}
@media screen and (min-width: 400px){
  html{
    font-size: 400px / @no;
  }
}
@media screen and (min-width: 414px){
  html{
    font-size: 414px / @no;
  }
}
@media screen and (min-width: 424px){
  html{
    font-size: 424px / @no;
  }
}
@media screen and (min-width: 480px){
  html{
    font-size: 480px / @no;
  }
}
@media screen and (min-width: 540px){
  html{
    font-size: 540px / @no;
  }
}
@media screen and (min-width: 720px){
  html{
    font-size: 720px / @no;
  }
}
@media screen and (min-width: 750px){
  html{
    font-size: 750px / @no;
  }
}

下面给一个rem+js方案的完整例子，css的计算没有使用预处理器，这个很简单

html代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    <title>rem布局——rem+js</title>
</head>
<body>
    <noscript>开启JavaScript，获得更好的体验</noscript>

    <div class="p1">
        宽度为屏幕宽度的50%，字体大小1.2em
        <div class="s1">
            字体大小1.2.em
        </div>
    </div>

    <div class="p2">
        宽度为屏幕宽度的40%，字体大小默认
        <div class="s2">
            字体大小1.2em
        </div>
    </div>
</body>
</html>

css代码如下:

html {
    font-size: 32px; /* 320/10 */
}
body {
    font-size: 16px; /* 修正字体大小 */
    /* 防止页面过宽 */
    margin: auto;
    padding: 0;
    width: 10rem;
    /* 防止页面过宽 */
    outline: 1px dashed green;
}

/* js被禁止的回退方案 */
@media screen and (min-width: 320px) {
    html {font-size: 32px}
    body {font-size: 16px;}
}
@media screen and (min-width: 481px) and (max-width:640px) {
    html {font-size: 48px}
    body {font-size: 18px;}
}
@media screen and (min-width: 641px) {
    html {font-size: 64px}
    body {font-size: 20px;}
}

noscript {
    display: block;
    border: 1px solid #d6e9c6;
    padding: 3px 5px;
    background: #dff0d8;
    color: #3c763d;
}
/* js被禁止的回退方案 */

.p1, .p2 {
    border: 1px solid red;
    margin: 10px 0;
}

.p1 {
    width: 5rem;
    height: 5rem;

    font-size: 1.2em; /* 字体使用em */
}

.s1 {
    font-size: 1.2em; /* 字体使用em */
}

.p2 {
    width: 4rem;
    height: 4rem;
}
.s2 {
    font-size: 1.2em /* 字体使用em */
}

js代码如下:

var documentElement = document.documentElement;

function callback() {
    var clientWidth = documentElement.clientWidth;
    // 屏幕宽度大于780，不在放大
    clientWidth = clientWidth < 780 ? clientWidth : 780;
    documentElement.style.fontSize = clientWidth / 10 + 'px';
}

document.addEventListener('DOMContentLoaded', callback);
window.addEventListener('orientationchange' in window ? 'orientationchange' : 'resize', callback);

源网址:https://www.xyhtml5.com/3721.html
源网址:https://www.cnblogs.com/chen-cheng/p/13969372.html

rem布局

em单位和rem单位区别

Rem布局原理

实际开发中的rem适配方案

猜你喜欢

热点阅读