前言
今天,上铺兄弟刚刚从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
的值会发生变化。浏览器会自动重新计算样式,包括那些依赖于视口尺寸的动态值。
总结
兄弟面试出来的这道题其实不难,但是还是挺多细节可以抠的。但是他的扭扭捏捏令我非常失望,我觉得今晚让他离开寝室,不跟他做兄弟了。