第五篇：移動端開發(fā)

時間：2023-05-31 06:39:02 | 來源：網(wǎng)站運營

時間：2023-05-31 06:39:02 來源：網(wǎng)站運營

移動端瀏覽器

• 國內(nèi)的uc和qq，百度等手機瀏覽器都是基于webkit修改的內(nèi)核，國內(nèi)尚無自主研發(fā)的內(nèi)核
• 正常兼容移動端主流瀏覽器處理webkit內(nèi)核即可

手機屏幕現(xiàn)狀

• 移動端設(shè)備的尺寸非常多，碎片化嚴重
• 安卓的設(shè)備有很多種分辨率，還有2k、4k的屏幕
• 蘋果手機不同的型號也是不同的尺寸跟分辨率
• 作為開發(fā)者通常不需要關(guān)注這些分辨率，我們常用的尺寸就是px

視口

• 視口就是瀏覽器顯示頁面內(nèi)容的屏幕區(qū)域，視口分為布局視口、視覺視口、和理想視口

布局視口 layout viewport

• 一般移動端設(shè)備的瀏覽器都默認了一個布局視口，用于解決早期pc端頁面在手機端顯示的問題
• ios、安卓基本都將這個視口分辨率設(shè)置為980px，所以pc上網(wǎng)頁大多都能在手機上展示，不過頁面元素看上去很小，一般默認可以通過手動縮放網(wǎng)頁

視覺視口 visual viewport

• 字面意思，它是用戶正在看到的的網(wǎng)站區(qū)域
• 我們可以通過縮放去操作視口，但不會影響布局視口，布局視口人保持原來的寬度

理想視口 ideal viewport

• 為了是網(wǎng)站在移動端有最理想的瀏覽和閱讀寬度二設(shè)定
• 理想視口，對設(shè)備來說是最理想的視口尺寸
• 需要手動添加meta視口標簽通知瀏覽器操作
• meta視口標簽的主要目的有：布局視口的寬度應(yīng)該與理想視口的寬度一致，簡單的理解就是設(shè)備多款我們的布局視口就有多寬

mete視口標簽

標準的viewport參數(shù)設(shè)置

• 視口的寬度與設(shè)備的寬度一致
• 視口默認的縮放比為1.0
• 不允許用戶自行縮放
• 最大允許縮放比1.0
• 最小允許縮放比1.0

物理像素與物理像素比

• 物理像素點是指平布顯示的最小粒度，是物理真是存在的。在是在廠商處長時就設(shè)置好了的。
• 我們開發(fā)的時候1px不一定等于1個物理像素
• pc端的1px等于一個物理像素，但是移動端就不一定
• 一個px的能顯示的物理像素點的個數(shù)，稱為物理像素比，或者屏幕像素比
• pc單和早期的手機1css像素=1物理像素
• retina（視網(wǎng)膜屏幕）是一種顯示技術(shù)，可以吧更多的物理像素點壓縮到一塊屏幕里
• 從而達到更好的分辨率，并提升屏幕的細膩程度

多倍圖

• 對于一張50px*50px的圖片在retina屏幕中打開，按照剛才的物理像素會方法，會造成視覺模糊
• 在標準的viewport設(shè)置中，使用高倍圖來提高圖片的質(zhì)量
• 通常情況下使用二倍圖，偶爾會有3倍或者4被圖，這個根據(jù)實際情況
• 在背景圖的情況下要注意縮放

移動端主要的方案

• 單獨制作移動端頁面-主流，目前國內(nèi)幾乎所有的移動端都是單獨制作。通常情況下，在網(wǎng)址域名前面在上m可以打開移動端?？梢耘袛嘣O(shè)備，如果是移動端設(shè)備則跳轉(zhuǎn)移動端頁面
• 響應(yīng)式兼容移動端-非主流。開發(fā)工作量太大且不容易維護，不推薦使用

瀏覽器

• 國內(nèi)移動端瀏覽器基本以webkit為主，隱藏我們就考慮webkit的兼容
• webkit內(nèi)核的環(huán)境下我們可以放心的使用h5及c3的新特性
• 同時我們?yōu)g覽器的私有淺醉我們只需要加上-webkit-即可
• css初始化移動端通常會選擇使用normalize.css

盒子模型

• 傳統(tǒng)盒子模型
• 變異盒子模型
• 移動端布局時通常會選用變異盒子模型

特殊樣式處理

• 注意當前瀏覽器版本已經(jīng)不需要再處理這些問題，如果出現(xiàn)可以選擇加上

流式布局

• 流式布局又稱百分布局，也稱非固定像素布局
• 可以通過將盒子的寬度設(shè)置成百分比，從而根據(jù)屏幕的寬度來進行伸縮，不受固定像素限制，內(nèi)容向兩側(cè)填充
• 流式布局的方式是移動端比較常見的一種布局方式

注意事項

• 制作過程中，需要定義頁面的最大和最小支持寬度
• max-width：最大寬度
• min-width：最小寬度

常用初始化樣式

flex布局

• 操作方便，布局簡單，移動端使用廣泛
• pc端瀏覽器支持較差
• 移動端布局時建議使用flex布局

flex布局原理

• flex是flexible box的簡寫，意思為彈性盒子，用來為盒子模型提供最大的靈活性，任何一個容器都可以指定為flex布局
• 當我們?yōu)楦负凶釉O(shè)置flex后，子元素的float，clear，vertical-align屬性會失效
• 采用flex布局的元素，稱為flex容器，他的所有子元素自動成為容器成員，簡稱項目
• flex布局原理就是通過給父盒子添加flex屬性，用來控制子盒子的位置和排列方式

flex布局父元素常見的屬性

• flex-direction：設(shè)置主軸的方向
• justify-content：設(shè)置主軸上子元素排列的方式
• flex-wrap：設(shè)置子元素是否換行
• align-conten：設(shè)置側(cè)軸上子元素的排列方式（多行）
• align-items：設(shè)置側(cè)軸上子元素的排列方式（單行）
• flex-flow：復(fù)合屬性，相當于同時設(shè)置了flex-direction和flex-wrap

flex-direction

• 在flex布局中，是分為主軸和側(cè)軸兩個方向
• 默認主軸方向就是x軸方向，水平向右。側(cè)軸是y軸方向默認垂直向下
• flex-direction的屬性決定主軸的方向
• 主軸和側(cè)軸是發(fā)生變化的，子元素是根據(jù)主軸來排列的

justify-content

• 定義了項目在主軸上的對齊方式
• 使用這個屬性前要確定好主軸是哪一個

flex-wrap

• 默認情況下，項目都排在一條線上
• 定義項目是否換行

align-items

• 控制子項在側(cè)軸的排列方式
• 在子項為單行的時候使用

align-content

• 設(shè)置子項在側(cè)軸的排列方式，當行下無效

flex-flow

• 復(fù)合屬性，相當于同時設(shè)置了flex-direction和flex-wrap
• flex-flow：row nowrap

flex布局子項常見屬性

• flex子項占的分數(shù)
• align-self 控制子項自己在側(cè)軸的排列方式
• order 定義指向的排列順序

flex

• flex屬性定義子項分配父元素剩余的空間，flex表示占有多少份
• 屬性為數(shù)字表示占總額的多少份。默認為0

align-self

• 允許單個項目有與其他項目不同的對齊方式，可以覆蓋align-items 屬性
• 默認值為auto，表示集成父元素的align-items 屬性，如果沒有父元素等同于strech

order

• 數(shù)值越小，排列越靠前

rem適配布局

• rem是一個相對的單位，類似于em，em是父元素字體的大小
• rem是基于html元素的字體大小
• 優(yōu)勢：父元素文字大小不可能一直，但是整個頁面只有html，可以很好的來控制整個頁面的元素大小比

媒體查詢

• 媒體查詢是css3的新語法
• 使用@media查詢可以針對不同的媒體類型定義不同的樣式
• @media可以針對不同的屏幕尺寸設(shè)置不同的樣式
• 當你瀏覽器重置大小的過程中，頁面也會根據(jù)瀏覽器的寬高重新渲染頁面

語法規(guī)范

• 使用@media開頭
• mediatype 媒體類型
• 關(guān)鍵字 and not only
• media feature 媒體特性必須有小括號包含

媒體類型

• mediatype，將不同的終端設(shè)備劃分成不同的類型，稱為媒體查詢

關(guān)鍵字

• and：可以將多個媒體特性鏈接到一起
• not：排除某個媒體類型
• or：可以測試多個媒體查詢條件
• only：指定某一個特定的媒體類型

媒體特性

• 每種媒體類型都有不同的特性，根據(jù)不同的媒體類型的媒體特性設(shè)置不同的展示風格

rem適配方案技術(shù)使用

• 媒體查詢+rem
• flexble+rem（推薦）

flexble

• 手機淘寶團隊退出的移動端適配庫
• 它的原理是將當前的設(shè)備劃分為10份，但是再不同的設(shè)備下比例還是一致的
• 我們要做的就是確定要當前設(shè)備html字體的大小就可以了
• 比如當前設(shè)計是750px，我們只需要把html的字體大小設(shè)置為75px就可以，里面元素的rem的值：元素的px/75
• 剩余的可以讓flexble.js去計算

viewport布局

css3中新的視口單位

• vw：1vw等于視口寬度的百分之1
• vh：1vh等于視口高度的百分之1
• vmin：選取vw和vh中最小的那個
• vmax：選取vw和vh中最大的那個

兼容性

• 在移動端 iOS 8 以上以及 Android 4.4 以上獲得支持
• 且在微信 x5 內(nèi)核中也得到完美的全面支持

備注

• viewport布局會在后續(xù)css預(yù)編譯less及sass介紹完成后介紹整體的方案