響應式佈局的各種基礎操作
0.基本概念
採用 Flex 佈局的元素,稱為 Flex 容器(flex container),簡稱"容器"。它的所有子元素自動成為容器成員,稱為 Flex 專案(flex item),簡稱"專案"。
1.傳統固定佈局:
實現方法:用width和height指定寬高px值、以及float浮動
缺點:有空白、且無法隨瀏覽器視窗變化而調整大小和佈局
2.百分比佈局:
實現方法:用width和height指定寬高%值,以及float浮動
缺點:有空白
3.Flex伸縮佈局:
實現方法:
3.1.給容器元素設定display:flex屬性
3.2.通過給【專案】(容器內子元素)的flex屬性,來設定專案比例。例如專案A的flex:1,專案B的flex:2,表示A與B的寬度為1:2
3.3.flex-direction排列方向(主軸):
row: 預設.把專案排列的主軸設定為水平方向,從左到右
row-reverse: 水平方向,從右到左
column: 垂直方向,從上到下
column-reverse: 垂直方向,從下到上
3.4.flex-wrap單行/多行:
nowrap: 預設.不換行
wrap: 換行
wrap-reverse: 倒序換行
3.5.justify-content主軸對齊方式:
flex-start: 向主軸起始位置靠攏對齊
flex-end: 向主軸結束位置靠攏對齊
center: 主軸方向居中
space-between: 兩頭對齊(中間空白)
space-around: 平均分佈(兩頭、中間空白)
3.6.align-items側軸對齊方式:
flex-start: 向主軸起始位置靠攏對齊
flex-end: 向主軸結束位置靠攏對齊
center: 主軸方向居中兼
baseline: 兩頭對齊(中間空白)
stretch: 平均分佈(兩頭、中間空白)
4.響應式佈局方案:
4.1.媒體型別:all、screen、print、tv、projection等
4.2.引入媒體型別兩種方式:
@media print{
div{height:10px}
}
<link rel="stylesheet" href="style1.css" media="print"/> 4.3.媒體特性 max-width: 最大寬度 min-width: device-width: 裝置螢幕輸出寬度 device-height: 裝置螢幕輸出高度 width: 渲染介面寬度 height: 渲染介面高度 orientation: portrait橫屏/landspace豎屏 resolution: 解析度 color: 每種色彩位元組數 color-index: 色彩表中的色彩數 4.4.媒體查詢語法: @media [and/only/not] 媒體型別 and/only/not (媒體特性) {樣式} 【舉例】: 1.樣式用於電腦顯示屏和螢幕寬度小於1200px的裝置 @media screen and (max-width:1200px){樣式} 2.用於瀏覽器相容。用於支援媒體型別(screen)卻不識別媒體特性(max-width)的老瀏覽器 <link rel="stylesheet" href="sty.css" media="only screen and (max-width:500px)"/> 3.樣式用於除印表機和螢幕小於1200px之外的所有裝置 @media not print and (max-width:120px){樣式}
5.響應式佈局設計模式
佈局不變,
內容擠壓-拉伸
換行-平鋪
增減內容
佈局改變
模組位置變換
模組展示方式改變
模組數量改變
6.響應式佈局兩個前提:
6.1.能自動調整佈局(彈性佈局)
6.2.能自動感知裝置大小