2024前端面试又被问到自适应相关问题！_自适应 前端面试

px 脱颖而出！

举个例子：

width：100px
height：100px
margin-left：100px
......

px的官方定义是像素，和平时常见的米 厘米 毫米是一样的。但是他们的不同点就在于，px所表示的长度并不是恒定不变的。
这也就是为什么会出现自适应等问题原因 ， 因为相同一段代码在不同设备上的展示效果是不同的。

那是什么决定了1px有多长？

首先来明晰几个概念：

广义的像素：

是网页布局的基础，一个像素表示了计算机屏幕所能显示的最小区域，可以把所见区域想象为密密麻麻的像素图，最小的一个格子的长度就代表px。

狭义的像素：

分为css像素和物理像素。
开发者写在.css文件中的像素就是css像素。
物理像素也称之为设备像素，既然是设备像素，所以其只与设备相关，设备的像素越高，密度越大，物理像素也就越多。
1DPR=物理像素/分辨率

广义的视口：

指浏览器显示内容的屏幕区域，这块区域比如会根据我们对浏览器的放大和缩小有所变化。

狭义的视口：

布局视口、视觉视口、理想视口等

回答开头的问题

1DPR（设备像素 ）=物理像素/分辨率
在不缩放的情况下
1CSS像素即1px =物理像素/分辨率

媒体查询是什么

即针对不同的媒体类型采用不同的样式表，需要多种样式储备。所以并不是自适应，而应该叫自匹配样式。

@media screen and(max-width:768px){
body{
backgroud-color:white
}
}


@media screen and(max-width:550px){


### 基础面试题

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**

> 主要内容包括：**HTML，CSS，JavaScript，浏览器，性能优化等等**

](https://bbs.csdn.net/topics/618166371)**

> 主要内容包括：**HTML，CSS，JavaScript，浏览器，性能优化等等**

![](https://img-blog.csdnimg.cn/img_convert/8556358082441be8b9c757e51df3d08c.webp?x-oss-process=image/format,png)