前言
今天，上铺兄弟刚刚从ByteDance面试中归来，带着一丝难以捉摸的微笑...“面试怎么样？”我迫不及待地问道。“还可以吧。”“还可以是什么意思？”我直接就是一记勾手“不说我就不放手了！”，扭捏半天才为大家弄来的一道字节题。
他说面试官问我：有一题：“如果需要对于不同设备的通用适配的css，你有什么好的解决方案？” 听到这里自顾自的开始想方法了。文章源自灵鲨社区-https://www.0s52.com/bcjc/javascriptjc/15978.html
第一想法 %
我的第一想法 %，因为当我们需求就是实现一个盒子宽度固定为视口宽度的10%，这%肯定最好。但是我们要清楚%并不是根据视口宽度而定，而是根据父容器的宽度定的文章源自灵鲨社区-https://www.0s52.com/bcjc/javascriptjc/15978.html
xml
<style>
/* 假设body或某个父容器设置了宽度 */
body {
margin: 0;
padding: 0;
width: 100%; /* 让body充满整个视口 */
}
.box-percent {
width: 10%; /* 盒子宽度为父容器宽度的10% */
height: 100px;
background-color: blue;
}
</style>
因此我们pass掉了这个方案。文章源自灵鲨社区-https://www.0s52.com/bcjc/javascriptjc/15978.html
第二想法 vw
若要使盒子宽度直接与视口宽度关联，不论父元素的宽度如何，使用 vw 是更好的选择。 vw 单位直接根据浏览器可视窗口的宽度来计算尺寸，而不是基于任何父元素的宽度。这意味着无论父元素的宽度如何变化，元素的宽度始终按照视口宽度的百分比来设定，非常适合创建与屏幕尺寸紧密相关的响应式设计。而且vw 旋转友好，当设备从竖屏切换到横屏或者屏幕尺寸发生变化时，使用 vw 单位的元素能自动调整其宽度，无需额外的媒体查询或JavaScript监听事件来调整尺寸，提高了用户体验的一致性和适应性。文章源自灵鲨社区-https://www.0s52.com/bcjc/javascriptjc/15978.html
xml
<style>
.box-vw {
width: 10vw; /* 盒子宽度为视口宽度的10% */
height: 100px;
background-color: red;
}
</style>
但是vw也有缺陷就是有兼容性问题：主要原因是这些设备或浏览器可能不完全支持 CSS3 视窗单位，部分老旧的移动设备和浏览器版本可能不支持或部分支持vw单位。特别是在Android 4.x及以下版本和iOS的一些较旧版本中，vw的兼容性可能不佳。文章源自灵鲨社区-https://www.0s52.com/bcjc/javascriptjc/15978.html
因此我们仍然需要想一个更好的解决方案。文章源自灵鲨社区-https://www.0s52.com/bcjc/javascriptjc/15978.html
第三想法 rem
rem是相对于根元素（通常是 <html> 元素）的字体大小来计算的。这意味着，当你设置一个元素的宽度、高度或字体大小为 rem 单位时，这个值会根据根元素的字体大小自动缩放,通常默认1rem=16px。虽然rem的单位是固定的px，但是我们可以对其进行更改。只需一条代码：文章源自灵鲨社区-https://www.0s52.com/bcjc/javascriptjc/15978.html
ini
document.documentElement.style.fontSize = window.innerWidth*0.1 + 'px';
这里的document.documentElement是整个页面html，有同学可能会用document.querySelector('html')但是我不建议这么用。文章源自灵鲨社区-https://www.0s52.com/bcjc/javascriptjc/15978.html
因为使用querySelector()选择器是在DOM树构建挂载完成后再进行操作的。它会在当前文档中查找匹配指定选择器的第一个元素。这意味着在调用这个方法时，浏览器需要遍历DOM树来查找匹配的元素。尽管这个操作非常快，但是如果在某些特殊情况下DOM构建尚未完成（比如脚本位于<head>标签内并在文档其余部分加载之前执行），这可能会导致所查找不到元素或结果不完整。文章源自灵鲨社区-https://www.0s52.com/bcjc/javascriptjc/15978.html
而使用documentElement是在DOM树挂载前就完成了。这个属性直接指向文档的根元素，它是Document接口的一部分，不需要进行任何查找操作。它几乎总是可用的，即便在DOM树尚未完全构建或渲染之前。这意味着使用document.documentElement通常更快，且不会受到DOM加载状态的影响。文章源自灵鲨社区-https://www.0s52.com/bcjc/javascriptjc/15978.html
同时：window.innerWidth是直接“监听”或“触发”的旋转事件造成的，而是因为当设备旋转时，window.innerWidth的值会发生变化。浏览器会自动重新计算样式，包括那些依赖于视口尺寸的动态值。
总结
兄弟面试出来的这道题其实不难，但是还是挺多细节可以抠的。但是他的扭扭捏捏令我非常失望，我觉得今晚让他离开寝室，不跟他做兄弟了。
评论