移動端流式布局-有解無憂

移動端流失布局

移動端除錯方法
- Chrome Devtools（谷歌瀏覽器）的模擬手機除錯
- 搭建本地web服務器，手機和服務器一個局域網內，通過手機訪問服務器
- 使用外網服務器，直接ip或域名訪問

視口（viewport）就是瀏覽器顯示頁面內容的螢屏區域，視口可以分為布局視口、視覺視口和理想視口

布局視口layout viewport
- 一般移動設備的瀏覽器都是默認設定了一個布局視口，用于解決早期的PC端頁面在手機上顯示的問題
- IOS\Android基本都將這個視口解析度設定為989px，所以PC上網頁大多都能在手機上呈現，只不過元素看上去很小，一般默認可以通過手動縮放網頁
視覺視口 visual viewport
- 字面意思，他是用戶正在看到的網站的區域，注意：是網站的區域
- 我們可以通過縮放去操作視覺視口，但不會影響視口，布局視口仍保持原來的寬度
理想視口ideal viewport
- 為了是網站在移動端有最理想的瀏覽和閱讀寬度而設定
- 理想視口，對設備來講，是最理想的視口尺寸
- 需要手動填寫meta視口標簽通知瀏覽器操作
- meta視口標簽的主要目的：布局視口的寬度應該與理想視口的寬度一致，簡單理解就是設備有多寬，我們布局的視口就有多寬

meta視口標簽

<meta name="viewport" content="width=device-width,user-scalable=no,initail-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">

屬性	解釋說明
width	寬度設定的是viewport寬度，可以設定device-width特殊值
initial-scale	初始縮放比，大于0的數字
maximum-scale	最大縮放比，大于0的數字
minimum-scale	最小縮放比
user-scalable	用戶是否可以縮放，yes或者no（1或0）

標準的viewport設定
- 視口寬度和設備保持一致
- 視口的默認縮放比例1.0
- 不允許用戶自行縮放
- 最大允許的縮放比例1.0
- 最小允許的縮放比例1.0

二倍圖

物理像素點指的是螢屏顯示的最小顆粒，是物理真實存在，這是廠商在出廠時就設定好了，比如蘋果6\7\8是750*1334
我們開發時候的1px不是一定等于1個物理像素的
PC端頁面，1個px等于1個物理像素的，但是移動端就不盡相同
一個px的能顯示的物理像素點的個數，稱為物理像素比或螢屏像素比

背景縮放 background-size

background-size 屬性規定背景影像的尺寸

background-size：背景圖片寬度  背景圖片高度；

屬性	說明
單位	長度\|百分比\|cover\|contain
cover	把背景圖片擴展至足夠大，以使背景圖片完全覆寫北京區域
contain	把背景影像擴展至最大尺寸，以使齊寬度和高度完全適應內容區域

物理像素&物理像素比
- PC端和早期的手機螢屏/普通手機螢屏：1CSS像素=1物理像素
- Retine(視網膜螢屏)是一種顯示技術，可以將把更多的物理像素壓縮至一塊螢屏里，從而達到更高的解析度，并提高螢屏顯示的細膩程度
多倍圖
- 對于一張50px*50px的圖片，在手機Retina屏中打開，按照剛才的物理像素比會放大倍數造成圖片模糊
- 在標準的viewport設定，使用倍圖來提高圖片質量，解決在高清設備中的模糊問題
- 通常使用二倍圖，因為IPhone6/7/8的影響，但是現在還存在3倍圖4倍圖的情況，這個看實際來發公司需求
- 背景圖片注意縮放問題
移動端主流方案
- 單獨制作移動端頁面（主流）
  - 京東商城手機版
  - 淘寶觸屏版
  - 蘇寧易購手機版
  - 通常情況下，網址域名前面加m（mobile）可以打開移動端，通過判斷設備，如果是移動設備打開，則跳移動端頁面
- 回應式頁面兼容移動端
  - 三星手機官網
  - 通過判斷螢屏寬度來改變樣式，以適應不同終端
  - 缺點：
    - 制作麻煩，需要花費很大的精力調兼容性問題
移動端技術解決方案
- 移動端瀏覽器
  - 移動端瀏覽器基本以webkit內核為主，因此我們就考慮webkit兼容問題
  - 我們可以放心使用H5標簽和CSS樣式
  - 同時我們瀏覽器的私有前綴我們只需要考慮添加wenkit即可
- CSS初始化normalize.css
  - 移動端CSS初始化推薦使用normalize.css
    - Normalize.css:保護了有價值的默認值
    - Normalize.css:修復了瀏覽器的bug
    - Normalize.css:是模塊化
    - Normalize.css：擁有詳細的檔案
- 特殊樣式
  - ```
  /**CSS3盒子模型/
  box-sizing:border-box;
  -webkit-box-sizing:border-box;
  /*點擊高亮我們需要清除  */
  -webkit-appearance:none;
  /*禁用長安頁面時的彈出選單*/
  ima,a{
  -webkit-touch-callout:none;
  }
```
移動端技術選型
- 流式布局（百分比布局）
  - 流式布局，就是百分比布局，也稱為非固定像素布局
  - 通過盒子的寬度設定成百分比來根據螢屏的寬度進行伸縮，不受固定相素的限制，內容向兩側填充，
  - 流式布局方式是移動web開發使用的比較常見的布局方式
  - max-width 最大寬度（max-height 最大高度）
  - mix-width 最大寬度（mix-height 最大高度）

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/96563.html

標籤：Html/Css

上一篇：堆疊（堆疊）背景關系

下一篇：飛機跑道進度條