每日面试一小题：字节的等比例适配问题

一拳干爆显示器
259 阅读4分钟

等比例适配问题

等比例适配问题： 指的是确保界面元素在不同尺寸和分辨率的屏幕上保持其原有的视觉比例和和谐性。这意味着无论是大屏桌面显示器还是小尺寸的手机屏幕，界面布局、图像、文字以及其他视觉元素都应该按比例缩放，以保持一致的视觉体验和可用性

举个例子：要求创建一个块级元素一直占据着屏幕宽度的一半，如下图

8e2016678c1166a6f32a537cbe3f4e6.png （移动端） 0bdadee3e2604d4769b66bcd57a5063.png （PC端）

PC lg pad 横竖屏的切换 phone(小米、苹果、华为)

在要适配的设备上体验一至

因此在面对屏幕宽度各不相同的情况下，使用px等其他绝对单位就不能适配，因此得引用相对单位或其他方法完成该效果

使用%相对单位

<head>
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .col{
            width: 50%;
            height: 500px;
            line-height: 100px;
            background-color: rgb(255, 0, 157);
            font-size: 50px;
        }
    </style>
</head>
<body>
    <div class="col"></div>
</body>
</html>


<head>
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .col{
            width: 50%;
        }
        .col2{
            width: 50%;
        }
        .col3{
            width: 50%;
            height: 500px;
            line-height: 100px;
            background-color: rgb(255, 0, 157);
            font-size: 50px;
        }
    </style>
</head>
<body>
    <div class="col">
        <div class="col2">
            <div class="col3"></div>
        </div>
    </div>
</body>
</html>
98fe71f7446c2e6b57124bb788cf4f2.png

使用vw相对单位

可以使用vw相对单位方法解决多层嵌套关系下，子块级元素无法占据着屏幕宽度的一半

        .col{
            width: 50vw;
            height: 500px;
            line-height: 100px;
            background-color: rgb(255, 0, 157);
            font-size: 50px;
        }

在CSS中，%（百分比）和vw（viewport width，视口宽度）都是相对单位，但它们的参照物不同：

  1. %（百分比） :

    • %是一个相对长度单位，其值相对于其包含块（containing block）的相应尺寸（宽度或高度）。例如，如果一个元素的宽度设为50%，那么它的宽度将是其父元素宽度的50%。
    • 对于百分比值，重要的是理解包含块的概念，它通常是指父元素，但在绝对定位的情况下可能有所不同。
    • 百分比单位广泛用于创建流式布局，使得元素能够根据父容器的尺寸进行伸缩。

  2. vw（viewport width） :

    • vw是基于视口宽度的单位，1vw等于视口宽度的1%。视口指的是用户浏览器的实际可视区域，不包括任何滚动条、菜单或浏览器边框。
    • 使用vw可以让元素的尺寸随浏览器窗口的大小动态变化，非常适合创建响应式设计。
    • 与百分比不同，vw直接与视口尺寸关联，而不是依赖于任何特定父元素的尺寸，这使得它在创建与屏幕尺寸紧密相关的布局时更为灵活。

不过vw是比较新的单位，存在兼容性问题。

使用rem单位

rem（root em）是一个CSS长度单位，代表“根元素的em”。

  • rem单位的大小是基于文档根元素（通常是<html>元素）的字体大小计算的。这意味着，当你在CSS中使用rem为单位设置一个元素的尺寸（如字体大小、宽度、高度等），这个尺寸会是根元素字体大小的一定比例。
  • 在默认状态下1rem=16px

不过页面字体大小是可以改变的

将字体设置为页面大小的十分之一（即rem等于页面大小的十分之一）

那么再css样式设置宽度为5rem便是整个页面大小的一半了

    <script>
        (function(){
            const eleHtml = document.documentElement;
            //屏幕宽度window.innerWidth
            //屏幕高度window.innerHeight
            eleHtml.style.fontSize = window.innerWidth / 10 + 'px';
        })()
    </script>

但现在还不完美，在使用移动端或ipad时候会发现：页面可以根据放置的位置切换横屏和竖屏模式

而我们上述的代码在切换时需要重新计算屏幕的宽度（因为横屏竖屏宽度不同） cac4a574196423b63d5fa4b3f9698a4.png 可以添加一个resize监听事件：window.addEventListener('resize', ...) 监听浏览器窗口的resize事件。当用户手动调整浏览器窗口大小或者设备屏幕方向改变时，这个事件会被触发。 使字体大小再重新计算一遍。

   <script>
        (function(){
            const eleHtml = document.documentElement;
            //屏幕宽度window.innerWidth
            //屏幕高度window.innerHeight
            eleHtml.style.fontSize = window.innerWidth / 10 + 'px';
            window.addEventListener('resize',()=>{
                //console.log('resize');
                eleHtml.style.fontSize = window.innerWidth / 10 + 'px';
            })
        })()

总结

  • %是相对于其最近的包含块（通常是父元素）的尺寸。

  • vw是相对于浏览器视口宽度的尺寸，提供了一种与屏幕尺寸直接关联的单位，尤其适用于实现跨设备的自适应布局。

  • rem 是html根元素字体大小做比例

    • 移动适配用vw/vh 绝绝子
    • % 因为dom层级关系不好用
    • rem 兼容性更好
    • script 阻塞 在dom + css并发渲染之前设置好html的fontsize
avatar
文章
阅读
粉丝