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

系统管理员 2022-10-12 15:55 179阅读 0赞

首先我们抛出一个问题好了，在前端开发中，开发者使用频率最高的单位是什么？  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjc3NDA0_size_16_color_FFFFFF_t_70]

### px 脱颖而出！ ###

举个例子：

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

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

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

![在这里插入图片描述][20210705164357887.png]

首先来明晰几个概念：

##### 广义的像素： #####

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

##### 狭义的像素： #####

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

##### 广义的视口： #####

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

##### 狭义的视口： #####

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjc3NDA0_size_16_color_FFFFFF_t_70 1]

##### 回答开头的问题 #####

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

### 媒体查询是什么 ###

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

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

### 百分比处理问题 ###

值得注意的是 ，百分比进行表示的像素 都是根据父级限制所限制的

### Rem的解决方案 ###

一般适用于 移动端的适配方案 pc端多数不采用  
什么是rem ：  
rem可以理解为对px的一个自适应转化。而且不论rem单位在哪个层级，只有根元素的font-size改变时候，rem表示才会改变。

##### 如何设置html的font-size大小 #####

例如：设计稿为568px；当设备大于720px时，渲染比例1:1，当小于720px时，按照相应的比例缩小

var cw = document.documentElement.clientWidth; 
    if (cw > 720) {  
        cw = 720; 
    } 
    document.getElementsByTagName("html")[0].style.fontSize = 100 * ( cw / 720) + 'px'

##### rem2px 和 px2rem #####

rem to px  
px to rem (css中依然用px 但是 转化为rem)

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjc3NDA0_size_16_color_FFFFFF_t_70]: /images/20221005/0a291f05cfd34e13b646975b3af96c34.png
[20210705164357887.png]: /images/20221005/e269c856d74347e08d023346eb6c5b2d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjc3NDA0_size_16_color_FFFFFF_t_70 1]: /images/20221005/6b5d44bb507444ce9186ad719bcff4e8.png