文章目錄
- 標準的viewport設定
- 移動端技術選型
- 1.移動開發-流式布局
- 2.移動開發-flex布局
- 3.移動開發-rem適配布局
- rem基礎
- rem單位
- rem的優點
- 如何根據螢屏大小動態修改html中文字大小
- 媒體查詢
- 語法規范
- 引入資源
- 動態設定html標簽的font-size大小
- 計算rem公式
- rem適配技術方案
- 設定公共common.less檔案
- 在index.less中匯入common.less檔案
- rem適配方案flexible.js
- 4.移動開發-回應式布局
- 回應式開發原理
- 回應式布局容器
- bootstrap
標準的viewport設定
- 視口寬度和設備保持一致
- 視口的默認縮放比例1.0
- 不允許用戶自行縮放
- 最大允許的縮放比例1.0
- 最小允許的縮放比例1.0
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
移動端技術選型
1.單獨制作移動端頁面
- 流式布局（百分比布局）
- flex彈性布局
- less+rem+媒體查詢布局
- 混合布局
2.回應式頁面兼容移動端
- 媒體查詢
- bootstrap
1.移動開發-流式布局
百分比布局
- 盒子的寬度設定成百分比，根據螢屏的寬度來進行伸縮
2.移動開發-flex布局
flex-wrap：flex的專案默認在一條軸線上，不會換行，如果一行放不下，就會縮小專案寬度（就算設定了子元素寬度也沒用）flex：定義子專案分配剩余空間，用flex表示占多少份數
align-self：控制子專案自己在垂直方向上的對齊方式，可覆寫align-items屬性order：定義子專案的排列順序，數值越小，排列越靠前，默認為0
3.移動開發-rem適配布局
頁面布局能否隨螢屏大小變化而變化？
流式布局和flex布局主要針對于寬度布局，那么高度如何設定？
怎么樣讓螢屏發生變化時元素高度和寬度等比例縮放？
rem基礎
rem單位
rem是一個相對單位，類似于em，em是父元素字體大小(父元素設定font-size=12px;，子元素設定width:2rem;，則換成px表示就是24px)
不同的是rem的基準是相對于html元素的字體大小
比如，根元素(html)設定font-size=12px;，非根元素設定width:2rem;，則換成px表示就是24px
rem的優點
可以通過修改html的文字大小來改變頁面中元素的大小
如何根據螢屏大小動態修改html中文字大小
媒體查詢
Media Query
- 使用
@media查詢，可以針對不同的媒體型別定義不同的樣式 @media可以針對不同螢屏尺寸設定不同的樣式
語法規范
@media mediaType and|not|only (media feature) {
css code;
}
mediaType代表設備型別，and|not|only為條件，media feature為媒體特點，通常是寫設備的寬度(必須放在小括號里)
- mediaType 媒體型別
值：- all 用于所有設備
- print 用于列印機和列印預覽
- screen 用于電腦螢屏、平板電腦、智能手機
- 關鍵字
- and：可以將多個媒體特性連接到一起，相當于“且”的意思
- not：排除某個媒體型別，相當于“非“的意思，可以省略
- only：指定某個特定的媒體型別，可以省略
！書寫順序寬度從小到大更好
引入資源
當樣式比較多的時候，我們可以不同的媒體使用不同的樣式表，
直接在link標簽中判斷設備的尺寸，然后參考不同的css檔案
<link rel="stylesheet" href="./style320.css" media="screen and (min-width: 320px)">
<link rel="stylesheet" href="./style640.css" media="screen and (min-width: 640px)">
動態設定html標簽的font-size大小
我們把螢屏的尺寸劃分為相等的份數，例如現在螢屏尺寸為750px，劃分份數我們定為15等份，那么html標簽的font-size大小就設定成50px，如果螢屏尺寸是320px，那么html標簽的font-size大小就設定成21.33px
計算rem公式
rem = 頁面元素的px / html字體大小，注意最后單位會取第一個單位
例如：height: (88rem / 50);所以這里單位寫rem
rem適配技術方案
- 技術方案1
- less
- 媒體查詢
- rem
采取單獨制作移動頁面方案，以750px設計尺寸為例：
設定公共common.less檔案
在公共common.less檔案中設定好最常見的螢屏尺寸，利用媒體查詢設定不同的html字體大小
劃分份數定為15等份
在index.less中匯入common.less檔案
@import "common"
（@import匯入 把一個樣式檔案匯入到另一個樣式檔案里）
（link 把一個樣式檔案引入到html頁面里面）
- 技術方案2
- flexible.js
- rem
rem適配方案flexible.js
它的原理是將當前設備劃分為10等份，我們只需要確定好當前設備的html文字大小就可以
比如設計稿時750px，那么我們只需要把html文字大小設定為75px就可以
4.移動開發-回應式布局
回應式開發原理
使用媒體查詢針對不同寬度的設備進行布局和樣式的設定，從而適配不同設備的目的
設備劃分 尺寸區間
超小螢屏(手機) < 768px
小屏設備(平板) >=768px ~ <992px
中等螢屏(桌面顯示幕) >=992px ~ <1200px
寬屏設備(大桌面顯示幕) >=1200px
回應式布局容器
回應式需要一個父級作為布局容器，來配合子級元素實作變化效果
原理：在不同螢屏下，通過媒體查詢來改變這個布局容器的大小，再改變里面子元素的排列方式和大小，從而實作不同螢屏下，看到不同的頁面布局和樣式變化
常見的回應式尺寸劃分：
超小螢屏(手機，小于768px)：設定寬度為100%
小螢屏(平板，大于等于768px)：設定寬度為750px
中等螢屏(桌面顯示幕，大于等于992px)：設定寬度為970px
大螢屏(大桌面顯示幕，大于等于1200px)：設定寬度為1170px
bootstrap
bootstrap幫我們將布局容器寫好了，我們并不再需要去書寫媒體查詢代碼來改變布局容器的寬度
在不同設備下，需要改變布局容器里的內容時再用媒體查詢即可
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/354683.html
標籤：其他
上一篇：Flutter涼了嗎？
下一篇：移動開發技術——第七章章節自測