關於移動端

視口

總共可分爲3個視口：佈局視口，視覺視口，理想視口

佈局視口：
1. 通常移動設備的瀏覽器都默認設置一個佈局視口，用於解決早起的PC端頁面在手機上顯示的問題
2. 這個視口的分辨率基本都設置爲980px

視覺視口：
用戶所看到的網站區域

理想視口：
使得網站在移動端有最理想的瀏覽和閱讀寬度而設定的，是最理想的視口尺寸
要手動添加meta視口標籤，主要目的：佈局視口的寬度應該與理想視口的寬度一致
meta標籤：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
一些屬性值說明：（更多屬性說明可到w3c，mdn等官網查詢）

一些手機設備的物理像素比(dpr)

物理像素比 = 物理像素 / 邏輯像素 
物理像素：就是設備所顯示的像素（手機截圖在ps中量取出來的大小）
邏輯像素：頁面在css頁面中書寫的像素

因爲在手機設備中，會對物理像素放大倍數，就會致使圖片模糊
因此就要用到倍圖

移動端的css樣式初始化文件

normailze.css（下載地址：https://necolas.github.io/normalize.css/）

單獨製做移動端的頁面

流式佈局

流式佈局是百分比佈局
設置盒子寬度的百分比來根據屏幕寬度進行縮放，不受固定像素影響，內容向兩側填充
要設置盒子的max-width，min-width（保證其縮放在合理範圍內）

flex佈局（推薦）

flex能爲盒狀模型提供最大的靈活性，任何一個容器均可以指定爲flex佈局
對父容器設置的屬性：

對子項設置的屬性：

適配佈局（推薦）

在移動端中的內容按照不一樣屏幕大小自動等比例縮放的一種佈局計算方式
可以隨着屏幕大小而自適應去變化，元素的高度和寬度等比例縮放

rem單位：
em單位和rem單位的區別：
em是相對父元素的字體大小，rem是相對根元素（html元素）的字體大小
優勢：可經過修改html裏面的文字大小來改變頁面中的元素大小，能夠實現總體控制


媒體查詢（CSS3新語法）：
使用@media查詢，可針對不一樣的媒體類型定義不一樣的樣式
               可針對不一樣的屏幕尺寸設置不一樣的樣式
               重置瀏覽器大小時，頁面會根據瀏覽器的寬高度從新渲染頁面

語法：
@media mediatype(媒體類型) and/not/only (media feature 媒體特性){...} 
mediatype的取值：
all(全部設備)，print(打印設備)，screen(電腦屏幕，平板，手機等)
關鍵字：
and：可將多個媒體特性鏈接到一塊兒
not 排除某個媒體類型
only：指定某個特定的媒體類型
媒體特性：
1) width：輸出設備中頁面可見區域的寬度
2) min-width：輸出設備中頁面最小可見區域的寬度
3) max-width：輸出設備中頁面最大可見區域的寬度
e.g.
@media screen and (max-width:500px){...}    //在屏幕上頁面最大的寬度是500px，在頁面寬度爲500px內設置的樣式纔會生效（樣式只在屏幕寬度小於等於500像素才生效）

@media screen and (min-width:500px) and (max-width:1000px){...}    //在屏幕上頁面寬度爲500px到1000px，設置的樣式生效

媒體查詢通常按照從大到小或者從小到大的順序來去設置（最好是從小到大設置）

針對不一樣的媒體引入對應不一樣的CSS文件（直接在link判斷設備的尺寸，而後引入不一樣的CSS文件）
<link rel="stylesheet" media="mediatype and/only/not (media feature)" href="xxx">


rem和媒體查詢配合使用：
利用媒體查詢和rem能實現頁面的元素動態大小變化
e.g.

rem適配方案：
按照設計稿與設備寬度的比例，動態計算並設置html根標籤的font-size大小
CSS中，設計稿元素的寬，高，相對位置等的取值，按照同等比例換算爲rem單位的值

1. rem + 媒體查詢 + less
元素大小的rem取值：
公式：頁面元素的rem值=頁面元素的像素值(px) / (屏幕寬度 / 劃分的份數)
（屏幕寬度 / 劃分的份數 就是html的font-size大小，其中劃分的份數自定義（通常爲10,15））

2. flexible.js + rem
元素大小的rem取值：頁面元素的px值 / (屏幕寬度 / 10)
（劃分的份數默認劃分10等份，根元素的font-size會自動計算出來）

可利用vscode的px to rem & rpx (cssrem)插件，px自動轉換rem

響應式頁面兼容移動端

響應式佈局

根據瀏覽器寬度，分辨率，橫屏，豎屏等狀況來自動改變元素展現的一種佈局方式
一個頁面可以兼容多個終端

使用媒體查詢針對不一樣寬度的設備進行佈局和樣式的設置，從而適配不一樣設備的目的

響應式開發設備屏幕尺寸劃分：

要有一個響應式佈局的容器，顯示的子元素按照這個容器的大小而顯示相應的大小排列

平時的響應式尺寸劃分：（設置的寬度比屏幕要小一點是爲了中間區域居中，兩側空白，好看一點）

可經過使用bootstrap框架設計響應式佈局