一. 大屏适配方案1 – rem + font-size
image.png
/**
动态设置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 的设计稿愉快开发，此时的页面已经是响应式，并且宽高比不变。
**/
1. 在项目中新建一个flexble.js文件
(function flexible(window, document) {
var docEl = document.documentElement;
var dpr = window.devicePixelRatio || 1;
// adjust body font size
function setBodyFontSize() {
if (document.body) {
// body 字体大小默认为 16px
document.body.style.fontSize = 16 * dpr + "px";
} else {
document.addEventListener("DOMContentLoaded", setBodyFontSize);
}
}
setBodyFontSize();
// 这里默认平均分成 10 等分(适用移动端)
// set 1rem = viewWidth / 24 ；（使用pc端）
function setRemUnit() {
var rem = docEl.clientWidth / 24; // 1920 / 24 = 80
docEl.style.fontSize = rem + "px"; // 设置 html字体的大小 80px
}
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);
// 2. 在 html 页面使用
<script src="./lib_flexible.js"></script>
<!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: 24rem;
height: 13.5rem;
box-sizing: border-box;
border: 3px solid red;
}
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: 0.375rem;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
<script src="./lib_flexible.js"></script>
</body>
</html>
实际截图
image.png
image.png
二. 使用vw实现大屏的适配
image.png
<!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: 100vw;
height: 56.25vw;
box-sizing: border-box;
border: 3px solid red;
}
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: 1.5625vw;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</body>
</html>
实际截图
image.png
image.png
三. scale 函数计算适配
image.png
三.一 代码如下:
<!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{
position: relative;
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
let targetY = 1080
let targetRatio = 16 / 9 // 宽高比率
// 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 > targetRatio) {
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(${scaleRatio})`
}
</script>
</body>
</html>
实际截图
image.png
四.使用Vue3.0 搭建项目
cnpm init vue@latest
四.一 项目中需要安装的各种依赖
image.png
四.二 样式重置引入到main.js 中
image.png
网友评论