面试官:对于不同设备的通用适配的css,你有什么好的解决方案?

前言

今天,上铺兄弟刚刚从ByteDance面试中归来,带着一丝难以捉摸的微笑..."面试怎么样?"我迫不及待地问道。"还可以吧。""还可以是什么意思?"我直接就是一记勾手"不说我就不放手了!",扭捏半天才为大家弄来的一道字节题。

他说面试官问我:有一题:"如果需要对于不同设备的通用适配的css,你有什么好的解决方案?" 听到这里自顾自的开始想方法了。

第一想法 %

我的第一想法 %,因为当我们需求就是实现一个盒子宽度固定为视口宽度的10%,这%肯定最好。但是我们要清楚%并不是根据视口宽度而定,而是根据父容器的宽度定的

xml 复制代码
 <style>
        /* 假设body或某个父容器设置了宽度 */
        body {
            margin: 0;
            padding: 0;
            width: 100%; /* 让body充满整个视口 */
        }
        
        .box-percent {
            width: 10%; /* 盒子宽度为父容器宽度的10% */
            height: 100px;
            background-color: blue;
        }
  </style>

因此我们pass掉了这个方案。

第二想法 vw

若要使盒子宽度直接与视口宽度关联,不论父元素的宽度如何,使用 vw 是更好的选择。 vw 单位直接根据浏览器可视窗口的宽度来计算尺寸,而不是基于任何父元素的宽度。这意味着无论父元素的宽度如何变化,元素的宽度始终按照视口宽度的百分比来设定,非常适合创建与屏幕尺寸紧密相关的响应式设计。而且vw 旋转友好 ,当设备从竖屏切换到横屏或者屏幕尺寸发生变化时,使用 vw 单位的元素能自动调整其宽度,无需额外的媒体查询或JavaScript监听事件来调整尺寸,提高了用户体验的一致性和适应性。

xml 复制代码
    <style>
        .box-vw {
            width: 10vw; /* 盒子宽度为视口宽度的10% */
            height: 100px;
            background-color: red;
        }
    </style>

但是vw也有缺陷就是有兼容性问题:主要原因是这些设备或浏览器可能不完全支持 CSS3 视窗单位,部分老旧的移动设备和浏览器版本可能不支持或部分支持vw单位。特别是在Android 4.x及以下版本和iOS的一些较旧版本中,vw的兼容性可能不佳。

因此我们仍然需要想一个更好的解决方案。

第三想法 rem

rem是相对于根元素(通常是 <html> 元素)的字体大小来计算的。这意味着,当你设置一个元素的宽度、高度或字体大小为 rem 单位时,这个值会根据根元素的字体大小自动缩放,通常默认1rem=16px。虽然rem的单位是固定的px,但是我们可以对其进行更改。只需一条代码:

ini 复制代码
 document.documentElement.style.fontSize =  window.innerWidth*0.1 + 'px';

这里的document.documentElement是整个页面html,有同学可能会用document.querySelector('html')但是我不建议这么用。

因为使用querySelector()选择器是在DOM树构建挂载完成后再进行操作的。它会在当前文档中查找匹配指定选择器的第一个元素。这意味着在调用这个方法时,浏览器需要遍历DOM树来查找匹配的元素。尽管这个操作非常快,但是如果在某些特殊情况下DOM构建尚未完成(比如脚本位于<head>标签内并在文档其余部分加载之前执行),这可能会导致所查找不到元素或结果不完整。

而使用documentElement是在DOM树挂载前就完成了。这个属性直接指向文档的根元素,它是Document接口的一部分,不需要进行任何查找操作。它几乎总是可用的,即便在DOM树尚未完全构建或渲染之前。这意味着使用document.documentElement通常更快,且不会受到DOM加载状态的影响。

同时:window.innerWidth是直接"监听"或"触发"的旋转事件造成的,而是因为当设备旋转时,window.innerWidth的值会发生变化。浏览器会自动重新计算样式,包括那些依赖于视口尺寸的动态值。

总结

兄弟面试出来的这道题其实不难,但是还是挺多细节可以抠的。但是他的扭扭捏捏令我非常失望,我觉得今晚让他离开寝室,不跟他做兄弟了。

相关推荐
无双_Joney9 小时前
[更新迭代 - 1] Nestjs 在24年底更新了啥?(功能篇)
前端·后端·nestjs
在云端易逍遥9 小时前
前端必学的 CSS Grid 布局体系
前端·css
EMT9 小时前
在 Vue 项目中使用 URL Query 保存和恢复搜索条件
javascript·vue.js
ccnocare9 小时前
选择文件夹路径
前端
艾小码9 小时前
还在被超长列表卡到崩溃?3招搞定虚拟滚动,性能直接起飞!
前端·javascript·react.js
闰五月9 小时前
JavaScript作用域与作用域链详解
前端·面试
泉城老铁9 小时前
idea 优化卡顿
前端·后端·敏捷开发
前端康师傅9 小时前
JavaScript 作用域常见问题及解决方案
前端·javascript
司宸9 小时前
Prompt结构化输出:从入门到精通的系统指南
前端