二、5移动端网页适配
生活随笔
收集整理的這篇文章主要介紹了
二、5移动端网页适配
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
移動端網頁適配
文章目錄
- 移動端網頁適配
- 屏幕尺寸
- PC分辨率
- 視口
- rem
- rem單位尺寸
- 媒體查詢
- flexible.js
- 長度單位：vw/vh
屏幕尺寸
屏幕對角線的長度，一般用英寸來度量
PC分辨率
1920 * 1080 1366 * 768- 硬件分辨率 物理分辨率 不可改變，固定的
- 軟件分辨率 邏輯分辨率 由軟件驅動決定（任意改的）
移動端主流設備分辨率
| iPhone6/7/8 | 750 * 1334 | 375 * 667 | 2:1 |
視口
- 移動端網頁寬度默認：980px
- PC 端網頁寬度和屏幕寬度相同（寫代碼參考邏輯分辨率，因為物理分辨率一般3000多，不能調整。邏輯分辨率用戶可以自己可以放大）
視口的作用:
網頁寬度 = 邏輯寬度視口標簽
<meta name="viewport" content="width=device-width, initial-scale=1.0" />二倍圖（能夠使用像素大廚軟件測量二倍圖中元素的尺寸）：750px （二倍圖尺寸大，分辨率高，寫移動端網頁二倍圖居多）
設計師給二倍圖，寫代碼參考375，在像素大廚中將設計圖切換成二倍圖，再去測量
移動適配
解決方案：
- rem 目前
- vw/vh 未來（目前b站在用了）
rem
rem 單位
- 相對單位
- rem 單位是相對于 HTML 標簽的字號計算結果
- 1rem=1HTML 字號大小
實現效果：屏幕寬度不同，網頁元素尺寸不同（等比縮放）
示例:
<body><style>/* html字號默認 16px */.box {/* 16 * 5 = 80px */width: 5rem;/* 16 * 2 = 32px */height: 2rem;background-color: skyblue;}</style><div class="box"></div> </body>使用 rem 需要解決的問題
- 不同設備屏幕尺寸，設置不同的 HMLT 標簽字號
- 設備寬度不同，HTML 標簽字號設置多少合適
rem 布局方案中，將網頁等分成 10 份，HTML 標簽的字號為視口寬度 1/10
rem單位尺寸
確定設計稿對應的設備 HTML 標簽字號
基準根字號 = 設備寬度（視口寬度）/ 10rem單位的尺寸 = px單位數值 / 基準根字號eg:設計稿設備寬度 375px 設計稿元素寬度 75px rem寬度 = 75px / (375px / 10) = 2rem媒體查詢
媒體查詢 根據不同的視口寬度，設置差異化 css 樣式
@media (媒體特性) {/* css樣式 */ }/* eg: */@media (width: 375px) {html {font-size: 37.5px;} }@media (width: 320px) {html {font-size: 32px;} }示例:
<html><head><meta name="viewport"content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"> </head><body><style>@media (width: 375px) {html {font-size: 37.5px;}}@media (width: 320px) {html {font-size: 32px;}}.box {width: 5rem;height: 2rem;background-color: skyblue;}</style><div class="box"></div> </body></html>flexible.js
flexible.js 適配移動端的 js 框架
原理：根據不同的視口寬度，給網頁 html 根節點設置不同的 font-size
示例:
<html><head><meta name="viewport"content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"> </head><body><style>.box {width: 5rem;height: 2rem;background-color: skyblue;}</style><div class="box"></div><script src="https://cdn.jsdelivr.net/npm/amfe-flexible@2.2.1/index.min.js"></script> </body></html>長度單位：vw/vh
- 相對單位
- 相對視口的尺寸計算結果
含義
- vw: viewport width
- vh: viewport height
換算方式
1vw = 1/100視口寬度 1vh = 1/100視口高度vw單位的尺寸 = px單位數值 / ( 1 / 100 * 視口寬度)例如：
357px寬的設備1vw = 357px / 100 = 3.57px // index.less // 375的設計稿：68 * 29 .box {width: (68 / 3.75vw);height: (29 / 3.75vw); }統一使用 vw 或者 vh 作為單位
總結
以上是生活随笔為你收集整理的二、5移动端网页适配的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 近年图像翻译先进模型小结
- 下一篇： [unityshader]制作能量护盾以