rem em vw vh 自用

最新推荐文章于 2025-02-17 20:04:18 发布

原创最新推荐文章于 2025-02-17 20:04:18 发布 · 217 阅读

1 ·

CC 4.0 BY-SA版权

本文介绍了一种结合REM单位与JavaScript实现的响应式网页布局方案，详细解释了如何根据屏幕宽度动态调整字体大小，确保不同设备上的显示效果一致。此外还探讨了EM、VW/VH等单位的应用场景及注意事项。

rem

相对于根元素的尺寸大小

vue在App.vue中设置根元素的尺寸
在其他地方应用

test元素字体宽度为36px

em

相对于父元素的尺寸大小最适合用在设置字体大小上

请添加图片描述

p标签的字体大小为20px

em设置高宽时

如果自身不存在font-size大小定义，会参照父元素的font-size大小

如果自身有font-size定义那么会参照自身font-size 的大小来设置高宽

vw vh

rem方案 */
// 设计1rem为设计稿宽度的1/100
html {fons-size: width / 100}
p {width: 15.625rem}
/* vw方案 */
p {width: 15.625vw}

vw : 视口宽度的 1/100；
vh : 视口高度的 1/100 ;

rem 和vw vh结合

vw还可以和rem方案结合，这样计算html字体大小就不需要用js了

html {fons-size: 1vw} /* 1vw = width / 100 */
p {width: 15.625rem}

宽度过大处理

如果用户在PC端浏览，页面过宽怎么办？一般我们都会设置一个最大宽度，大于这个宽度的话页面居中，两边留白

var clientWidth = document.documentElement.clientWidth;
clientWidth = clientWidth < 780 ? clientWidth : 780;
document.documentElement.style.fontSize = clientWidth / 100 + 'px';

设置body的宽度为100rem，并水平居中
```
body { margin: auto; width: 100rem } 
```

rem+js+em

通过上面可以得出最好的弹性布局方案是，rem+js方案，同时还要解决noscript问题，解决字体问题，解决屏幕过宽问题

但是上面的方案还有个问题，就是分成100份的话，假设屏幕宽度320，此时html大小是3.2px，但浏览器支持最小字体大小是12px，怎么办？那就分成10份呗，只要把上面的100都换成10就好了

rem 设置宽度
em 设置字体
js 检测并设置总宽度

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布局</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部分

// document.documentElement是指整个html对象
var documentElement = document.documentElement;
function callback() {
    var clientWidth = documentElement.clientWidth;
    // 屏幕宽度大于780，不在放大
    clientWidth = clientWidth < 780 ? clientWidth : 780;
    documentElement.style.fontSize = clientWidth / 10 + 'px';
}
//  当初始的 HTML 文档被完全加载和解析完成之后,DOMContentLoaded 事件被触发,而无需等待样式表、图像和子框架的完全加载。
document.addEventListener('DOMContentLoaded', callback);
// orientationchange事件在设备的纵横方向改变时触发 手持设备方向改变时执行
window.addEventListener('orientationchange' in window ? 'orientationchange' : 'resize', callback);