移動端H5的適配
1.為什么要適配
a) 為了適應各種移動端設備，完美呈現應有的布局效果
b) 各個移動端設備，解析度大小不一致，網頁想鋪滿整個螢屏，并在各種分辨下等比縮放
現在主流的開發思路
- PC端 和移動端 分開開發( 分開開發 也是要寫 兩套代碼)
- 如果想在既能適應PC、又能適應移動端 回應式開發（麻煩 寫好多套css ）
-
2.概念知識
2.1 螢屏尺寸
- 螢屏對角線的長度，單位是英寸，
- 1英寸=2.54厘米，6*2.54 = 15.24厘米
2.2 螢屏解析度
- 像素：像素是由影像的小方格組成，小方格都有一個明確的位置和倍分配的色彩值，
- 在橫縱方向上的像素點，單位是px，1px=1個像素點（這里的1像素指的是物理設備的1個像素點） pixel
- 螢屏解析度越高，顯示效果越精細，（解析度 指的 像素點的個數）
- iPhoe 6的解析度是1334*750像素，一般是縱向像素*橫向像素來表示一個手機的解析度
- 1080P(P指的是逐行掃描)、2K、4K
2.3 像素密度
-
螢屏解析度與尺寸構成了像素密度，
-
螢屏上每英寸可以顯示的像素點數量，單位是ppi（pixels per inch的縮寫） 2.54厘米 能顯示多少個像素點 600
-
螢屏像素密度與螢屏解析度和螢屏尺寸有關，像素密度越高，螢屏能夠以越高的密度顯示影像，
2.4 css像素
- css像素是為web開發者根據設計圖表示web頁面上內容大小的抽象單位，主要使用在瀏覽器上
- px是一個相對單位，由開發者來使用，也稱為邏輯像素，（代碼概念、邏輯概念）
- 一個標準的顯示密度下（普通屏），一個css像素對應著一個設備像素，在頁面不縮放的情況下，1px的CSS像素 === 1設備獨立像素
- 頁面放大200%時，頁面的設備獨立像素依舊不變，放大的是CSS像素，但是此時CSS像素與設備獨立像素的關系變化了，1px === 4獨立像素（寬x2，高x2），經過計算機計算，內部 原本設定 1px ，變成 2px
2.5 設備像素/物理像素
- 顯示幕的最小物理單位（對于一個顯示幕來說是固定的）
- 以手機螢屏為例，螢屏上的真實像素
- 設備出廠時候的一個寬高（device pixels）
2.6 Css像素與物理像素的關系
- div {width: 100px;} 表示占據了100個像素 ，在普通螢屏，pc端所有的螢屏都是普通螢屏，100px
- 100個像素占據多少個物理像素，取決于螢屏的特性（是否高密度，像素比）和用戶的縮放行為
- iPhone 6的Retina HD 高清視網膜顯示屏中，因為視網膜的像素密度是普通螢屏的2倍，所以這個div就占了200個設備像素，如果用戶放大，它將占據更多的設備像素，如 iPhone 6 plus ，就會占300個像素，
- 在正常情況下，普通螢屏中，假設 ppi 為 100， 他的ppi 2 * 100 ， 每英寸 有 200個像素點，
2.7 設備獨立像素
- 密度無關像素，可以認為是計算機坐標系中的一個點，這個點代表一個由程式員使用的虛擬像素（Css設定的像素），然后由相關設備轉換成物理像素，去顯示對應的大小，
- 設備獨立像素是一個總體概念，包括了Css像素，
- 對于開發者來說，并不在意一個Css像素到底跨越了多少個設備像素，因為Css和Js定義的像素本質上代表的都是Css像素，如何顯示對應的大小依賴于螢屏特性和用戶縮放程度的復雜計算交給了瀏覽器，
- 開發的時候，你不需要去關心，你寫的代碼 ，在螢屏設備上 到底占用了多少像素，瀏覽器會經過計算 螢屏 密度 和 縮放，
- 通過 window.screen.width/ window.screen.height 查看 375
2.8 像素比(dpr)
- devicePixelRatio指的是物理像素和設備獨立像素的比 即1獨立像素由多少物理像素渲染，
- window.devicePixelRatio可查看
- 設備像素比 devicePixelRatio = 物理像素/獨立像素
2.9 位影像素
-
一個位影像素是柵格影像（png、jpg、gif等）最小的資料單元，至少1個位影像素對應1個物理像素，圖片才能得到完美清晰的展示，
-
在Retina螢屏下，會出現位影像素點不夠的情況，導致圖片模糊的情況，
-
對于dpr = 2的螢屏，一個位影像素對應4個物理像素，由于單個位影像素不可以再進一步分割，所以就進去色，導致圖片模糊，
-
如200*300的img標簽，需要提供400*600的圖片，在Retina螢屏下，位影像素就可以和物理像素形成1:1的比例，
2.10 1像素問題
因為不同設備具有不同的dpr + 所代表的設備像素不同, 所以在有些設備上看到的粗,有些設備看到的細,如何解決一像素邊框問題,
方法一
通過媒體查詢，查詢設備的寬尺寸大小范圍，根據不同的尺寸大小進行變化
.box{
width: 200px;
height: 200px;
background-color: aqua;
}
@media screen and (min-width: 0) and (max-width: 320px){
/* 螢屏寬度為 0 -320 之間的 使用以下 css樣式 */
.box{
width: 150px;
background-color: blue;
}
}
@media screen and (min-width: 321px) and (max-width: 375px){
/* 螢屏寬度為 321-375 之間的 使用以下 css樣式 */
.box{
width: 100px;
background-color: blueviolet;
}
}
@media screen and (min-width: 376px) and (max-width: 414px){
/* 螢屏寬度為 376-414 之間的 使用以下 css樣式 */
.box{
width: 50px;
background-color: chartreuse;
}
}
方法二
通過彈性盒子和百分比來自動適應螢屏寬度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>百分比 flex布局</title>
<style>
html {
max-width: 750px;
margin: 0 auto;
}
*{
margin: 0;
padding: 0;
}
ul{
list-style: none;
overflow: hidden;
}
ul>li{
float: left;
width: 20%;
height: 50px;
background-color: chartreuse;
border-radius: 50%;
}
.warp{
display: flex;
}
.warp .box {
width: 50%;
height: 100px;
background-color: red;
}
.warp .box:first-child {
background-color: pink;
}
</style>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<div class="warp">
<div class="box"></div>
<div class="box"></div>
</div>
</body>
</html>
方法三
通過給html設定字體尺寸rem ，在通過媒體查詢改變字體尺寸來調整大小
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>rem</title>
<style>
html{
/*
設計圖的尺寸 一般都是 750px
如果 按照 750px來算 ，放到 750px寬的 螢屏中
把 html 的字號 設定成 100px
用rem 取到 螢屏的寬 7.5rem
*/
font-size: 100px;
}
*{
margin: 0;
padding: 0;
}
.box{
width: 7.5rem;
height: 1rem;
background-color: chartreuse;
}
/* 如果設備375px寬的螢屏
設定的還是 7.5rem
要取到螢屏的寬度375px，就需要進行計算
求 x 新螢屏 html 標簽的 字號 = 375px(新螢屏寬) * 100px(舊螢屏字號) / 750(舊螢屏寬)
需要把 新螢屏 html 字號設定成 50px
*/
@media screen and (min-width: 0) and (max-width: 320px) {
/* 螢屏寬度為 0 -320 之間的 使用以下 css樣式 */
html {
/* html 標簽的 字號 = 320px(新螢屏寬) * 100px(舊螢屏字號) / 750(舊螢屏寬) */
font-size: 42.666666666666664px;
}
}
@media screen and (min-width: 321px) and (max-width: 375px) {
/* 螢屏寬度 321 - 375之間的 */
html {
/* html 標簽的 字號 = 375px(新螢屏寬) * 100px(舊螢屏字號) / 750(舊螢屏寬) */
font-size: 50px;
}
}
@media screen and (min-width: 376px) and (max-width: 414px) {
/* 螢屏寬度 376px - 414px */
html {
/* html 標簽的 字號 = 414px(新螢屏寬) * 100px(舊螢屏字號) / 750(舊螢屏寬) */
font-size: 55.2px;
}
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
</html>
方法四
通過js計算html字體大小rem,來適應螢屏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>通過js計算rem</title>
<style>
</style>
<style>
*{
margin: 0;
padding: 0;
}
.box{
width: 7.5rem;
height: 1rem;
background-color: pink;
}
</style>
</head>
<body>
<div class="box"></div>
<script>
function rem(){
// 獲取html
const html = document.documentElement;
// 獲取視口大小
const width = html.getBoundingClientRect().width;
// 計算fontsize取值,設計圖的尺寸 一般都是 750px，
html.style.fontSize = width / 7.5 +"px";
}
rem();
</script>
</body>
</html>
方法五
通過設計meta來縮放視口大小
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script>
function fixLayout() {
//獲取視口大小
const width = window.screen.width;
//設計圖一般750px，以750為準
const fixWidth = 750;
//視口大小除設計圖大小，求出縮放比
const ratio = width / fixWidth;
//獲取meta元素
let meta = document.querySelector('meta[name=viewport]');
// 縮放的是視口
meta.setAttribute(
'content',
'width=' +
fixWidth +
', initial-scale=' +
ratio +
', maximum-scale=' +
ratio +
', user-scalable=no'
);
}
fixLayout();
window.addEventListener('resize', fixLayout);
</script>
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 750px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/226883.html
標籤：其他