前端大屏的几种适配方案

weixin_47199717

已于 2023-09-25 16:43:53 修改

阅读量345

点赞数 1

文章标签： javascript

于 2023-09-25 16:38:12 首次发布

本文链接：https://blog.csdn.net/weixin_47199717/article/details/133275980

版权

记录一下前端大屏的几种适配方案。
我们是1920*1080的设计稿。
文章目录
一、方案一：rem+font-size
1.查看适配情况
1.1 1920*1080情况下
1.2 3840*2160(4k屏)情况下
1.3 7680*2160 超宽屏下
二、方案二：vw（单位）
三、方案三：scale（缩放）强烈推荐
1、根据宽度比率进行缩放
2、动态计算
2.1、超宽屏最终适配效果
大屏是适配是前端开发必不可少的技能，适配各种大屏也是为了给用户更好的体验。

一、方案一：rem+font-size
动态设置HTML根字体大小和body字体大小，会使用到lib-flexible.js插件
lib-flexible.js

(function flexible(window, document) {
var docEl = document.documentElement
var dpr = window.devicePixelRatio || 1

// 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；

在移动端通常会分成10份，PC端分成24份。
安装cssrem插件，根节点的字体大小设置为80px。这个是px单位转rem的参考值。

配置插件的基准值：

这样的话放我们在书写px的适合，这个插件就会自动帮我们转化成rem。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
* {
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;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</body>
<script src="./js/lib-flexible.js"></script>
</html>

weixin_47199717

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
前端大屏的几种适配方案

打开js文件，将设计稿的宽度（1920px）平均分成24等份，每一份为80px。将这个值设置为html字体大小，既1rem = 80px；tips：rem是根据html字体大小来计算的，假如html字体为16px，则1rem就等于16px；安装cssrem插件，根节点的字体大小设置为80px。这个是px单位转rem的参考值。大屏是适配是前端开发必不可少的技能，适配各种大屏也是为了给用户更好的体验。这样的话放我们在书写px的适合，这个插件就会自动帮我们转化成rem。我们是1920*1080的设计稿。
复制链接

扫一扫