CSS 響應式布局的方法

參考鏈結

flex布局

柵格系統

根據裝置視口尺寸選擇性生效

**查詢可針對不同裝置場景使用不同css，一般柵格系統和多套**邏輯匹配頁面是都要用**查詢來確定頁面大小。

**查詢技術的原理：通過匹配不同螢幕裝置的特徵,讓不同特徵下的css**生效。

常用匹配特徵media featureswidth/height: 瀏覽器寬高

max-width：表示小於最大寬度時生效

min-width：表示大於最小寬度時生效

device-width/device-height: 裝置螢幕解析度寬高

resolution: 裝置解析度

orientation：portrait(縱向),高度大於等於寬度時，landscape(橫向),高度小於寬度時

特徵匹配操作符

當**型別匹配且表示式為真的時候，對應style就會起作用:

and

@media
(min-width
: 700px) and (
orientation
: landscape)
當瀏覽器寬度大於等於700px且為橫向時css**生效

逗號分隔表示or

@media
(max-width
: 500px), handheld and (
orientation
: landscape)
當瀏覽器寬度小於等於500px或者手持裝置且為橫向時生效

link 設定media屬性


rel=
"stylesheet"
type
="text/css"
href
="styleb.css"
media
="screen and (min-width: 600px) and (max-width: 800px)"
>

picture 設定media屬性

傳統的布局方式：

浮動+position定位+display屬性對簡單布局需求可輕易實現，但對於絕對居中這種常見的場景的實現卻不太容易，同時浮動布局也會產生一些***效果。

flex彈性布局，用來為盒狀模型提供最大的靈活性，可以簡便、完整、響應式地實現各種頁面布局。目前，它已經得到了所有瀏覽器的支援。

任何乙個容器元素都能指定成flex容器

塊級元素：display:flex

行內元素也能使用flex布局:display:inline-flex;

使用flex布局的元素稱為 flex 容器（flex container），簡稱"容器"。它的所有子元素自動成為容器成員，稱為 flex 專案（flex item），簡稱"專案"。

容器中有兩個軸線，水平的主軸（main axis）和垂直的交叉軸（cross axis）。

主軸的開始位置（與邊框的交叉點）叫做main start，結束位置叫做main end；交叉軸的開始位置叫做cross start，結束位置叫做cross end。專案預設沿主軸排列。單個專案佔據的主軸空間叫做main size，佔據的交叉軸空間叫做cross size。

flex container容器的6個屬性

flex-direction 方向 row(行排列預設)/row-reverse/column(縱向)/column-reverse flex-direction:row時主軸為x方向/column時主軸為y方向 flex-wrap 換行 nowrap(預設不換行)/wrap/ flex-flow 上面兩個屬性的簡寫 flex-flow:row wrap 上面兩個屬性可寫成一行

justify-content 主軸對齊方式 :

space-between(多餘空間放中間)

space-around(多餘空間放兩邊)

flex-start(item元素靠近主軸起點)

flex-end(item元素靠近主軸終點)

center(item元素居中)

align-items 交叉軸對齊方式

stretch伸展(預設值，前提是item元素寬/高度不確定)，所有元素寬/高度都撐滿整個container

flex-start(item元素靠近交叉軸起點)

flex-end(item元素靠近交叉軸終點)

center(item元素居中)

baseline (item元素第一行文字的baseline對齊)

align-content 多軸線在交叉軸方向的對齊方式（多行/多列），為什麼不是主軸，因為已經換行了是多行啊。

flex-start item靠近交叉軸起點

flex-end item元素靠近交叉軸終點

center item元素靠近交叉軸中心點

space-between item元素與交叉軸兩端對齊

space-around item元素每根軸線兩側間隔相等，軸線之間的間隔比軸線與邊框的間隔大一倍

stretch (預設值)item元素佔滿整個交叉軸

flex item的6個屬性

order item元素的順序

flex-grow 有多餘空間item元素分配比例，預設為0即不放大

flex-shrink 空間不夠時item元素收縮比例，預設為1即縮小一倍

flex-basis 指定item元素在分配多餘空間之前占用主軸大小main size（px/%）,預設auto即專案本身大小

flex 上面三個屬性的簡寫，注意順序

align-self 指定單個item元素自身的對齊方式，可覆蓋align-item屬性，預設auto繼承align-item的屬性

flex-start

flex-end

center

baseline

stretch

柵格系統是一種自適應頁面的布局方式，用於通過一系列的行（row）與列（column）的組合來建立頁面布局，實際要展示的內容可以放入這些建立好的柵格中。當頁面寬度發生改變時，每個柵格的大小會自動調整以適應頁面尺寸。

將頁面中每行布局分成12個等份，每一等份即乙個grid。1個grid佔1/12，2個grid佔2/12，依此類推。頁面上所有grid由父容器container包裹，所有grid設定浮動或者設定成行內元素保持在一行，一行排列不下時自動換行。所有grid設定成border-box。

定義不同螢幕尺寸時grid不同的css class名稱，比如:

預設螢幕尺寸時使用:grid-df-1,grid-df-2

螢幕小尺寸使用：grid-sm-1,grid-sm-2

螢幕中等尺寸使用：grid-md-1,grid-md-2

螢幕大尺寸使用：grid-lg-1,grid-lg2

用**查詢

@media screen and ( min-width :768px) 限制不同瀏覽器寬度（即不同螢幕尺寸）時container的固定寬度。同時設定不同螢幕尺寸時，grid對應的css 寬度比例。

設定每個grid在不同螢幕尺寸時需要佔的格數。這時media queries會在不同螢幕尺寸的大小時，讓每個grid顯示應有的比例。比如

即該div在預設螢幕尺寸時佔1格，在sm尺寸時佔12格，在md尺寸時佔3格，在lg尺寸時佔6格

**示例：

@media screen and ( min-width :768px) .grid-sm-1 .grid-sm-2 .grid-sm-3 .grid-sm-4 .grid-sm-5 .grid-sm-6

CSS 響應式布局的方法

css 響應式布局

CSS 響應式布局

css 響應式布局

CSS 響應式布局的方法

css 響應式布局

CSS 響應式布局

css 響應式布局

相關推薦