Enregistrez plusieurs schémas d'adaptation pour le grand écran frontal.
Nous sommes le projet de conception de 1920*1080.
Annuaire d'articles
L'adaptation au grand écran est une compétence essentielle pour le développement front-end, et l'adaptation à divers grands écrans est également de donner aux utilisateurs une meilleure expérience.
1. Solution 1 : rem+taille de la police
Pour définir dynamiquement la taille de la police racine HTML et la taille de la police du corps, le plug-in lib-flexible.js
lib-flexible.js sera utilisé
(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))
Nous pouvons le télécharger. Ouvrez le fichier js, divisez la largeur du brouillon de conception (1920px) en 24 parties égales, et chaque partie mesure 80px. Définissez cette valeur sur la taille de police html, 1rem = 80px ; 24rem = 1920px.
Astuce : le rem est calculé en fonction de la taille de la police html. Si la police html est de 16px, alors 1 rem est égal à 16px ; il est
généralement divisé en 10 parties côté mobile et 24 parties côté PC.
Installez le plugin cssrem et définissez la taille de la police du nœud racine sur 80px. C'est la valeur de référence pour convertir l'unité px en rem.
Configurez la valeur de référence du plug-in :
Dans ce cas, si nous écrivons px, le plug-in le convertira automatiquement en rem pour nous.
<!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>
1. Vérifier l'adaptation
1.1 Dans le cas de 1920*1080
1.2 Dans le cas de 3840*2160 (écran 4k)
3840 est également divisé en 24 parties égales : 3840 / 24 = 160
1.3 écran ultra large 7680*2160
Dans le cas d'un écran ultra-large, seule la partie supérieure est affichée, cette méthode d'adaptation est plus adaptée à une utilisation dans le cas d'un 16 : 9. Il y aura d'autres solutions pour résoudre ce problème plus tard.
2. Schéma 2 : vw (unité)
Utilisez l'unité vw directement, la largeur de l'écran est de 100vw par défaut, puis 100vw = 1920px ; 1vw = 19,2px. Cela utilise également le plug-in cssrem pour convertir directement la largeur et la hauteur du corps (1920px * 1080px) en unités vw.
Cette solution est similaire à la première solution, et elle ne peut pas être affichée en entier dans le cas d'un écran ultra-large.
<!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: 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;
}
</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>
3. Schéma 3 : l'échelle (zoom) est fortement recommandée
De nombreuses adaptations grand écran utilisent cette solution.
Le principe de ce schéma est de mettre à l'échelle selon le rapport d'aspect.
1. Échelle selon le rapport de largeur
(Rapport de largeur = largeur de la page Web actuelle/largeur du brouillon de conception)
<script>
// 设计稿：1920 * 1080
// 1.设计稿尺寸
let targetWidth = 1920;
// 2.拿到当前设备（浏览器）的宽度
// document.documentElement 获取html的宽度
let currentWidth =
document.documentElement.clientWidth || document.body.clientWidth;
// 3.计算缩放比率(屏幕过宽，根据高度计算缩放比例)
let scaleRatio = currentWidth / targetWidth;
// 4.开始缩放网页
document.body.style = `transform: scale(${
scaleRatio})`;
</script>
La mise à l'échelle ci-dessus en fonction du rapport de largeur ne pose aucun problème pour 1920 * 1080, 3840 * 2160 (4k), mais il y a toujours un problème d'affichage de seulement la moitié de l'écran ultra-large.
Analysez les raisons :
我们的设计稿：
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. Calcul dynamique
Calculez dynamiquement le rapport d'aspect de la page Web et décidez de l'adapter en fonction du rapport de largeur ou de hauteur.
<script>
// 设计稿：1920 * 1080
// 1.设计稿尺寸
let targetWidth = 1920;
let targetHeight = 1080;
let targetRatio = 16 / 9; // 宽高比率 （宽 / 高）
// 2.拿到当前设备（浏览器）的宽度和高度
let currentWidth =
document.documentElement.clientWidth || document.body.clientWidth;
let currentHeight =
document.documentElement.clientHeight || document.body.clientHeight;
// 3.计算缩放比率(屏幕过宽，根据高度计算缩放比例)
// 若currentWidth是4k屏宽度 3840 除于 我们设计稿的宽度 1920 3840/1920 = 2
// 这样页面就行进行2倍缩放
let scaleRatio = currentWidth / targetWidth; // 参照宽度进行缩放（默认情况下）
// 当前页面宽高比例，当页面越宽currentRatio值就越大
let currentRatio = currentWidth / currentHeight;
// 判断是根据宽度进行缩放，还是根据高度进行缩放
if (currentRatio > targetRatio) {
// 根据高度进行网页的缩放
scaleRatio = currentHeight / targetHeight; // 参照高度进行缩放（屏幕很宽的情况下）
document.body.style = `transform: scale(${
scaleRatio}) translateX(-50%)`;
} else {
// 根据宽度进行网页的缩放
document.body.style = `transform: scale(${
scaleRatio})`;
}
</script>
2.1. L'effet d'adaptation final de l'écran ultra-large
Code démo complet :
<!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 {
position: relative;
width: 1920px;
height: 1080px;
border: 3px solid red;
/* 设置缩放原点 */
transform-origin: left top;
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: 30px;
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>
// 设计稿：1920 * 1080
// 设配目标：1920 * 1080 ( 1 : 1) | 3840* 2160 ( 2 : 2 ) | 7680 * 2160 ( 4 : 2)
// 1.设计稿尺寸
let targetWidth = 1920;
let targetHeight = 1080;
let targetRatio = 16 / 9; // 宽高比率 （宽 / 高）
// 2.拿到当前设备（浏览器）的宽度
let currentWidth =
document.documentElement.clientWidth || document.body.clientWidth;
let currentHeight =
document.documentElement.clientHeight || document.body.clientHeight;
// 3.计算缩放比率(屏幕过宽，根据高度计算缩放比例)
let scaleRatio = currentWidth / targetWidth; // 参照宽度进行缩放（默认情况下）
// 当前宽高比例
let currentRatio = currentWidth / currentHeight;
if (currentRatio > targetRatio) {
scaleRatio = currentHeight / targetHeight; // 参照高度进行缩放（屏幕很宽的情况下）
document.body.style = `transform: scale(${
scaleRatio}) translateX(-50%); left: 50%;`;
} else {
// 4.开始缩放网页
document.body.style = `transform: scale(${
scaleRatio})`;
}
</script>
</html>
Récemment, je parlais du front-end sur Internet. Le marché de Java n'est pas bon, et c'est vrai que ce n'est pas assez. Plusieurs de mes amis sont en recherche d'emploi, et ils disent aussi que c'est très difficile de trouver un emploi.. Hélas, le travail c'est pour la vie. A cette époque, dans la société actuelle, beaucoup de gens, dont moi, étaient remplis de travail, et il n'y avait pas de temps libre pour développer leurs propres passe-temps. C'était très triste. Des gens comme moi qui venaient de la campagne, je suis plein de confiance quand je suis sorti de la société. Je veux faire carrière. Je ne veux jamais être rempli de travail quotidien. Peut-être que beaucoup de gens sont destinés à être des vis dès la naissance, mais j'espère que mon la vis est la chose la plus importante. La partie, haha, j'ai ri, il suffit de s'en plaindre. La vie doit continuer, demain ira mieux, allez camarade.