1.移動端布局

1.1 移動端基礎

移動端現(xiàn)狀

移動端瀏覽器我們主要對webkit內核進行兼容；

我們現(xiàn)在開發(fā)的移動端主要針對手機端開發(fā)；

現(xiàn)在移動端碎片化比較嚴重，分辨率和屏幕尺寸大小不一；

學會用谷歌瀏覽器模擬手機界面以及調試；

視口

viewport是瀏覽器顯示頁面內容的屏幕區(qū)域；

布局視口(layout viewport):會使元素看上去很小不合適

視覺視口 visual viewport :用戶能看到網(wǎng)頁的區(qū)域

理想視口：ideal viewport :設備有多寬，布局的視口就有多寬 ---- 移動端布局就是根據(jù)理想視口布局的；

meta 視口標簽

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

二倍圖

物理像素和物理像素比：

物理像素就是我們說的分辨率；

二倍圖：我們準備的圖片比實際的圖片大二倍；

注意：只寫一個參數(shù)，肯定是寬度，高度省略，會等比例縮放

背景圖片通過background-size進行縮放；

移動端開發(fā)選擇

主流方案：

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

根據(jù)設備判斷，顯示的頁面；

2.響應式頁面兼容移動端：通過判斷屏幕的寬度來改變樣式；制作麻煩，需要去調兼容性問題

移動端技術解決方案：

移動端瀏覽器：webkit內核對h5.c3支持良好；

移動端樣式初始化：normalize.css

css3盒子模型：box-sizing :width里面包含了padding border

移動端常見布局

1.流式布局百分比布局

流式布局也稱百分比布局，也稱非固定像素布局
通過盒子的寬度設置成百分比來根據(jù)品目的寬度進行伸縮，不受固定像素的限制，內容向兩側填充
流式布局方式是移動web開發(fā)使用的比較常見的布局方式
通常會設置最大值，最小值 max-width min-width
圖片格式 dpg圖片壓縮技術 webp圖片格式：圖片體積是之前的3分之1

案例：京東手機端布局

2.flex布局

Flexbox 彈性布局

當父盒子設置flex之后，子元素的float，clear ,vertical-align屬性失效

flex布局初體驗：

布局極為簡單，pc端瀏覽器支持差，支持移動端布局

<style>
  div{
    display:flex;
  }
  span{
    flex:1; // 不需要浮動 可以實現(xiàn)居中對齊 和在一行上顯示
  }
</style>
<div>
  <span>1</span>
  <span>2</span>
  <span>3</span>
</div>

布局原理：用來為盒狀模型提供最大的靈活性，任何一個容器都可以指定flex布局；

當父元素設置為flex布局以后，子元素的float,clear,vertical-align屬性將失效；

伸縮布局 = 彈性布局 = 伸縮盒布局 = 彈性布局 = flex布局

父項常見屬性

1.flex-direction 設置主軸的方向

div{
  display:flex;
  //1.flex-direction 設置主軸方向 默認是x軸 row y軸就是側軸 column;
  // 元素是沿著主軸排列的 
  // row-reverse columen-reverse
  flex-direction:row; // 默認
}
span{
  flex:1;
}

2.justify-content 設置主軸上子元素的排列方式主軸

div{
  display:flex;
  justify-content:flex-start; // 默認 從左到右
  justify-content:flex-end; // 右邊對齊 順序不變
  justify-content:center; // 居中對齊
  justify-content:space-around; // 平分剩余空間
  justify-content: space-between; // 先兩邊貼邊再平分剩余空間
}
span{
  flex:1;
}

3.flex-wrap 設置子元素是否換行

div{
  display:flex;
  flex-wrap: nowrap;  // 默認不換行  如果一行放不下 會縮小子元素的寬度
  flex-wrap:wrap; // 設置子元素 換行
}

4.align-items 設置側軸上子元素的排列方式 側軸單行

div{
  display:flex;
  align-items:flex-start; // 從上到下
  align-items:flex-end;  // 從下到上
  align-items:center; // 設置側軸居中對齊
  align-items:stretch; // 沿著側軸去拉升盒子
}

5.align-content 設置子元素的排列方式多行

當子元素出現(xiàn)換行的情況下，在單行情況下沒有效果；

div{
  display:flex;
  flex-wrap:wrap;
  align-content:flex-start;  // 在側軸的頭部開始排列 默認
  align-content:flex-end; // 在側軸的尾部開始排列
  align-content:center; // 在側軸的中間開始排列
  align-content:space-between; // 子項在側軸先分布兩頭，再平分剩余空間
  align-content:space-around; // 子項在側軸平分剩余空間
  align-content:stretch; // 設置子項元素高度平分父元素高度
}

6.flex-flow 設置主軸方向和是否換行連寫

div{
  display:flex;
  flex-flow:row wrap;
}

子項常見屬性

1.flex 子項目占的分數(shù)：

div{
  display:flex;
}
div span{
  flex: 0 ; // number  默認0 從剩余空間去分配
}

2.align-self 控制子項自己在側軸的排列方式

div{
  display:flex;
  // align-items:flex-end;
}
div span:nth-child(3) {
  align-self:flex-end;
}

3.order 定義項目的排列順序

默認是0

div{
  display:flex;
}
div span:nth-child(2) {
  order:-1; // 2號子盒子會在所有盒子的前面
}

案例攜程移動端布局

3.rem加媒體查詢布局

rem root em 相對單位類似em ,em是父元素字體大小

rem基于html元素的字體大小去設置的

媒體查詢：media query css3新增

可以針對不同的媒體類型定義不同的樣式的

針對不同屏幕尺寸去設置不同的樣式

@media mediatype and|not|only|or (media feature){
  font-size:14px;
}

@media screen and (min-width: 800px){
  body {
    background-color:red;
  }
}

less基礎

less leaner style sheet css的擴展 css的預處理器擴展了css的動態(tài)特性

less變量必須以@開頭，變量名不能以特殊符號開頭

@color: pink;
@Color: deeppink;
@fs14: 14px;

less編譯：將.less文件生成.css文件

cmd: lessc style.less>style.css

Vscode:easy less 在保存時自動編譯

less嵌套：

a {
    display: block;
    width: 50px;
    height: 50px;
    background-color: @Color;
    &.box {
      background-color: yellowgreen;
    }
    &:hover {
      color: red
    }
  }

less運算：任何數(shù)字顏色值都可以參與運算 + - * /

如果一個單位一個沒單位，單位就是唯一那個單位

如果兩個都有單位，以第一的單位為準

運算符左右添加一個空格

@baseFont: 50px;
html {
  font-size: @baseFont;
}
div {
  width: 200rem / @baseFont;
  height: 200rem / @baseFont;
  background-color: #999 - #333;
}

rem適配方案

1.less 媒體查詢 rem

動態(tài)設置html的字體大小 750 / 15 == 50

2.flexible.js rem

響應式布局

1.1 響應式開發(fā)原理

就是使用媒體查詢針對不同寬度的設備進行布局和樣式的設置，從而適配不同設備的目的。

設備的劃分情況：

小于768的為超小屏幕（手機）
768~992之間的為小屏設備（平板）
992~1200的中等屏幕（桌面顯示器）
大于1200的寬屏設備（大桌面顯示器）

1.2 響應式布局容器

響應式需要一個父級做為布局容器，來配合子級元素來實現(xiàn)變化效果。

原理就是在不同屏幕下，通過媒體查詢來改變這個布局容器的大小，再改變里面子元素的排列方式和大小，從而實現(xiàn)不同屏幕下，看到不同的頁面布局和樣式變化。

父容器版心的尺寸劃分

超小屏幕（手機，小于 768px）：設置寬度為 100%
小屏幕（平板，大于等于 768px）：設置寬度為 750px
中等屏幕（桌面顯示器，大于等于 992px）：寬度設置為 970px
大屏幕（大桌面顯示器，大于等于 1200px）：寬度設置為 1170px

但是我們也可以根據(jù)實際情況自己定義劃分

2.0 bootstrap的介紹

2.1Bootstrap簡介

Bootstrap 來自 Twitter（推特），是目前最受歡迎的前端框架。Bootstrap 是基于HTML、CSS 和 JAVASCRIPT 的，它簡潔靈活，使得 Web 開發(fā)更加快捷。

中文網(wǎng) 官網(wǎng) 推薦網(wǎng)站

框架：顧名思義就是一套架構，它有一套比較完整的網(wǎng)頁功能解決方案，而且控制權在框架本身，有預制樣式庫、組件和插件。使用者要按照框架所規(guī)定的某種規(guī)范進行開發(fā)。

2.2 bootstrap優(yōu)點

標準化的html+css編碼規(guī)范
提供了一套簡潔、直觀、強悍的組件
有自己的生態(tài)圈，不斷的更新迭代
讓開發(fā)更簡單，提高了開發(fā)的效率

2.3 版本簡介

2.x.x：停止維護,兼容性好,代碼不夠簡潔，功能不夠完善。

3.x.x：目前使用最多,穩(wěn)定,但是放棄了IE6-IE7。對 IE8 支持但是界面效果不好,偏向用于開發(fā)響應式布局、移動設備優(yōu)先的WEB 項目。

4.x.x：最新版，目前還不是很流行

2.4bootstrap基本使用

在現(xiàn)階段我們還沒有接觸JS相關課程，所以我們只考慮使用它的樣式庫。

Bootstrap 使用四步曲：

創(chuàng)建文件夾結構

創(chuàng)建 html 骨架結構

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3個meta標簽*必須*放在最前面，任何其他內容都*必須*跟隨其后！ -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>你好，世界！</h1>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

引入相關樣式文件

<!-- Bootstrap 核心樣式-->
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">

書寫內容

直接拿Bootstrap 預先定義好的樣式來使用

修改Bootstrap 原來的樣式，注意權重問題

學好Bootstrap 的關鍵在于知道它定義了哪些樣式，以及這些樣式能實現(xiàn)什么樣的效果

2.5 bootstrap布局容器

Bootstrap 需要為頁面內容和柵格系統(tǒng)包裹一個 .container 或者.container-fluid 容器，它提供了兩個作此用處的類。

.container

響應式布局的容器固定寬度
大屏 ( >=1200px) 寬度定為 1170px
中屏 ( >=992px) 寬度定為 970px
小屏 ( >=768px) 寬度定為 750px
超小屏 (100%)

.container-fluid

流式布局容器百分百寬度
占據(jù)全部視口（viewport）的容器。

2.6 bootstrap柵格系統(tǒng)

Bootstrap提供了一套響應式、移動設備優(yōu)先的流式柵格系統(tǒng)，隨著屏幕或視口（viewport）尺寸的增加，系統(tǒng)會自動分為最多12列。

柵格系統(tǒng)用于通過一系列的行（row）與列（column）的組合來創(chuàng)建頁面布局，你的內容就可以放入這些創(chuàng)建好的布局中。

按照不同屏幕劃分為1~12 等份
行（row）可以去除父容器作用15px的邊距
xs-extra small：超??； sm-small：小； md-medium：中等； lg-large：大；
列（column）大于 12，多余的“列（column）”所在的元素將被作為一個整體另起一行排列
每一列默認有左右15像素的 padding
可以同時為一列指定多個設備的類名，以便劃分不同份數(shù) 例如 class="col-md-4 col-sm-6"

柵格嵌套

柵格系統(tǒng)內置的柵格系統(tǒng)將內容再次嵌套。簡單理解就是一個列內再分成若干份小列。我們可以通過添加一個新的 .row 元素和一系列 .col-sm-* 元素到已經(jīng)存在的 .col-sm-*
元素內。

<!-- 列嵌套 -->
 <div class="col-sm-4">
    <div class="row">
         <div class="col-sm-6">小列</div>
         <div class="col-sm-6">小列</div>
    </div>
</div>

列偏移

使用 .col-md-offset-* 類可以將列向右側偏移。這些類實際是通過使用 * 選擇器為當前元素增加了左側的邊距（margin）。

 <!-- 列偏移 -->
  <div class="row">
      <div class="col-lg-4">1</div>
      <div class="col-lg-4 col-lg-offset-4">2</div>
  </div>

列排序

通過使用 .col-md-push-* 和 .col-md-pull-* 類就可以很容易的改變列（column）的順序。

 <!-- 列排序 -->
  <div class="row">
      <div class="col-lg-4 col-lg-push-8">左側</div>
      <div class="col-lg-8 col-lg-pull-4">右側</div>
  </div>

響應式工具

為了加快對移動設備友好的頁面開發(fā)工作，利用媒體查詢功能，并使用這些工具類可以方便的針對不同設備展示或隱藏頁面內容。

3.0 阿里百秀案例制作

3.1 技術選型

方案：我們采取響應式頁面開發(fā)方案

技術：bootstrap框架

設計圖：本設計圖采用 1280px 設計尺寸

項目結構搭建

Bootstrap 使用四步曲：

創(chuàng)建文件夾結構
創(chuàng)建 html 骨架結構
引入相關樣式文件
書寫內容

container寬度修改

因為本效果圖采取 1280的寬度，而Bootstrap 里面 container寬度最大為 1170px，因此我們需要手動改下container寬度

 /* 利用媒體查詢修改 container寬度適合效果圖寬度  */
  @media (min-width: 1280px) { 
    .container { 
    width: 1280px; 
     } 
   }

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

移動端布局

移動端布局

1.移動端布局

1.1 移動端基礎

移動端現(xiàn)狀

視口

meta 視口標簽

二倍圖

物理像素和物理像素比：

移動端開發(fā)選擇

主流方案：

移動端技術解決方案：

移動端瀏覽器：webkit內核對h5.c3支持良好；

移動端樣式初始化：normalize.css

css3盒子模型：box-sizing :width里面包含了padding border

移動端常見布局

1.流式布局百分比布局

案例：京東手機端布局

2.flex布局

案例攜程移動端布局

3.rem加媒體查詢布局

less基礎

rem適配方案

響應式布局

1.1 響應式開發(fā)原理

1.2 響應式布局容器

2.0 bootstrap的介紹

2.1Bootstrap簡介

2.2 bootstrap優(yōu)點

2.3 版本簡介

2.4bootstrap基本使用

2.5 bootstrap布局容器

2.6 bootstrap柵格系統(tǒng)

3.0 阿里百秀案例制作

3.1 技術選型

相關閱讀更多精彩內容

友情鏈接更多精彩內容

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

移動端布局

1.移動端布局

1.1 移動端基礎

移動端現(xiàn)狀

視口

meta 視口標簽

二倍圖

物理像素和物理像素比：

移動端開發(fā)選擇

主流方案：

移動端技術解決方案：

移動端瀏覽器：webkit內核 對h5.c3支持良好；

移動端樣式初始化：normalize.css

css3盒子模型：box-sizing :width里面包含了padding border

移動端常見布局

1.流式布局 百分比布局

案例：京東手機端布局

2.flex布局

案例攜程移動端布局

3.rem加媒體查詢布局

less基礎

rem適配方案

響應式布局

1.1 響應式開發(fā)原理

1.2 響應式布局容器

2.0 bootstrap的介紹

2.1Bootstrap簡介

2.2 bootstrap優(yōu)點

2.3 版本簡介

2.4bootstrap基本使用

2.5 bootstrap布局容器

2.6 bootstrap柵格系統(tǒng)

3.0 阿里百秀案例制作

3.1 技術選型

相關閱讀更多精彩內容

友情鏈接更多精彩內容

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

移動端瀏覽器：webkit內核對h5.c3支持良好；

1.流式布局百分比布局