文章目錄

• 前言
• • RelatedWords(本章單詞)
• 一、響應式布局(Responsive layout)
• • 1.響應式布局是什么?
  • 2.怎么使用響應式？
  • • (1).棄用px改用em或%為單位
    • (2).使用viewport
• 二.媒體查詢(Media queries)
• • 1.media queries是什么?
• 三.彈性布局(flex)
• • 1.flex是什么?
  • 2.怎么使用flex？
• 四.多列布局(multi-column)
• • 1.multi-column是什么?
  • 2.怎么使用?

---

前言

RelatedWords(本章單詞)

viewport:視口 | media query:媒體查詢 | screen:屏幕 | flex:彎曲、收縮
|direction：方向、趨勢 | flow：流動、連貫|width-device:設置寬度
|scale:縮放|justify:整理版面|column:列|rule:規定|gap:間隙|initial:最初

一、響應式布局(Responsive layout)

1.響應式布局是什么?

響應不同設備screen的適配，適應其screen size。

2.怎么使用響應式？

(1).棄用px改用em或%為單位

(2).使用viewport

viewport屬性：

屬性說明

width	設置layout viewport寬度為一個正整數或字符串"width-device"
height	設置layout viewport的高度為一個正整數或字符串"height-device"
initial-scale	頁面初始值為一個數字,可以帶小數
user-scalable	是否允許用戶進行縮放,值no或yes,no不可以,yes可以
minimum-scale	最小縮放值為一個數字,可以帶小數
maximum-scale	最大縮放值為一個數字,可以帶小數

viewport語法

<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0"/>

meta標簽作用是讓當前視口的寬度等于設備寬度

二.媒體查詢(Media queries)

1.media queries是什么?

是相應式布局的一個利器,一般主要作用是設置瀏覽器分辨率,還有其他(A設備寬和高,B渲染窗口寬和高C設備手持方向D畫面比例E設備比例G對象顏色或顏色列表)
media queries屬性：

屬性說明

all	所有設備
braille	盲文
projection	幻燈片
tv	電視

…
語法:

@midia 設備名 only (選取條件) not (選取條件) and (設備選取條件){css樣式規則}

在link中使用@media:

(1)適合普通分辨率桌面瀏覽器和橫屏ipad

<link rel="stylesheet" type="text/css" media="all and (max-width:1024px)" href=""/>

(2)適合低分辨率桌面瀏覽器和橫屏ipad

<link rel="stylesheet" type="text/css" media="all and (max-width:768px)" href=""/>

(3)適合橫屏iphone/android

<link rel="stylesheet" type="text/css" media="all and (max-width:480px)" href=""/>

(4)豎屏iphone/android

<link rel="stylesheet" type="text/css" media="all and (max-width:380px)" href=""/>

三.彈性布局(flex)

1.flex是什么?

彈性布局也稱為"伸縮盒子",使用flex可以創建對瀏覽器窗口相應良好的流動界面。

2.怎么使用flex？

flex屬性:

display:flex 值為flex創建彈性布局容器

flex-direction: 伸縮流方向(排列順序)

–

flex-direction: row水平方向與頁面文檔順序相同

flex-direction: row-reverse:水平,與頁面文檔順序相反

flex-direction: column:垂直,從上到下

flex-direction: column-reverse:垂直,從下到上

–

flex-wrap:伸縮流換行

flex-wrap: wrap:超出容器,自動換下一行

flex-wrap: wrap-reverse:超出換行,方向相反

flex-wrap: column-reverse:垂直,排列從下到上

–

組合為flex-flow:row wrap

–

justify-content:主軸對齊

justify-content:flex-start 位于開始

justify-conten:flex-end:位于結尾

justify-content:center 位于中間

justify-content:Spackle-between 行留空隙

justify-around:圍繞的都有空隙

–

align-items:側軸對齊

align-items:stretch拉伸項目

align-items:center:項目位于中心

align-items:flex-start:項目開頭

align-items:flex-end:項目結尾

–

baseline:位于容器基線

flex-flow:伸縮流,綜合了flex-direction和flex-wrap屬性

flex:分配子元素如何分配空間,是flex-grow,flex-shrink和flex-basis的簡寫,既伸縮性,默認值0 1 auto

order:子元素出現順序,默認值0

flex-group:一個數字,擴展比率

flex-shrink:一個數字,收縮比率

flex-basis:收縮基準值,值"auto" “inherit” 或"%,em,px" 任何其他長度單位數字

flex舉例代碼:

/*模擬實現柵格布局*/ .grid{display: flex;flex-flow: row nowrap;justify-content: space-around; } .grid-cell-1,.grid-cell-2,.grid-cell-3, .grid-cell-4,.grid-cell-5,.grid-cell-6{flex-shrink: 1;/*收縮比率*/} .grid-cell-1{flex-grow: 1;/*擴展比率*/ } .grid-cell-2{flex-grow: 2; } .grid-cell-3{flex-grow: 3; } .grid-cell-4{flex-grow: 4; } .grid-cell-5{flex-grow: 5; } .grid-cell-6{flex-grow: 6; } /*模擬內容區*/

四.多列布局(multi-column)

1.multi-column是什么?

輕松讓文本呈現多列顯示狀態

2.怎么使用?

multi-column屬性:

column-count:3 ; 3列
column-fill:指定列與列的分布方式,balance(減少不同列的長度差異) / auto(順序填充)
column-gap:5px;指定列中間的距離
column-rule(column-rule-*簡寫屬性):寬度 樣式(border-style) 顏色
column-rule-color:值為顏色,列之間顏色
column-rule-style:樣式規則,與border-style值一樣
column-rule-with:列之間跨度
columns: column-span和column-width的簡寫
column-span:橫向跨多少列,取值none和all
column-width:指定列寬

總結

以上是生活随笔為你收集整理的关于HTML几种简单布局方式的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。