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

总结

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

相关推荐
leluckys几秒前
flutter 专题十七 Flutter Flar动画实战
前端·flutter
豆包MarsCode16 分钟前
我用豆包MarsCode IDE 做了一个 CSS 权重小组件
开发语言·前端·javascript·css·ide·html
22x艾克斯26 分钟前
Web Notifications API-让网页也能像QQ一样实现消息通知
前端
X 西安27 分钟前
第十章JavaScript的应用
开发语言·javascript·ecmascript
想你的风吹到了瑞士33 分钟前
变量提升&函数提升
前端·javascript·vue.js
生椰拿铁You1 小时前
12 —— Webpack中向前端注入环境变量
前端
Huazzi.1 小时前
免费好用的静态网页托管平台全面对比介绍
前端·网络·github·web
吃土少女古拉拉1 小时前
前端和后端
前端·学习笔记
夫琅禾费米线1 小时前
leetcode2650. 设计可取消函数 generator和Promise
开发语言·javascript·leetcode·ecmascript
寒雒2 小时前
【Python】实战:实现GUI登录界面
开发语言·前端·python