前端大屏适配几种方案_前端大屏适配方案，CSS标准文档流与脱离文档流// adjust body font size f

// adjust body font size function setBodyFontSize() { if (document.body) { document.body.style.fontSize = (16 * dpr) + 'px' } else { document.addEventListener('DOMContentLoaded', setBodyFontSize) } } setBodyFontSize();

function setRemUnit() { var rem = docEl.clientWidth / 24 docEl.style.fontSize = rem + 'px' }

setRemUnit()

// reset rem unit on page resize window.addEventListener('resize', setRemUnit) window.addEventListener('pageshow', function (e) { if (e.persisted) { setRemUnit() } })

// detect 0.5px supports if (dpr >= 2) { var fakeBody = document.createElement('body') var testElement = document.createElement('div') testElement.style.border = '.5px solid transparent' fakeBody.appendChild(testElement) docEl.appendChild(fakeBody) if (testElement.offsetHeight === 1) { docEl.classList.add('hairlines') } docEl.removeChild(fakeBody) } }(window, document))


我们可以将它下载下来。打开js文件，将设计稿的宽度（1920px）平均分成24等份，每一份为80px。将这个值设置为html字体大小，既1rem = 80px； 24rem = 1920px。




---



tips：rem是根据html字体大小来计算的，假如html字体为16px，则1rem就等于16px；  
 ![在这里插入图片描述](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/59fc789e6982476796aa3982d5543369~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg55So5oi3NTc5MjMwMTY3MDI=:q75.awebp?rk3s=f64ab15b&x-expires=1770806777&x-signature=s2xfC2P887zlZM1YRQij90n401Y%3D)  
        在移动端通常会分成10份，PC端分成24份。  
        安装cssrem插件，根节点的字体大小设置为80px。这个是px单位转rem的参考值。  
 ![在这里插入图片描述](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/6ec3a0673e5c4bcb8f3dbfc4825ff213~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg55So5oi3NTc5MjMwMTY3MDI=:q75.awebp?rk3s=f64ab15b&x-expires=1770806777&x-signature=4fyQUES1LZxVXMOx0c5jHvdOOJ8%3D)  
 配置插件的基准值：  
 ![在这里插入图片描述](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/5c561716b3bf4e10811e186365f50a56~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg55So5oi3NTc5MjMwMTY3MDI=:q75.awebp?rk3s=f64ab15b&x-expires=1770806777&x-signature=wUzetZ62Wn8uaOZw90Pg12hTnUs%3D)  
 这样的话放我们在书写px的适合，这个插件就会自动帮我们转化成rem。

Document \* { margin: 0; padding: 0; } body { width: 24rem; height: 13.5rem; border: 3px solid red; box-sizing: border-box; } ul { display: flex; flex-direction: row; flex-wrap: wrap; width: 100%; height: 100%; } li { width: 33.333%; height: 50%; font-size: 0.375rem; list-style: none; border: 3px solid green; box-sizing: border-box; }


### 1.查看适配情况


#### 1.1 1920\*1080情况下


![在这里插入图片描述](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/1ad008be5b534446a6fc81707cc5db73~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg55So5oi3NTc5MjMwMTY3MDI=:q75.awebp?rk3s=f64ab15b&x-expires=1770806777&x-signature=BMwUDhbE%2FrIh54arBlQHAsSqb8Y%3D)


#### 1.2 3840\*2160(4k屏)情况下


3840也是分成24等份：3840 / 24 = 160  
 ![在这里插入图片描述](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/22f92609c36043fe9549b10564b53402~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg55So5oi3NTc5MjMwMTY3MDI=:q75.awebp?rk3s=f64ab15b&x-expires=1770806777&x-signature=PvNrHkveUPB%2BXPIrXSodpRYP3JQ%3D)


#### 1.3 7680\*2160 超宽屏下


超宽屏情况下只显示了上半部分，这种适配方式比较适合16：9的情况下使用，后面会有其他方案解决这个问题。  
 ![在这里插入图片描述](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/50ade41b4f9c4bc4b1544098902efdac~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg55So5oi3NTc5MjMwMTY3MDI=:q75.awebp?rk3s=f64ab15b&x-expires=1770806777&x-signature=twDi0SqcIUwete6AMpt1OwQR%2BHE%3D)


## 二、方案二：vw（单位）


      直接使用vw单位，屏幕宽度默认为100vw，那么100vw = 1920px；1vw = 19.2px。这个也是使用cssrem插件，直接将body的宽高（1920px \* 1080px），将px转成vw单位。  
 ![在这里插入图片描述](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/b97acea849244e058811c86a057e155b~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg55So5oi3NTc5MjMwMTY3MDI=:q75.awebp?rk3s=f64ab15b&x-expires=1770806777&x-signature=DjWNak5nPY4iv5fu3smVIf7Je%2Bw%3D)  
 这种方案和第一个方案类似，超宽屏的情况下也是不能全部显示。




---

Document \* { margin: 0; padding: 0; } body { width: 100vw; height: 56.25vw; border: 3px solid red; box-sizing: border-box; } ul { display: flex; flex-direction: row; flex-wrap: wrap; width: 100%; height: 100%; } li { width: 33.333%; height: 50%; font-size: 1.5625vw; list-style: none; border: 3px solid green; box-sizing: border-box; }


## 三、方案三：scale（缩放）强烈推荐


      很多的大屏适配都是使用的这种方案。  
 这种方案的原理就是根据宽高比例进行缩放。



### 1、根据宽度比率进行缩放


（宽度比率=网页当前宽度/设计稿宽度）


      上面这种根据宽度比例进行缩放的，针对1920 \* 1080,3840 \* 2160(4k)是没有问题的，但是在超宽屏的情况下还是存在只显示一半的问题。  
 分析原因：

我们的设计稿： 1920 * 1080 => 要适配 (1920*2=3840, 1080*2=2160, 4k屏) 3840 * 2160 也要适配=> ( 1920*4 = 7680 : 1080 * 2 = 2160) 7680 * 2160

我们当前是根据宽度比率进行缩放的：

先设配3840 * 2160

scaleRatio = 3840 / 1920 = 2

根据这个缩放比率

我们的设计稿宽高都会被缩放两倍

1920 * 2 = 3840

1080 * 2 = 2160

设配7680 * 2160

scaleRatio = 7680 / 1920 = 4

根据这个宽度比例我们的设置稿宽高都会被缩放4倍

1920 * 4 = 7680

1080 * 4 = 4240 这个原先的比例是 4 : 2,现在变成了 4 ：4 ，这也是为什么我们只看到一半高度的原因。


### 2、动态计算


      动态计算网页宽高比，决定是按照宽度的比例还是高度的比例进行缩放。


#### 2.1、超宽屏最终适配效果


![在这里插入图片描述](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/b5d76d59e3ab4d2da73382f73ac5012e~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg55So5oi3NTc5MjMwMTY3MDI=:q75.awebp?rk3s=f64ab15b&x-expires=1770806777&x-signature=7WWbWiDg%2BJD3p2X42H5D%2BPtw8zo%3D)




---



完整demo代码：

最后

面试一面会问很多基础问题，而这些基础问题基本上在网上搜索，面试题都会很多很多。最好把准备一下常见的面试问题，毕竟面试也相当与一次考试，所以找工作面试的准备千万别偷懒。面试就跟考试一样的，时间长了不复习，现场表现肯定不会太好。表现的不好面试官不可能说，我猜他没发挥好，我录用他吧。

96道前端面试题：

常用算法面试题：

前端基础面试题： 内容主要包括HTML，CSS，JavaScript，浏览器，性能优化

开源分享：docs.qq.com/doc/DSmRnRG…