流式布局

1. 移動端基礎(chǔ)

1.1瀏覽器現(xiàn)狀

1.2手機屏幕的現(xiàn)狀

1.3常見移動端屏幕尺寸

1.4移動端調(diào)試方法

2. 視口

2.1布局視口 layout viewport

2.2視覺視口 visual viewport

2.3理想視口 ideal viewport

2.4meta標簽

3. 二倍圖

3.1物理像素&物理像素比

3.2背景縮放background-size

4. 移動開發(fā)選擇和技術(shù)解決方案

4.1移動端主流方案

4.2移動端技術(shù)解決方案

4.3移動端大量使用 CSS3盒子模型box-sizing

4.4移動端特殊樣式

5. 移動端常見布局

flex布局

1.傳統(tǒng)布局和flex布局對比

1.1 傳統(tǒng)布局

1.2 flex布局

1.3 建議

2. flex布局原理

3.0 父項常見屬性

3.1 flex-direction設(shè)置主軸的方向

3.2 justify-content 設(shè)置主軸上的子元素排列方式

3.3 flex-wrap設(shè)置是否換行

3.4 align-items 設(shè)置側(cè)軸上的子元素排列方式（單行）

3.5 align-content 設(shè)置側(cè)軸上的子元素的排列方式（多行）

3.6 align-content 和align-items區(qū)別

3.7 flex-flow 屬性是 flex-direction 和 flex-wrap 屬性的復(fù)合屬性

4. flex布局子項常見屬性

4.1 flex 屬性

4.2 align-self控制子項自己在側(cè)軸上的排列方式

4.3 order 屬性定義項目的排列順序

5. 攜程網(wǎng)首頁案例制作

流式布局

1. 移動端基礎(chǔ)

1.1瀏覽器現(xiàn)狀

PC端常見瀏覽器：360瀏覽器、谷歌瀏覽器、火狐瀏覽器、QQ瀏覽器、百度瀏覽器、搜狗瀏覽器、IE瀏覽器。

移動端常見瀏覽器：UC瀏覽器，QQ瀏覽器，歐朋瀏覽器，百度手機瀏覽器，360安全瀏覽器，谷歌瀏覽器，搜狗手機瀏覽器，獵豹瀏覽器，以及其他雜牌瀏覽器。

國內(nèi)的UC和QQ，百度等手機瀏覽器都是根據(jù)Webkit修改過來的內(nèi)核，國內(nèi)尚無自主研發(fā)的內(nèi)核，就像國內(nèi)的手機操作系統(tǒng)都是基于Android修改開發(fā)的一樣。

總結(jié)：兼容移動端主流瀏覽器，處理Webkit內(nèi)核瀏覽器即可。

1.2手機屏幕的現(xiàn)狀

移動端設(shè)備屏幕尺寸非常多，碎片化嚴重。
Android設(shè)備有多種分辨率：480x800, 480x854, 540x960, 720x1280，1080x1920等，還有傳說中的2K，4k屏。
近年來iPhone的碎片化也加劇了，其設(shè)備的主要分辨率有：640x960, 640x1136, 750x1334, 1242x2208等。
作為開發(fā)者無需關(guān)注這些分辨率，因為我們常用的尺寸單位是 px 。

1.3常見移動端屏幕尺寸

aQ5y9O.png

1.4移動端調(diào)試方法

Chrome DevTools（谷歌瀏覽器）的模擬手機調(diào)試
搭建本地web服務(wù)器，手機和服務(wù)器一個局域網(wǎng)內(nèi)，通過手機訪問服務(wù)器
使用外網(wǎng)服務(wù)器，直接IP或域名訪問

2. 視口

視口（viewport）就是瀏覽器顯示頁面內(nèi)容的屏幕區(qū)域。視口可以分為布局視口、視覺視口和理想視口

2.1布局視口 layout viewport

一般移動設(shè)備的瀏覽器都默認設(shè)置了一個布局視口，用于解決早期的PC端頁面在手機上顯示的問題。

iOS, Android基本都將這個視口分辨率設(shè)置為 980px，所以PC上的網(wǎng)頁大多都能在手機上呈現(xiàn)，只不過元素看上去很小，一般默認可以通過手動縮放網(wǎng)頁。

aQ5r4K.png

2.2視覺視口 visual viewport

字面意思，它是用戶正在看到的網(wǎng)站的區(qū)域。注意：是網(wǎng)站的區(qū)域。

我們可以通過縮放去操作視覺視口，但不會影響布局視口，布局視口仍保持原來的寬度。

aQ5DN6.png

2.3理想視口 ideal viewport

為了使網(wǎng)站在移動端有最理想的瀏覽和閱讀寬度而設(shè)定

理想視口，對設(shè)備來講，是最理想的視口尺寸

需要手動添寫meta視口標簽通知瀏覽器操作

meta視口標簽的主要目的：布局視口的寬度應(yīng)該與理想視口的寬度一致，簡單理解就是設(shè)備有多寬，我們布局的視口就多寬

總結(jié)：我們開發(fā)最終會用理想視口，而理想視口就是將布局視口的寬度修改為視覺視口

2.4meta標簽

aQ5BAx.png

最標準的viewport設(shè)置

視口寬度和設(shè)備保持一致
視口的默認縮放比例1.0
不允許用戶自行縮放
最大允許的縮放比例1.0
最小允許的縮放比例1.0

3. 二倍圖

3.1物理像素&物理像素比

aQ5y9O.png

物理像素點指的是屏幕顯示的最小顆粒，是物理真實存在的。這是廠商在出廠時就設(shè)置好了,比如蘋果6 是 750* 1334
開發(fā)時候的1px 不一定等于1個物理像素
在PC端，1px等于1個物理像素，手機端就不一定
1px能顯示的物理像素點的個數(shù)，稱為物理像素比或屏幕像素比

為什么1px 不一定等于1個物理像素？

lRetina（視網(wǎng)膜屏幕）是一種顯示技術(shù)，可以將把更多的物理像素點壓縮至一塊屏幕里，從而達到更高的分辨率，并提高屏幕顯示的細膩程度。

出現(xiàn)的問題：
對于一張 50px * 50px 的圖片,在手機或 Retina 屏中打開，按照剛才的物理像素比會放大倍數(shù)，這樣會造成圖片模糊

在標準的viewport設(shè)置中，使用倍圖來提高圖片質(zhì)量，解決在高清設(shè)備中的模糊問題

通常使用二倍圖（準備的圖片的大小是需要的大小的2倍，再css縮小到需要的尺寸，解決了模糊問題），因為iPhone 6 的影響背景圖片注意縮放問題

3.2背景縮放background-size

background-size 屬性規(guī)定背景圖像的尺寸

background-size: 背景圖片寬度 背景圖片高度;

單位：長度|百分比|cover|contain;

cover：保留固有比例，把背景圖擴大，以完全覆蓋背景區(qū)域（可能圖片部分寬/高超出）
contain：保留固有比例，把背景圖擴大，以使其寬度和高度完全適應(yīng)內(nèi)容區(qū)域（可能沒有全覆蓋）
如果僅有一個數(shù)值被給定，這個數(shù)值將作為寬度值大小，高度值將被設(shè)定為auto（auto即按比例縮放背景圖片）

.bar {
       width: 50px; height: 100px;
       background-image: gradient(...);

       /* 不推薦 */
       background-size: 25px;
       background-size: 50%;
       background-size: auto 50px;
       background-size: auto 50%;

       /* 可行 */
       background-size: 25px 50px;
       background-size: 50% 50%;
}

4. 移動開發(fā)選擇和技術(shù)解決方案

4.1移動端主流方案

1.單獨制作移動端頁面（主流）

通常情況下，網(wǎng)址域名前面加 m(mobile)
可以打開移動端。通過判斷設(shè)備，如果是移動設(shè)備打開，則跳到移動端頁面。

也就是說，PC端和移動端為兩套網(wǎng)站，pc端是pc斷的樣式，移動端在寫一套，專門針對移動端適配的一套網(wǎng)站

京東jd.com m.jd.com

2.響應(yīng)式頁面兼容移動端（其次）

響應(yīng)式網(wǎng)站：即pc和移動端共用一套網(wǎng)站，只不過在不同屏幕下，樣式會自動適配

4.2移動端技術(shù)解決方案

1.移動端瀏覽器兼容問題

移動端瀏覽器基本以 webkit 內(nèi)核為主，因此我們就考慮webkit兼容性問題

可以放心使用 H5 標簽和 CSS3 樣式

同時我們?yōu)g覽器的私有前綴，只需要考慮添加 webkit 即可

2.移動端公共樣式

移動端 CSS 初始化推薦使用 normalize.css/

保護了有價值的默認值
修復(fù)了瀏覽器的bug
是模塊化的
擁有詳細的文檔

官網(wǎng)地址： http://necolas.github.io/normalize.css/

4.3移動端大量使用 CSS3盒子模型box-sizing

傳統(tǒng)模式寬度計算：盒子的寬度 = CSS中設(shè)置的width + border + padding
CSS3盒子模型：盒子的寬度= CSS中設(shè)置的寬度width 里面包含了 border 和 padding

(此時，padding 和 border 不會撐大盒子了)

/*CSS3盒子模型*/
box-sizing: border-box;
/*傳統(tǒng)盒子模型*/
box-sizing: content-box;

開發(fā)時選擇哪種模型？

移動端可以全部CSS3 盒子模型
PC端如果完全需要兼容，我們就用傳統(tǒng)模式，如果不考慮兼容性，我們就選擇 CSS3 盒子模型

4.4移動端特殊樣式

    /*CSS3盒子模型*/
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    /*點擊高亮我們需要清除清除  設(shè)置為transparent 完成透明*/
    -webkit-tap-highlight-color: transparent;
    /*在移動端瀏覽器默認的外觀在iOS上加上這個屬性才能給按鈕和輸入框自定義樣式*/
    -webkit-appearance: none;
    /*禁用長按頁面時的彈出菜單*/
    img,a { -webkit-touch-callout: none; }

5. 移動端常見布局

移動端單獨制作

流式布局（百分比布局）
flex 彈性布局（強烈推薦）
less+rem+媒體查詢布局
混合布局

響應(yīng)式

媒體查詢
bootstarp

5.1 流式布局：

流式布局，就是百分比布局，也稱非固定像素布局
通過盒子的寬度設(shè)置成百分比，來根據(jù)屏幕的寬度來進行伸縮，不受固定像素的限制，內(nèi)容向兩側(cè)填充。
流式布局方式是移動web開發(fā)使用的比較常見的布局方式。

為了保護伸縮時內(nèi)容的布局，可以設(shè)置

max-width最大寬度/max-height
min-width最小寬度/min-height

案例：京東移動首頁

flex布局

1.傳統(tǒng)布局和flex布局對比

1.1 傳統(tǒng)布局

兼容性好
布局繁瑣
局限性，不能在移動端很好的布局

1.2 flex布局

操作方便，布局極其簡單，移動端使用比較廣泛
pc端瀏覽器支持情況比較差
IE11或更低版本不支持flex或僅支持部分

1.3 建議

如果是pc端頁面布局，還是采用傳統(tǒng)方式
如果是移動端或者是不考慮兼容的pc則采用flex

2. flex布局原理

flex 是 flexible Box 的縮寫，意為"彈性布局"，用來為盒狀模型提供最大的靈活性，任何一個容器都可以指定為 flex 布局。
當我們?yōu)楦负凶釉O(shè)為 flex 布局以后，子元素的 float、clear 和 vertical-align 屬性將失效。
flex布局又叫伸縮布局、彈性布局、伸縮盒布局、彈性盒布局
采用 Flex 布局的元素，稱為 Flex 容器（flex

container），簡稱"容器"。它的所有子元素自動成為容器成員，稱為 Flex 項目（flex
item），簡稱"項目"。

總結(jié)：就是通過給父盒子添加flex屬性，來控制子盒子的位置和排列方式

3.0 父項常見屬性

flex-direction：設(shè)置主軸的方向
justify-content：設(shè)置主軸上的子元素排列方式
flex-wrap：設(shè)置子元素是否換行
align-content：設(shè)置側(cè)軸上的子元素的排列方式（多行）
align-items：設(shè)置側(cè)軸上的子元素排列方式（單行）
flex-flow：復(fù)合屬性，相當于同時設(shè)置了 flex-direction 和 flex-wrap

3.1 flex-direction設(shè)置主軸的方向

在 flex 布局中，是分為主軸和側(cè)軸兩個方向，同樣的叫法有：行和列、x 軸和y 軸
默認主軸方向就是 x 軸方向，水平向右
默認側(cè)軸方向就是 y 軸方向，水平向下

注意：主軸和側(cè)軸是會變化的，就看 flex-direction 設(shè)置誰為主軸，剩下的就是側(cè)軸。而我們的子元素是跟著主軸來排列的

<img src="F:/document/學習教程/2020黑馬教程/04-06 移動Web網(wǎng)頁開發(fā)/02-Flex 伸縮布局資料/02-移動WEB開發(fā)_flex布局/4-筆記/images/2.jpg">

3.2 justify-content 設(shè)置主軸上的子元素排列方式

3.3 flex-wrap設(shè)置是否換行

flex-wrap屬性定義，flex布局中，默認子元素是不換行的。
nowrap 不換行
wrap 換行

3.4 align-items 設(shè)置側(cè)軸上的子元素排列方式（單行）

該屬性是控制子項在側(cè)軸（默認是y軸）上的排列方式在子項為單項（單行）的時候使用
flex-start 從頭部開始
flex-end 從尾部開始
center 居中顯示
stretch 拉伸（但是子盒子不給高度）

3.5 align-content 設(shè)置側(cè)軸上的子元素的排列方式（多行）

設(shè)置子項在側(cè)軸上的排列方式并且只能用于子項出現(xiàn) 換行的情況（多行），在單行下是沒有效果的。

3.6 align-content 和align-items區(qū)別

align-items 適用于單行情況下，只有上對齊、下對齊、居中和拉伸
align-content適應(yīng)于換行（多行）的情況下（單行情況下無效），可以設(shè)置上對齊、下對齊、居中、拉伸以及平均分配剩余空間等屬性值。
總結(jié)就是單行找align-items 多行找 align-content

3.7 flex-flow 屬性是 flex-direction 和 flex-wrap 屬性的復(fù)合屬性

flex-flow:row wrap;

4. flex布局子項常見屬性

flex子項目占的份數(shù)
align-self控制子項自己在側(cè)軸的排列方式
order屬性定義子項的排列順序（前后順序）

4.1 flex 屬性

flex 屬性定義子項目分配剩余空間，用flex來表示占多少份數(shù)。

.item {
    flex: <number>; /* 默認值 0 */
}

4.2 align-self控制子項自己在側(cè)軸上的排列方式

align-self 屬性允許單個項目有與其他項目不一樣的對齊方式，可覆蓋 align-items 屬性。

默認值為 auto，表示繼承父元素的 align-items 屬性，如果沒有父元素，則等同于 stretch。

span:nth-child(2) {
      /* 設(shè)置自己在側(cè)軸上的排列方式 */
      align-self: flex-end;
}

4.3 order 屬性定義項目的排列順序

數(shù)值越小，排列越靠前，默認為0。

注意：和 z-index 不一樣。

.item {
    order: <number>;
}

5. 攜程網(wǎng)首頁案例制作

攜程網(wǎng)鏈接：http://m.ctrip.com

1.技術(shù)選型

方案：我們采取單獨制作移動頁面方案

技術(shù)：布局采取flex布局

2.搭建相關(guān)文件夾

3.設(shè)置視口標簽以及引入初始化樣式

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

<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/index.css">

4.常用初始化樣式

body {
  max-width: 540px;
  min-width: 320px;
  margin: 0 auto;
  font: normal 14px/1.5 Tahoma,"Lucida Grande",Verdana,"Microsoft Yahei",STXihei,hei;
  color: #000;
  background: #f2f2f2;
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
}

5.模塊名字劃分

6.背景線性漸變

語法：

/* 起始方向可以是方位名詞 或者角度，省略時默認是top */
background: linear-gradient(起始方向,顏色1,顏色2);

/* 從上到下漸變 多種寫法 */
background: linear-gradient(top,#4b8fed,#53bced);
background: linear-gradient(to bottom,#4b8fed,#53bced);
/* 從左到右漸變 多種寫法 */
/* 背景透明度設(shè)置 */
background: linear-gradient(left,rgba(255,0,0,0),rbga(255,0,0,1));
background: linear-gradient(to right,#4b8fed,#53bced);
/* 對角（從左上角到右下角）漸變 多種寫法 */
background: linear-gradient(top left, red , blue);
background: linear-gradient(to bottom right, red , blue);
/* 背景漸變必須添加瀏覽器私有前綴 */
background-image: -webkit-linear-gradient(left, #fa5956,#fb8650 54%)

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

流式布局&flex布局

流式布局

1. 移動端基礎(chǔ)

1.1瀏覽器現(xiàn)狀

1.2手機屏幕的現(xiàn)狀

1.3常見移動端屏幕尺寸

1.4移動端調(diào)試方法

2. 視口

2.1布局視口 layout viewport

2.2視覺視口 visual viewport

2.3理想視口 ideal viewport

2.4meta標簽

3. 二倍圖

3.1物理像素&物理像素比

3.2背景縮放background-size

4. 移動開發(fā)選擇和技術(shù)解決方案

4.1移動端主流方案

4.2移動端技術(shù)解決方案

4.3移動端大量使用 CSS3盒子模型box-sizing

4.4移動端特殊樣式

5. 移動端常見布局

flex布局

1.傳統(tǒng)布局和flex布局對比

1.1 傳統(tǒng)布局

1.2 flex布局

1.3 建議

2. flex布局原理

3.0 父項常見屬性

3.1 flex-direction設(shè)置主軸的方向

3.2 justify-content 設(shè)置主軸上的子元素排列方式

3.3 flex-wrap設(shè)置是否換行

3.4 align-items 設(shè)置側(cè)軸上的子元素排列方式（單行 ）

3.5 align-content 設(shè)置側(cè)軸上的子元素的排列方式（多行）

3.6 align-content 和align-items區(qū)別

3.7 flex-flow 屬性是 flex-direction 和 flex-wrap 屬性的復(fù)合屬性

4. flex布局子項常見屬性

4.1 flex 屬性

4.2 align-self控制子項自己在側(cè)軸上的排列方式

4.3 order 屬性定義項目的排列順序

5. 攜程網(wǎng)首頁案例制作

流式布局

1. 移動端基礎(chǔ)

1.1瀏覽器現(xiàn)狀

1.2手機屏幕的現(xiàn)狀

1.3常見移動端屏幕尺寸

1.4移動端調(diào)試方法

2. 視口

2.1布局視口 layout viewport

2.2視覺視口 visual viewport

2.3理想視口 ideal viewport

2.4meta標簽

3. 二倍圖

3.1物理像素&物理像素比

3.2背景縮放background-size

4. 移動開發(fā)選擇和技術(shù)解決方案

4.1移動端主流方案

4.2移動端技術(shù)解決方案

4.3移動端大量使用 CSS3盒子模型box-sizing

4.4移動端特殊樣式

5. 移動端常見布局

flex布局

1.傳統(tǒng)布局和flex布局對比

1.1 傳統(tǒng)布局

1.2 flex布局

1.3 建議

2. flex布局原理

3.0 父項常見屬性

3.1 flex-direction設(shè)置主軸的方向

3.2 justify-content 設(shè)置主軸上的子元素排列方式

3.3 flex-wrap設(shè)置是否換行

3.4 align-items 設(shè)置側(cè)軸上的子元素排列方式（單行 ）

3.5 align-content 設(shè)置側(cè)軸上的子元素的排列方式（多行）

3.6 align-content 和align-items區(qū)別

3.7 flex-flow 屬性是 flex-direction 和 flex-wrap 屬性的復(fù)合屬性

4. flex布局子項常見屬性

4.1 flex 屬性

4.2 align-self控制子項自己在側(cè)軸上的排列方式

4.3 order 屬性定義項目的排列順序

5. 攜程網(wǎng)首頁案例制作

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

3.4 align-items 設(shè)置側(cè)軸上的子元素排列方式（單行）

3.4 align-items 設(shè)置側(cè)軸上的子元素排列方式（單行）