移動端的常見佈局方案
文章目錄
移動端的常見佈局方案
一. 移動端和PC端的區別？
2. 手機屏幕的現狀
2.1 視口
2.2 佈局視口 layout viewport
2.2視覺視口 visual viewport
2.3理想視口 ideal viewport
3. 移動端技術解決方案
3.1移動端公共樣式
3.2移動端特殊樣式
二. 移動web開發——flex佈局
1 . 傳統佈局和flex佈局對比
1.1傳統佈局
1.2 flex佈局
1.3 建議
2.0 flex佈局原理
3.0 父項常見屬性
3.1 flex-direction設置主軸的方向
3.2 justify-content 設置主軸上的子元素排列方式
3.3 flex-wrap設置是否換行
3.4 align-items 設置側軸上的子元素排列方式（單行 ）
3.5 align-content 設置側軸上的子元素的排列方式（多行）
3.6 align-content 和align-items區別
3.7 flex-flow 屬性是 flex-direction 和 flex-wrap 屬性的複合屬性
4.0 flex佈局子項常見屬性
4.1 flex 屬性
4.2 align-self控制子項自己在側軸上的排列方式
4.3 order 屬性定義項目的排列順序
三. 移動web開發之rem佈局
rem基礎
rem單位
媒體查詢
什麼是媒體查詢
媒體查詢語法規範
less 基礎
維護css弊端
Less 介紹
四.響應式佈局(暫時沒學懂)
一. 移動端和PC端的區別？
（1）PC考慮的是瀏覽器的兼容性，而移動端開發考慮的更多的是手機兼容性，因爲目前不管是android手機還是ios手機，一般瀏覽器使用的都是webkit內核，所以說做移動端開發，更多考慮的應該是手機分辨率的適配，和不同操作系統的略微差異化。
（2）在部分事件的處理上，移動端多出來的事件是觸屏事件，而缺少的是hover事件。 另外包括移動端彈出的手機鍵盤的處理，這樣的問題在PC端都是遇不到的。
（3）在佈局上，移動端開發一般是要做到佈局自適應的，我使用的一直是rem佈局，感覺很好。
（4）在動畫處理上，PC端由於要考慮IE的兼容性，所以通常使用JS做動畫的通用性會更好一些，但是CSS3做了很大的犧牲， 而在手機端，如果要做一些動畫、特效等，第一選擇肯定是CSS3， 既簡單、效率又高。
2. 手機屏幕的現狀
- 移動端設備屏幕尺寸非常多，碎片化嚴重。
- Android設備有多種分辨率：480x800, 480x854, 540x960, 720x1280，1080x1920等，還有傳說中的2K，4k屏。
- 近年來iPhone的碎片化也加劇了，其設備的主要分辨率有：640x960, 640x1136, 750x1334, 1242x2208等。
- 作爲開發者無需關注這些分辨率，因爲我們常用的尺寸單位是 px 。
2.1 視口
視口（viewport）就是瀏覽器顯示頁面內容的屏幕區域。 視口可以分爲佈局視口、視覺視口和理想視口。
2.2 佈局視口 layout viewport
一般移動設備的瀏覽器都默認設置了一個佈局視口，用於解決早期的PC端頁面在手機上顯示的問題。
iOS, Android基本都將這個視口分辨率設置爲 980px，所以PC上的網頁大多都能在手機上呈現，只不過元素看上去很小，一般默認可以通過手動縮放網頁。
2.2視覺視口 visual viewport
字面意思，它是用戶正在看到的網站的區域。注意：是網站的區域。
我們可以通過縮放去操作視覺視口，但不會影響佈局視口，佈局視口仍保持原來的寬度。
2.3理想視口 ideal viewport
爲了使網站在移動端有最理想的瀏覽和閱讀寬度而設定
理想視口，對設備來講，是最理想的視口尺寸
需要手動添寫meta視口標籤通知瀏覽器操作
meta視口標籤的主要目的：佈局視口的寬度應該與理想視口的寬度一致，簡單理解就是設備有多寬，我們佈局的視口就多寬
總結：我們開發最終會用理想視口，而理想視口就是將佈局視口的寬度修改爲視覺視口
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
3. 移動端技術解決方案
3.1移動端公共樣式
移動端 CSS 初始化推薦使用 normalize.css/
Normalize.css：保護了有價值的默認值
Normalize.css：修復了瀏覽器的bug
Normalize.css：是模塊化的
Normalize.css：擁有詳細的文檔
官網地址： http://necolas.github.io/normalize.css/
3.2移動端特殊樣式
/*CSS3盒子模型*/
box-sizing: border-box;
-webkit-box-sizing: border-box;
/*點擊高亮我們需要清除清除 設置爲transparent 完成透明*/
-webkit-tap-highlight-color: transparent;
/*在移動端瀏覽器默認的外觀在iOS上加上這個屬性才能給按鈕和輸入框自定義樣式*/
-webkit-appearance: none;
/*禁用長按頁面時的彈出菜單*/
img,a { -webkit-touch-callout: none; }
二. 移動web開發——flex佈局
1. 傳統佈局和flex佈局對比
1.1傳統佈局
- 兼容性好
- 佈局繁瑣
- 侷限性，不能再移動端很好的佈局
1.2 flex佈局
- 操作方便，佈局極其簡單，移動端使用比較廣泛
- pc端瀏覽器支持情況比較差
- IE11或更低版本不支持flex或僅支持部分
1.3 建議
- 如果是pc端頁面佈局，還是採用傳統方式
- 如果是移動端或者是不考慮兼容的pc則採用flex
2.0 flex佈局原理
- flex 是 flexible Box 的縮寫，意爲"彈性佈局"，用來爲盒狀模型提供最大的靈活性，任何一個容器都可以指定爲 flex 佈局。
- 當我們爲父盒子設爲 flex 佈局以後，子元素的 float、clear 和 vertical-align 屬性將失效。
- flex佈局又叫伸縮佈局 、彈性佈局 、伸縮盒佈局 、彈性盒佈局
- 採用 Flex 佈局的元素，稱爲 Flex 容器（flex
container），簡稱"容器"。它的所有子元素自動成爲 容器成員，稱爲 Flex 項目（flexitem），簡稱"項目"。
總結：就是通過給父盒子添加flex屬性，來控制子盒子的位置和排列方式。
3.0 父項常見屬性
- flex-direction：設置主軸的方向
- justify-content：設置主軸上的子元素排列方式
- flex-wrap：設置子元素是否換行
- align-content：設置側軸上的子元素的排列方式（多行）
- align-items：設置側軸上的子元素排列方式（單行）
- flex-flow：複合屬性，相當於同時設置了 flex-direction 和 flex-wrap
3.1 flex-direction設置主軸的方向
- 在 flex 佈局中，是分爲主軸和側軸兩個方向，同樣的叫法有 ： 行和列、x 軸和y 軸
- 默認主軸方向就是 x 軸方向，水平向右
- 默認側軸方向就是 y 軸方向，水平向下
注意：主軸和側軸是會變化的，就看 flex-direction 設置誰爲主軸，剩下的就是側軸。而我們的子元素是跟着主軸來排列的。
3.2 justify-content 設置主軸上的子元素排列方式
3.3 flex-wrap設置是否換行
- 默認情況下，項目都排在一條線（又稱”軸線”）上。flex-wrap屬性定義，flex佈局中默認是不換行的。
- nowrap 不換行
- wrap 換行
3.4 align-items 設置側軸上的子元素排列方式（單行 ）
- 該屬性是控制子項在側軸（默認是y軸）上的排列方式 在子項爲單項（單行）的時候使用
- flex-start 從頭部開始
- flex-end 從尾部開始
- center 居中顯示
- stretch 拉伸
3.5 align-content 設置側軸上的子元素的排列方式（多行）
設置子項在側軸上的排列方式 並且只能用於子項出現 換行 的情況（多行），在單行下是沒有效果的。
3.6 align-content 和align-items區別
- align-items 適用於單行情況下， 只有上對齊、下對齊、居中和 拉伸
- align-content適應於換行（多行）的情況下（單行情況下無效）， 可以設置 上對齊、下對齊、居中、拉伸以及平均分配剩餘空間等屬性值。
- 總結就是單行找align-items 多行找 align-content
3.7 flex-flow 屬性是 flex-direction 和 flex-wrap 屬性的複合屬性
flex-flow:row wrap;
4.0 flex佈局子項常見屬性
- flex子項目佔的份數
- align-self控制子項自己在側軸的排列方式
- order屬性定義子項的排列順序（前後順序）
4.1 flex 屬性
flex 屬性定義子項目分配剩餘空間，用flex來表示佔多少份數。
.item {
flex: <number>; /* 默認值 0 */
}
4.2 align-self控制子項自己在側軸上的排列方式
align-self 屬性允許單個項目有與其他項目不一樣的對齊方式，可覆蓋 align-items 屬性。
默認值爲 auto，表示繼承父元素的 align-items 屬性，如果沒有父元素，則等同於 stretch。
span:nth-child(2) {
/* 設置自己在側軸上的排列方式 */
align-self: flex-end;
}
4.3 order 屬性定義項目的排列順序
數值越小，排列越靠前，默認爲0。
注意：和 z-index 不一樣。
.item {
order: <number>;
}
三. 移動web開發之rem佈局
rem基礎
rem單位
rem (root em)是一個相對單位，類似於em，em是父元素字體大小。
不同的是rem的基準是相對於html元素的字體大小。
比如，根元素（html）設置font-size=12px; 非根元素設置width:2rem; 則換成px表示就是24px。
/* 根html 爲 12px */
html {
font-size: 12px;
}
/* 此時 div 的字體大小就是 24px */
div {
font-size: 2rem;
}
rem的優勢：父元素文字大小可能不一致， 但是整個頁面只有一個html，可以很好來控制整個頁面的元素大小。
媒體查詢
什麼是媒體查詢
媒體查詢（Media Query）是CSS3新語法。
- 使用 @media查詢，可以針對不同的媒體類型定義不同的樣式
- @media 可以針對不同的屏幕尺寸設置不同的樣式
- 當你重置瀏覽器大小的過程中，頁面也會根據瀏覽器的寬度和高度重新渲染頁面
- 目前針對很多蘋果手機、Android手機，平板等設備都用得到多媒體查詢
媒體查詢語法規範
- 用 @media開頭 注意@符號
- mediatype 媒體類型
- 關鍵字 and not only
- media feature 媒體特性必須有小括號包含
@media mediatype and|not|only (media feature) {
CSS-Code;
}
- mediatype 查詢類型
將不同的終端設備劃分成不同的類型，稱爲媒體類型
- 關鍵字
關鍵字將媒體類型或多個媒體特性連接到一起做爲媒體查詢的條件。
- and：可以將多個媒體特性連接到一起，相當於“且”的意思。
- not：排除某個媒體類型，相當於“非”的意思，可以省略。
- only：指定某個特定的媒體類型，可以省略。
-
媒體特性
每種媒體類型都具體各自不同的特性，根據不同媒體類型的媒體特性設置不同的展示風格。我們暫且瞭解三個。
注意他們要加小括號包含:
less 基礎
維護css弊端
CSS 是一門非程序式語言，沒有變量、函數、SCOPE（作用域）等概念。
- CSS 需要書寫大量看似沒有邏輯的代碼，CSS 冗餘度是比較高的。
- 不方便維護及擴展，不利於複用。
- CSS 沒有很好的計算能力
- 非前端開發工程師來講，往往會因爲缺少 CSS 編寫經驗而很難寫出組織良好且易於維護的 CSS 代碼項目。
Less 介紹
Less（LeanerStyle Sheets 的縮寫）是一門 CSS擴展語言，也成爲CSS預處理器。
做爲 CSS的一種形式的擴展，它並沒有減少CSS的功能，而是在現有的CSS語法上，爲CSS加入程序式語言的特性。
它在CSS 的語法基礎之上，引入了變量，Mixin（混入），運算以及函數等功能，大大簡化了 CSS 的編寫，並且降低了 CSS的維護成本，就像它的名稱所說的那樣，Less可以讓我們用更少的代碼做更多的事情。
Less安裝
教程：
Node下安裝less
Less 使用之變量
變量是指沒有固定的值，可以改變的。因爲我們CSS中的一些顏色和數值等經常使用。
@變量名:值;
- 必須有@爲前綴
- 不能包含特殊字符
- 不能以數字開頭
- 大小寫敏感
@color: pink;
Less 編譯 vocode Less 插件
Easy LESS 插件用來把less文件編譯爲css文件
只要保存一下Less文件，會自動生成CSS文件。
Less 嵌套
// 將css改爲less
#header .logo {
width: 300px;
}
#header {
.logo {
width: 300px;
}
}
如果遇見 （交集|僞類|僞元素選擇器） ，利用&進行連接
a:hover{
color:red;
}
a{
&:hover{
color:red;
}
}
Less 運算
任何數字、顏色或者變量都可以參與運算。就是Less提供了加（+）、減（-）、乘（*）、除（/）算術運算。
/*Less 裏面寫*/
@witdh: 10px + 5;
div {
border: @witdh solid red;
}
/*生成的css*/
div {
border: 15px solid red;
}
/*Less 甚至還可以這樣 */
width: (@width + 5) * 2;
- 乘號（*）和除號（/）的寫法
- 運算符中間左右有個空格隔開 1px + 5
- 對於兩個不同的單位的值之間的運算，運算結果的值取第一個值的單位
- 如果兩個值之間只有一個值有單位，則運算結果就取該單位
四.響應式佈局(暫時沒學懂)
保留
相信好記性比如爛筆頭；沒敲無數遍代碼實際體驗；一切都是浮雲 _(¦3」∠)_