面试官:对于不同设备的通用适配的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的值会发生变化。浏览器会自动重新计算样式,包括那些依赖于视口尺寸的动态值。

总结

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

相关推荐
马剑威(威哥爱编程)16 分钟前
MongoDB面试专题33道解析
数据库·mongodb·面试
小远yyds18 分钟前
前端Web用户 token 持久化
开发语言·前端·javascript·vue.js
阿伟来咯~1 小时前
记录学习react的一些内容
javascript·学习·react.js
吕彬-前端1 小时前
使用vite+react+ts+Ant Design开发后台管理项目(五)
前端·javascript·react.js
学前端的小朱1 小时前
Redux的简介及其在React中的应用
前端·javascript·react.js·redux·store
guai_guai_guai1 小时前
uniapp
前端·javascript·vue.js·uni-app
也无晴也无风雨1 小时前
在JS中, 0 == [0] 吗
开发语言·javascript
bysking2 小时前
【前端-组件】定义行分组的表格表单实现-bysking
前端·react.js
独行soc2 小时前
#渗透测试#SRC漏洞挖掘#深入挖掘XSS漏洞02之测试流程
web安全·面试·渗透测试·xss·漏洞挖掘·1024程序员节
王哲晓3 小时前
第三十章 章节练习商品列表组件封装
前端·javascript·vue.js