CSS面试题解析：rem, em, vw, vh与百分比的区别

需积分: 0 157 浏览量更新于2024-06-27 收藏 862KB PDF 举报

"这是一份关于CSS面试题的集合，主要涵盖了CSS单位的理解与应用，以及适配策略的讨论。" 在CSS面试中，对不同单位的理解是考察开发者基础技能的重要部分。`rem`, `em`, `vw`, `vh` 和百分比单位各有其特点和用途： 1. `px`: 像素单位，是绝对单位，表示具体尺寸。在屏幕分辨率不变的情况下，px大小固定。 2. `rem`: 相对单位，它相对于根元素（通常是`<html>`）的字体大小来设定。调整根元素的字体大小可以影响整个页面的相对尺寸。 3. `em`: 也是相对单位，但它是相对于当前元素的字体大小。如果元素没有定义字体大小，它将基于父元素的字体大小。 4. `vw`: 视口宽度单位，1vw等于浏览器视口宽度的1%。`vh`类似，是视口高度的1%。 5. 百分比单位：相对于父元素的宽度或高度。例如，`width: 50%;`意味着元素宽度是其父元素宽度的一半。在实际应用中，`vw`和`vh`常用于创建响应式设计，使元素大小根据窗口大小动态变化。需要注意的是，当浏览器有滚动条时，100vw并不包含滚动条的宽度，而100%则包括。面试题中的一个例子是关于750设计图的转换。在iPhone 6/7/8的2倍图设计中，1rem通常等于16px。因此，20px字体大小在这样的设计图中对应的rem值为20px / 16px = 1.25rem。对于移动端适配，原生Android和iOS应用的适配策略通常由系统本身处理。而对于WebApp，开发者需要考虑以下策略： 1. 设置HTML的`viewport`元标签：`<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">`，确保页面宽度适应设备宽度，并禁用用户缩放。 2. 使用媒体查询(`@media`)进行响应式设计，根据设备屏幕尺寸改变布局。这可以精确控制不同屏幕大小下的样式，但可能导致维护成本增加。 3. 利用CSS的相对单位，如`rem`和`vw/vh`，自适应地调整元素大小。这种方法更利于保持设计的一致性，但可能需要精心计算以达到理想效果。适配策略的选择取决于项目需求和开发团队的技术栈，平衡用户体验和开发效率是关键。理解这些基本概念和技巧对于CSS面试至关重要，也是开发高质量网页和移动应用的基础。

方法二：absolute定位和margin值实现

方法三：calc(100% - 固定内容的宽度) 用calc函数动态计算数值

方法四：flex布局轻松搞定

}

.left {

 width: 200px;

 height: 100%;

 background: red;

 float: left;

}

.right {

 height: 100%;

 background: pink;

 overflow: hidden;

}

</style>

<style>

.content {

  border: 1px solid #000;

  height: 800px;

  padding: 20px;

 }

 .left {

   width: 200px;

   height: 100%;

   background: red;

   position: absolute;

 }

 .right {

   height: 100%;

   background: pink;

   margin-left: 200px;

 }

</style>

<style>

.content {

  border: 1px solid #000;

  height: 800px;

  padding: 20px;

 }

 .left {

   width: 200px;

   height: 100%;

   background: red;

   float: left;

 }

 .right {

   height: 100%;

   background: pink;

   float: left;

   width: calc(100% - 200px);

 }

</style>

剩余20页未读，继续阅读

当年骑猪追风的少年

粉丝: 0
资源: 2

CSS面试题解析：rem, em, vw, vh与百分比的区别

css面试试题汇总.pdf

整合了网上大多数jQuery面试题及答案

前端开发面试题整合（css、js、vue。react等）

2023css面试题

2023html,css面试题

JavaScript css 面试题

html何css面试题

2023年htmlcss面试题

html+css面试题

HTMLCSS 面试题跟答案

最新资源