rem em vw vh 自用

本文介绍了一种结合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);
    
    
px、emremvwvh都是CSS中用于表示长度或尺寸的单位,它们之间既有区别又存在一定联系。 ### 与固定单位px的关系 px是固定像素单位,不随其他元素的尺寸变化而变化,是一个绝对单位,常用于设置边框、固定尺寸元素等不需要响应式变化的场景。emremvwvh是相对单位,它们的值会根据不同的参考基准进行计算。 ### em与其他单位的关系 em是相对单位,相对于当前元素或父元素的字体大小。例如,若父元素字体大小为16px,设置子元素`font-size: 1.5em`,则子元素字体大小为24px(16px * 1.5)。与rem相比,em的计算是级联的,而rem总是相对于根元素;与vwvh相比,em基于字体大小,vwvh基于视口尺寸。em常用于文本相关、按钮内边距等场景[^2]。 ### rem与其他单位的关系 rem也是相对单位,相对于根元素(`<html>`)的字体大小。如果根元素字体大小为16px,设置元素`font-size: 1.5rem`,则该元素字体大小为24px(16px * 1.5)。与px相比,rem可通过改变根元素字体大小实现整体布局的缩放;与em不同,rem的基准是根元素,避免了级联计算的复杂性;与vwvh相比,rem更侧重于基于根字体大小进行布局,而vwvh直接响应视口变化。rem常用于整体布局、间距等场景[^2]。 ### vwvh与其他单位的关系 vwvh是视口单位,vw表示视口宽度的1%,vh表示视口高度的1%。例如,视口宽度为1000px,`width: 50vw`表示元素宽度为500px(1000px * 50%)。与px相比,vwvh直接响应视口变化;与emrem相比,vwvh不依赖于字体大小,而是基于视口尺寸。vwvh常用于全屏元素、大尺寸布局等场景[^2]。 ### 示例代码 ```css /* 设置根元素字体大小 */ html { font-size: 16px; } /* 使用px单位 */ .px-element { width: 200px; border: 1px solid black; } /* 使用em单位 */ .em-element { font-size: 1.5em; padding: 0.5em; } /* 使用rem单位 */ .rem-element { font-size: 1.2rem; margin: 1rem; } /* 使用vw单位 */ .vw-element { width: 50vw; } /* 使用vh单位 */ .vh-element { height: 30vh; } ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值