认识大屏
- 在开发网页时，我适配最多的屏幕尺寸是：
- PC端电脑：1920px * 1080px （当然也有部分电脑是支持输出4k屏，比如:小米笔记本等）
- 移动设备： 750px * auto
- 大屏的应用场景
- 通常用在数据可视化，借助于图形化手段，清晰有效地传达与沟通信息， 比如用在：零售、物流、电力、水利、环保、交通、医疗等领域。
大屏适配方案
1.移动端的适配方案有哪些？
- 方案一：百分比，
- 因为不同属性的百分比值，相对的可能是不同参照物，所以百分比往往很难统一；
- 所以百分比在移动端适配中使用是非常少的；
- 方案二：rem单位 + 动态设置 html 的 font-size；
- 方案三：vw单位（推荐）；
- 方案四：flex的弹性布局（推荐）
2.大屏适配方案？
- 方案一：百分比设置
- 方案二：rem 单位 + 动态设置 html 的 font-size；
- 方案三：vw 单位；
- 方案四：flex 弹性布局；
- 方案五：scale 等比例缩放（推荐）
新建大屏设备
- 在chrome浏览器中，打开 DevTools 页面，在选择设备下拉栏中，点击最后一个选项 Edit
- 然后在Emulated Devices中点击 Add custom device
- 这里分别新建：1920*1080 、 3840 * 2160 、 7680 * 2160
- 最后在Device面板中输入设备信息，并点击 Add 按钮完成设备的新建。
大屏适配方案1 – rem + font-size
- 动态设置HTML根字体大小 和 body 字体大小（lib_flexible.js）
- 将设计稿的宽（1920）平均分成 24 等份， 每一份为 80px。
- HTML字体大小就设置为 80 px，即1rem = 80px， 24rem = 1920px
- body字体大小设置为 16px。
- 安装 cssrem 插件， root font size 设置为 80px。
- 这个是px单位转rem的参考值 px 转 rem方式：手动 less/scss函数、cssrem插件、webpack插件、Vite插件
-
- 接着就可以按照 1920px * 1080px 的设计稿愉快开发，此时的页面已经是响应式，并且宽高比不变
大屏适配方案2 - vw
- 屏幕的宽默认为 100vw，那么100vw = 1920px， 1vw = 19.2px 。
- 安装 cssrem 插件， body的宽高（1920px * 1080px）直接把px单位转vw单位
- px 转 vw 方式：手动、less/scss函数、cssrem插件、webpack插件、Vite插件
- 接着就可以按照 1920px * 1080px 的设计稿愉快开发，此时的页面已经是响应式，并宽高比不变。
大屏适配方案3（推荐） - scale
使用CSS3中的scale函数来缩放网页，这里我们将使用两种方案来实现：
- 方案一：直接根据宽度的比率进行缩放。（宽度比率=网页当前宽 / 设计稿宽）
- 方案二：动态计算网页宽高比，决定是是否按照宽度的比率进行缩放。
<!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>
body, ul{
margin: 0;
padding: 0;
}
body{
width: 1920px;
height: 1080px;
box-sizing: border-box;
border: 3px solid red;
/* 指定缩放的原点在左上角 */
transform-origin: left top;
}
ul{
width: 100%;
height: 100%;
list-style: none;
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
li{
width: 33.333%;
height: 50%;
box-sizing: border-box;
border: 2px solid green;
font-size: 30px;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
<script>
// 设计稿: 1920 * 1080
// 目标适配: 1920 * 1080 3840 * 2160 ( 2 * 2 ) ; 7680 * 2160( 4 * 2)
// 1.设计稿的尺寸
let targetX = 1920
// 2.拿到当前设备(浏览器)的宽度
let currentX = document.documentElement.clientWidth || document.body.clientWidth
// 1920 * 1080 -> 3840 * 2160
// 3.计算缩放比例
let scaleRatio = currentX / targetX; // 参照宽度进行缩放
// 4.开始缩放网页
document.body.style = `transform: scale(${scaleRatio})`
</script>
</body>
</html>
完美适配 3840 * 2160
此时有个问题出现了
- 在7680*2160的屏幕下，出现了超出屏幕高度，出现了滚动条
- 为什么会出现这个问题
- 因为我们使用scale进行缩放的时候 放大了四倍 1920x4= 7680 1080 x 4= 4320
- 这个时候很明显1080高度无法放下4320高度所以出现了滚动条
- 如何解决
- 这个时候我们不能参照宽度进行缩放( 默认情况 )
- 需要判断如果视口宽高比大于设计稿宽高比就参照高度进行缩放
- 比如 3840 / 2160 > 1920 / 1080 就按照参照高度进行缩放 -js代码更改
// 设计稿: 1920 * 1080
// 目标适配: 1920 * 1080 3840 * 2160 ( 2 * 2 ) ; 7680 * 2160( 4 * 2)
// 1.设计稿的尺寸
let targetX = 1920;
let targetY = 1080;
let oldRatio = targetX / targetY;
// 2.拿到当前设备(浏览器)的宽度
let currentX =
document.documentElement.clientWidth || document.body.clientWidth;
let currentY =
document.documentElement.clientHeight || document.body.clientHeight;
// 1920 * 1080 -> 3840 * 2160
// 3.计算缩放比例
let scaleRatio = currentX / targetX; // 参照宽度进行缩放 ( 默认情况 )
let currentRatio = currentX / currentY; // 宽高比率
// 超宽屏
if (currentRatio > oldRatio) {
scaleRatio = currentY / targetY; // 参照高度进行缩放
document.body.style = `width:${targetX}px; height:${targetY}px;transform: scale(${scaleRatio}) translateX(-50%); left: 50%`;
} else {
// 4.开始缩放网页
document.body.style = `width:${targetX}px; height:${targetY}px; transform: scale(${s caleRatio})`;
}
