根據UI設計稿適配不同大小螢幕
阿新 • • 發佈：2019-02-18
分析：
兩種方法適配：
一、用css在style中用媒體查詢
（優點：相容性好。 缺點：適配大部分常見螢幕，要把每一種螢幕大小寫上）
二、用 js 獲取螢幕寬度
（優點：能適配所有的螢幕大小。缺點：相容性不好）
無論用哪種方法，頁面中所有的盒子都用rem計算就行了。推薦使用第一種
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>適配方案三</title>
<style>
body {
padding: 0;
margin: 0;
background-color: #F7F7F7;
}
/*第一種方法*/
/*公司開發，按著UI稿件進行網頁佈局*/
/* 640 和 750 並存狀態 */
/*公式*/
/*1、將UI圖（假設640px）分成若干份（如20份）*/
/*2、UI圖寬度（640px） / 若干份（20份）= 基數（32）*/
/* 每份 32px */
/* 問16畫素佔多份？16 / 32 = 0.5份 */
/*3、結合媒體查詢，檢測螢幕寬度（layout viewport）*/
/*4、layout viewport 寬度 / 若干份（20份）= font-size*/
/* 每份 font-size */
/* 0.5份 * font-size = 在不同裝置下的實際大小 */
/*常見螢幕尺寸 320、360、375、400、414*/
/*分成20份*/
@media only screen and (width: 320px) {
html {
font-size: 16px;
}
}
@media only screen and (width: 360px) {
html {
font-size: 18px;
}
}
@media only screen and (width: 375px) {
html {
font-size: 18.75px;
}
}
@media only screen and (width: 400px) {
html {
font-size: 20px;
}
}
@media only screen and (width: 412px) {
html {
font-size: 20.6px;
}
}
@media only screen and (width: 414px) {
html {
font-size: 20.7px;
}
}
.box {
width: 5rem;
height: 5rem;
background-color: pink;
}
</style>
</head>
<body>
<div class="box">
</div>
<script>
// 第二種方法
var viewport = document.documentElement;
var width = viewport.clientWidth;
var fontSize = width / 20;
viewport.style.fontSize = fontSize + "px";
</script>
</body>
</html>