总结

技术学到手后，就要开始准备面试了，找工作的时候一定要好好准备简历，毕竟简历是找工作的敲门砖，还有就是要多做面试题，复习巩固。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

@media screen and (min-width: 375px) {html{font-size:58.59375px;}}
@media screen and (min-width: 400px) {html{font-size:62.5px;}}
@media screen and (min-width: 414px) {html{font-size:64.6875px;}}
@media screen and (min-width: 440px) {html{font-size:68.75px;}}
@media screen and (min-width: 480px) {html{font-size:75px;}}
@media screen and (min-width: 520px) {html{font-size:81.25px;}}
@media screen and (min-width: 560px) {html{font-size:87.5px;}}
@media screen and (min-width: 600px) {html{font-size:93.75px;}}
@media screen and (min-width: 640px) {html{font-size:100px;}}
@media screen and (min-width: 680px) {html{font-size:106.25px;}}
@media screen and (min-width: 720px) {html{font-size:112.5px;}}
@media screen and (min-width: 760px) {html{font-size:118.75px;}}
@media screen and (min-width: 800px) {html{font-size:125px;}}
@media screen and (min-width: 960px) {html{font-size:150px;}}

#### 第三种方法：JS配合修改配合rem适配

var designWidth = 375; // 设计稿宽度
var remPx = 100; // 在屏幕宽度375px，的时候，设置根元素字体大小 100px
var scale = window.innerWidth / designWidth； //计算当前屏幕的宽度与设计稿比例
// 根据屏幕宽度 动态计算根元素的 字体大小
document.documentElement.style.fontSize = scale*remPx + ‘px’;

这里我们计算当前屏幕的宽度与设计稿比后用比例scale乘上100，是因为rem都是基于font-size值设置的，100便于计算，值可以为任意数，比如10，但是Chrome中最小为12，所以这里选择用100；


* 比如某个元素，设计稿设计宽度为 640px， 我们需要在css中设置 `width: 6.4rem`
* 比如某个元素，设计稿设计字体大小是 16px， 我们需要在css中设置 `font-size:0.16rem`


从而达到rem适配。


#### 第四种方法：JS动态修改配合CSS预处理器（less）

// 计算屏幕宽度

var screen = document.documentElement.clientWidth;
// 计算字体大小，取屏幕宽度的16分之一
var size = screen / 16;
// 设置根元素字体大小
document.documentElement.style.fontSize = size + ‘px’;

js获取当前屏幕的宽度，将屏幕宽度的16分之一设置给html的font-size

// 此时设计稿的宽度为375，定义一个less变量等于16分之一的设计稿宽度
@rem: 375/16rem;

如果此时设计稿中的16可以为任意值，你设置多少，js中屏幕宽度就除于多少再赋值给html的font-size。


若设计稿中的某元素设置宽高为200px

.box{
width：200px;
height:200px;
}

此时可以替换为：

.box{
width：200/@rem;
height:200/@rem;
}

分析：


设计稿中的元素尺寸都是基于设计稿的宽度而定，如上述，200px的宽度是基于设计稿375px而定的，但当js中获取的宽度发生改变时，需要解决适配问题。假设js中获取的此时屏幕宽度为750px，那么此时html的font-size值为750/16 px；


此时计算box的width为400px  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20190711134318652.png)  
 注：1rem = 1 html的font-size


此方法不需要进行单位数值的计算，只需要定义一个less变量，再查找替换将单位px换成 /@rem 即可。


#### 第五种方法：JS动态修改配合rem适配


这种方法跟第四种雷同，但不需要再在less中定义变量，只需要进行js获取配合查找替换px即可。

// 计算屏幕宽度

var screen = document.documentElement.clientWidth;
// 设置根元素字体大小
document.documentElement.style.fontSize = screen + ‘px’;

.box{
width：200px;
height:200px;
}

### 最后

整理面试题，不是让大家去只刷面试题，而是熟悉目前实际面试中常见的考察方式和知识点，做到心中有数，也可以用来自查及完善知识体系。

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

**《前端基础面试题》，《前端校招面试题精编解析大全》，《前端面试题宝典》，《前端面试题：常用算法》**

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



![前端面试题宝典](https://img-blog.csdnimg.cn/img_convert/fe5a3a866c40cf7efe533ebd9646729f.webp?x-oss-process=image/format,png)

![前端校招面试题详解](https://img-blog.csdnimg.cn/img_convert/f27f94d4d3d8f94185679c8d778fffb2.webp?x-oss-process=image/format,png)



典》，《前端面试题：常用算法》**

[外链图片转存中...(img-cyy0MxNe-1714995759773)]



[外链图片转存中...(img-duSwjPM4-1714995759774)]

[外链图片转存中...(img-yBhtKa0P-1714995759774)]