移動端開發基礎瞭解

wutenghui發表於2020-10-30

文章目錄

一、視口

  • 視口 ( viewport )，就是瀏覽器顯示頁面內容的螢幕區域。
  • 視口可以分為佈局視口、視覺視口、理想視口

1、佈局視口 (layout viewport)

  • 一般移動裝置的瀏覽器都預設設定了一個佈局視口，用於解決早起 PC 端頁面在手機上顯示的問題
  • IOS,Android 基本都將這個視口解析度設定為 980px，所以 PC 上的網頁大多都在手機上呈現，只不過元素看上去很小，一般預設可以通過手動縮放網頁

2、視覺視口 (visual viewport)

  • 它是使用者正在看到的網站的區域
  • 可以通過縮放去操作視覺視口，但不會影響佈局視口，佈局視口扔保持原來的寬度

3、理想視口 (ideal viewport)

  • 為了使網站在移動端有最理想的瀏覽和閱讀寬度而設定
  • 理想視口，對裝置來講，是最理想的視口尺寸
  • 需要手動新增 <meta> 視口標籤通知瀏覽器操作
  • <meta> 視口標籤的主要目的：佈局視口的寬度應該與理想視口的寬度一致，簡單理解就是裝置有多看，我們佈局的視口就多寬

4、meta 視口標籤

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
屬性解釋說明
width寬度設定的是 viewport 寬度，可以設定 device-width 特殊值
initial-scale初始縮放比，大於0的數字
maximum-scale最大縮放比，大於0的數字
minimum-scale最小縮放比，大於0的數字
user-scalable使用者是否可以縮放，yes 或 no (1 或 0)

5、標準的 viewport 引數設定

  • 視口寬度和裝置保持一致
  • 視口的預設縮放比例1.0
  • 不允許使用者自行縮放
  • 最大允許的縮放比例1.0
  • 最小允許的縮放比例1.0

視口就是瀏覽器顯示內容的螢幕區域，想要理想視口，就要給移動端頁面新增 <meta>

二、二倍圖

1、物理畫素 & 物理畫素比

  • 物理畫素點指的是螢幕顯示的最小顆粒，是物理真實存在的，這是廠商在出廠時就設定好了，比如蘋果 6\7\8 是 750 * 1334
  • 開發時候的 1px 不是一定等於 1 個物理畫素
  • PC 端頁面，1 個 PX 等於 1 個物理畫素，但是移動端就不盡相同
  • 一個 px 的能顯示的物理畫素點的個數，稱為物理畫素比或螢幕畫素比
<div style="width: 375px; height: 300px; background-color: skyblue;"></div>

在這裡插入圖片描述

  • pc 端 和 早期的手機螢幕 / 普通手機螢幕：1CSS 畫素 = 1 物理畫素
  • Retina ( 視網膜螢幕) 是一種顯示技術，可以將更多的物理畫素點壓縮至一塊螢幕裡，從而達到更高的解析度，提高螢幕顯示的細膩程度

2、多倍圖

  • 對於一張 50px * 50px 的圖片，在手機 Retina 屏中開啟，按照剛才的物理畫素比會放大倍數，這樣會造成圖片模糊
  • 在標準的 viewport 設定中，使用倍圖來提高圖片質量，解決在高清裝置中的模糊問題
  • 通常使用二倍圖，因為 iphone 6\7\8 的應該向，但是現在還存在 3 倍圖 4 倍圖的情況，這個看實際開發需求
  • 背景圖片注意縮放問題
 <!-- 問題：如果一個 50 * 50px 的圖片放在手機螢幕中，佔有的物理畫素點是  100 * 100個，會造成圖片模糊 -->
 <!-- 解決方法：使用一個本身就是 100 * 100px 的圖片進行製作，替換原來圖片，然後設定為 50 * 50 -->
    <img src="images/apple50.jpg" alt="">
    <img src="images/apple100.jpg" alt="">
    <div class="box"></div>

/* 插入圖 */
img:nth-child(2) {
      width: 50px;
      height: 50px;
     }
/* 背景圖 */
.box {
      width: 50px;
      height: 50px;
      /* 背景圖也需要使用高背圖進行新增 */
      background: url(images/apple100.jpg);
      /* CSS3 新增的更改背景屬性 */
      background-size: 50px 50px;
   }

  • @3X 3倍圖
  • @2X 2倍圖
  • @1X 1倍圖原圖

3、二倍精靈圖做法

  • 在 firework 裡面把精靈圖等比例縮放為原來一般
  • 之後根據新的大小 測量座標
  • 注意程式碼裡面 background-size 也要寫 精靈圖原來寬度的一半

三、移動端開發選擇

1、移動端主流方案

  • 單獨製作移動端頁面 (主流)
    • 參考：京東商城手機版、淘寶觸屏版等
    • 通常情況下，網址域名前面加 m(mobile) 可以開啟移動端，通過判斷裝置，如果是移動裝置開啟，則跳到移動端介面
  • 響應式介面相容移動端 (其次)
    • 參考：三星手機官網
    • 響應式網站：即PC和移動端公用一套網站，只不過在不同寬度的螢幕下，樣式會自動匹配
    • 缺點：製作麻煩，需要花很大精力去除錯相容性問題

2、移動端技術解決方案

瀏覽器

  • 移動端瀏覽器基本以 webkit 核心為主，要考慮 webkit 相容性問題，可以放心使用 H5 標籤和 CSS3 樣式
  • 同時瀏覽器的私有簽註我們只需要考慮新增 -webkit- 即可

CSS 初始化 normalize.css

  • 移動端 CSS初始化推薦使用 normalize.css
  • 優點：
    • normalize.css：保護了有價值的預設值
    • normalize.css：修復瀏覽器的 BUG
    • normalize.css：是模組化的
    • normalize.css：有詳細的文件

官方網址：http://necolas.github.io/normalize.css/

CSS3 盒子模型 box-sizing

  • 傳統模式寬度計算：盒子的高度 = CSS 中設定的 width + border + padding
  • CSS3 盒子模型：盒子的寬度 = CSS 中設定的寬度 width 裡面包含了 border 和 padding 也就是說，CSS3 中的盒子模型，padding 和 border 不會撐大盒子
/* 傳統盒模型 ： 邊框、內邊距在寬高之外進行擴充套件*/
.box1 {
     width: 200px;
     height: 200px;
     padding: 20px;
     border: 5px solid slateblue;
     background-color: skyblue;
 }
 /* css3 盒模型：元素佔有的整體寬度不變，新增內邊距和邊框後，自動內減 */
 .box2 {
     width: 200px;
     height: 200px;
     padding: 20px;
     border: 5px solid slateblue;
     box-sizing: border-box;
     background-color: skyblue;
 }

特殊樣式

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

3、移動端常見不佈局方式

  • 單獨製作移動端頁面 (主流)
    • 流式佈局 (百分比佈局)
    • flex 彈性佈局 (強烈推薦)
    • less + rem + 媒體查詢佈局
    • 混合佈局
  • 響應式介面相容移動端 (其次)
    • 媒體查詢
    • bootstrap

四、移動端開發-流式佈局案例

以京東介面為例

1、瞭解流式佈局

  • 流式佈局，就是百分比佈局，也成非固定畫素佈局
  • 通過將盒子的寬度設定成百分比，從而根據螢幕寬度來進行收縮，不受固定畫素的限制，內容向兩側填充
  • 流式佈局方式是移動 web 開發使用的比較常用的佈局方式

注意事項

  • 在製作過程中，需要定義頁面的最大和最小支援寬度
    • max-width 最大寬度 ( max-height 最大高度 )
    • min-width 最小寬度 ( min-height 最小高度 )
body {
    min-width: 320px;
    max-width: 980px;
}
section {
    width: 100%;
    height: 100px;
    background-color: skyblue;
}
section div {
    float: left;
    width: 50%;
    height: 100px;
    border: 5px solid steelblue;
    box-sizing: border-box;
    background-color: slateblue;
}

<section>
     <div>1</div>
     <div>2</div>
 </section>

2、移動端首頁

京東移動端首頁訪問地址：https://m.jd.com/

搭建相關資料夾結構

設定視口標籤以及引入初始化樣式

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

<!-- 引入初始化 css 檔案 -->
<link rel="stylesheet" href="css/normalize.css">
<!-- 引入自己的首頁 css -->
<link rel="stylesheet" href="css/index.css">

常用的初始化樣式

/* 給 body 進行樣式初始化設定 */
body {
    width: 320px;
    max-width: 540px;
    margin: 0 auto;
    background-color: #fff;
    font-size: 14px;
    line-height: 1.5;
    font-family: -apple-system,Helvetica,sans-serif;
    color: #666;
}

特殊設定

/* 點選高亮我們需要清除清除 設定為 transparent 完成透明 */
* {
    -webkit-tap-highlight-color: transparent;
}
/* 在移動端瀏覽器預設的外觀在 ios 上加上這個屬性才能給按鈕和輸入框定義自定義樣式 */
input {
    -webkit-appearance: none;
}
/* 禁用長按頁面時的彈出選單 */
img,a { 
    -webkit-touch-callout: none; 
}
  • 當圖片過大，圖片的基線和文字基線是水平居中的，但是視覺上圖片呈上部，可以設定
vertical-align: middle; /* 垂直方向對齊 */

3、CSS3 線性漸變背景 (擴充)

參考網址：https://developer.mozilla.org/zh-CN/docs/Web/CSS/linear-gradient

  • linear-gradient() 函式用於建立一個表示兩種或多種顏色線性漸變的圖片
  • linear-gradient() 函式沒有內在尺寸
background-image: linear-gradient(to top,red,skyblue);

五、flex 佈局體驗

1、瞭解 felx 佈局原理

  • 傳統佈局
    • 相容性好
    • 佈局繁瑣
    • 侷限性，不能在移動端更好的佈局
  • flex 佈局
    • 操作方便，佈局極為簡單，移動端應用很廣泛
    • PC 端瀏覽器支援情況較差
    • IE 11 或更低版本，不支援或僅支援部分支援

flex 佈局原理

  • flex 是 flexible Box 的縮寫，意為"彈性佈局"，用來為盒狀模型提供最大的靈活性，任何一個容器都可以指定為 flex 佈局

  • 當我們為父盒子設為 flex 佈局以後，子元素的 float、clear和 vertical-align屬性將失效

  • 伸縮佈局 = 彈性佈局 = 伸縮盒佈局 = 彈性盒佈局 = flex 佈局

  • 採用 felx 佈局的元素，稱為 flex 容器，簡稱容器，它的所有子元素自動稱為容器成員，稱為 flex 專案，簡稱專案

2、flex 佈局父項常見屬性

以下由6個屬性是對父元素設定的

  • flex-direction：設定主軸的方向
  • justify-content：設定主軸上的子元素排列方式
  • flex-wrap：設定子元素是否換行
  • align-content：設定側軸上的子元素的排列方式 (多行)
  • align-items：設定側軸上的子元素的排列方式 (單行)
  • flex-flow：複合屬性，相當於同時設定了 flex-direction 和 flex-wrap

align-content 和 align-items

  • align-items 適用於單行情況下，只有上對齊、下對齊、居中和拉伸
  • align-content 使用於換行(多行)的情況下(單行情況下無效)，可以設定上對齊、下對齊、居中、拉伸以及平均分配剩餘空間等屬性值
  • 總結就是單行找 align-itens 多行找 align-content

①、flex-direction：設定主軸的方向

主軸與側軸

  • 在 flex 佈局中，是分為主軸和側軸兩個方向，同樣的叫法有：行和列、x軸和y軸
  • 預設主軸方向就是 x 軸方向，水平向右
  • 預設側軸方向就是 y 軸方向，垂直向下
  • flex-direction 屬性決定主軸的方向（即專案的排列方向）
  • 注意：主軸和側軸是會變化的，就看 flex-direction 設定為主軸，剩下的就是側軸，而我們的子元素是跟著主軸來排列的
屬性值解釋說明
row預設值從左到右
row-reverse從右到左
column從上到下
column-revese從上到下
div {
    display: flex;
     width: 400px;
     height: 400px;
     background-color: blanchedalmond;
     /* 預設主軸是水平從左往右 */
     /* flex-direction: row; */
     /* 主軸 水平從右往左 */
     /* flex-direction: row-reverse; */
     /* 主軸為垂直從上往下 */
     /* flex-direction: column; */
     
     flex-direction: column-reverse;
 }
 span {
     width: 100px;
     height: 100px;
     margin-right: 10px;
     background-color: skyblue;
 }

②、 justify-content：主軸上的子元素排列方式

  • justify-content 屬性定義了專案在主軸上的對齊方式
  • 注意：使用這個屬性之前一定要確定好主軸是哪個
屬性值解釋說明
flex-start預設值從頭部開始，如果主軸是 X 軸，則從左到右
flex-end從尾部開始排列
center在主軸居中對齊，如果主軸是 X 軸，水平居中
space-around平分剩餘空間
space-between先兩邊貼邊 在平分剩餘空間(重要)

③、flex-wrap：子元素是否換行

  • 預設情況下，專案都排在一條線(又稱"軸線")上
  • flex-wrap屬性定義，flex佈局中預設是不換行的
屬性值解釋說明
nowrap預設值，不換行
wrap換行

④、align-content：側軸上的子元素的排列方式 (多行)

  • 設定子項在側軸上的排列方式並且只能用於子項出現換行的情況(多行)，在單行下沒有效果
屬性值解釋說明
flex-start在側軸的頭部開始排列
flex-end在側軸的尾部開始排列
center在側軸中間顯示
space-around子項在側軸平分剩餘空間
space-between子項在側軸先分佈在兩頭，在平分剩餘空間
stretch設定子項元素高度平分父元素高度

⑤、align-items：側軸上的子元素的排列方式 (單行)

  • 該屬性是控制子項在側軸(預設是 y 軸) 上的排列方式
  • 在子項為單項(單行)的時候使用
屬性解釋說明
flex-start預設值從上到下
flex-end從下到上
center擠在一起居中(垂直居中)
stretch拉伸

⑥、flex-flow

  • flex-flow 屬性是複合屬性， flex-direction 和 flex-wrap 屬性的複合屬性
  • flex-flow: row nowrap;

3、flex佈局子項常見屬性

  • flex 子專案佔的分數
  • align-self 控制子項自己在側軸的排列方式
  • order 屬性定義子項的排列順序 (前後順序)

①、flex 屬性

  • flex 屬性定義專案分配父盒子的剩餘空間，用 flex 來表示佔多少分數
  • 屬性值為數字，數字為1，表示佔總份數中的1 份，預設值為0
 * {
  margin: 0;
    padding: 0;
}
section {
    display: flex;
    width: 60%;
    height: 80px;
    margin: 50px auto;
    background-color: skyblue;
}
section div:nth-child(1), section div:nth-child(3) {
    width: 80px;
    height: 80px;
    background-color: slateblue;
}
section div:nth-child(2) {
    flex: 1;
    height: 80px;
    background-color: tomato;
}

<section>
    <div>1</div>
    <div>2</div>
    <div>3</div>
</section>

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

  • align-self 屬性允許單個專案有與其他專案不一樣的對齊方式，可覆蓋 align-items 屬性
  • 預設值為 auto，表示繼承父元素的 align-items 屬性，如果沒有父元素，則等同於 stretch
div {
display: flex;
    width: 400px;
    height: 400px;
    background-color: blanchedalmond;
    justify-content: center;
    align-content: flex-start;
}
span {
    width: 100px;
    height: 100px;
    margin-right: 10px;
    margin-bottom: 10px;
    background-color: skyblue;
}

span:nth-child(2) {
    align-self: flex-end;
}

③、order 屬性定義子項的排列順序

  • 數值越小，排列越靠前，預設值為 0
  • 注意：和 z-index 不一樣
span:nth-child(2) {
      /* 調整子項載入的順序，預設值是 0，如果想往前提，屬性值可以為負數 */
      order: -1;
      /* 如果前面的元素想往後移,屬性值要比前面都大 */
         
 }

六、rem 基礎

1、rem 單位

  • rem (root em) 是一個相對單位，類似於 em，em 是父元素字型大小
  • 不同的是 rem 的基準是相對於 <html> 元素的字型大小
  • 比如，根元素 html 設定 font-size: 12px; 非根元素設定 width:2rem;轉換成px表示就是 24px
  • rem 的優勢：父元素文字大小可能不一致，但是整個頁面只有一個 <html>，可以很好的來控制整個頁面的元素大小比例
 * {
 margin: 0;
    padding: 0;
}
html {
    font-size: 20px;
}
.box {
    /* width: 200px;
    height: 200px; */
    width: 10rem;
    height: 10rem;
    background-color: skyblue;
    font-size: 20px;
}
.box p {
    /* em:相對單位，參考的是父級元素的字號大小的倍數，如果是 2em 表示字號的兩倍 */
    /* width: 5em;
    height: 4em; */

     /* rem: 相對單位，參考的是根元素 html 的字號大小的倍數，如果是 2rem 表示 html 元素字號的 2 倍 */
    width: 5rem;
    height: 4rem;
    background-color: thistle;    
 }

2、媒體查詢

媒體查詢(Media Query) 是 CSS3新語法

  • 使用 @media 查詢，可以針對不同的媒體型別定義不同的樣式
  • @media 可以針對不同的螢幕尺寸設定不同的樣式
  • 當你重置瀏覽器大小的過程中，頁面也會根據瀏覽器的寬度和高度重新渲染頁面
  • 目前針對很多蘋果手機、Android手機，平板等設定都用得到多媒體查詢

語法規範

  • 用 @media 開頭，注意 @ 符號
  • mediatype 媒體型別
  • 關鍵字 and not only
  • media feature 媒體特性，必須有小括號包含

①、mediatype 媒體型別

  • 將不同的終端裝置劃分成不同的型別，稱為媒體型別
值解釋說明
all用於所有裝置
print用於印表機和列印預覽
screen用於電腦螢幕，平板電腦，智慧手機等

②、關鍵字

關鍵字將媒體型別或多個媒體特性連線到一起作為媒體查詢的條件

  • and：可以將多個媒體特性連線到一起，相當於 “且” 的意思
  • not：排除某個媒體特性，相當於 “非” 的意思，可以省略
  • or：可以測試多個媒體查詢的條件，只要有一個條件成立，就執行， “或” 的意思
  • obly：指定某個特定的媒體型別，可以省略

③、媒體特性

  • 每種媒體型別都具有各自不同的，根據不同的媒體型別的媒體特性設定不同的戰士風格
值解釋說明
width定義輸出裝置中頁面可見區域的寬度
min-width定義輸出裝置中頁面最小可見區域寬度
max-width定義輸出裝置中頁面最大可見區域寬度
/* m媒體查詢：@media 媒體型別 關鍵字 媒體特性 */
/* 在螢幕裝置中，判斷螢幕尺寸大等於 800px 的時候，最小寬度是 800px */
@media screen and (min-width: 800px) {
    body {
        background-color: skyblue;
    }
}
/* 媒體查詢可以寫多個 */
@media screen and (max-width:600px) {
    body {
        background-color: sandybrown;
    }
}

④、引入資源

  • 當樣式比較繁多的時候，我們可以針對不同的媒體使不同的媒體使用不同 stylesheets (樣式表)
  • 原理，就是直接在 <link> 中判斷裝置的尺寸，然後引用不同的 css 檔案
  • 語法規範
<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">
  • 示例
<link rel="stylesheet" media="mediatype and (min-width:200px)" href="styleA.css">

3、媒體查詢 + rem

  • rem 單位是跟著 html 走的，有了 rem 頁面元素可以設定不同大小尺寸
  • 媒體查詢可以根據不同裝置寬度來修改樣式
  • 媒體查詢 + rem 就可以實現不同裝置寬度，實現頁面元素大小的動態變化
 * {
	margin: 0;
	padding: 0;
	}

/* rem 單位 */
/* 預設的 html 字號 */
html {
    font-size: 20px;
}
 /* p螢幕小於 640px 是，讓 html 的字號為20px，大於等於 640px html 字號為30px */
 /* @media screen and (max-width: 639px) {
     html {
     font-size: 20px;
  }
 } */
 @media screen and (min-width: 640px) {
     html {
     font-size: 30px;
  }
 }
 .box {
     width: 100%;
     height: 3rem;
     background-color: skyblue;
     font-size: 1.5rem;
     line-height: 3rem;
     color: #fff;
     font-weight: bold;
     text-align: center;
 }

4、rem 適配原理

①、rem 適配方案 思考

  • 我們適配的目標是什麼？
  • 怎麼去達到這個目標的？
  • 在實際的開發當中使用？

答案

  • 讓一些不能等比自適應的元素，達到當裝置尺寸發生改變的時候，等比例適配當前裝置
  • 使用媒體查詢根據不用裝置按比例設定 html 的字型大小，然後頁面元素使用 rem 做尺寸單位，當 html 字型大小變化元素尺寸也會發生變化，從而達到等比縮放的適配

②、rem 實際開發適配方案

  • 1、按照設計稿與裝置寬度的比例，動態計算並設定 html 根標籤的 font-size 大小；( 媒體查詢 )
  • 2、css 中，設計稿元素的寬、高、相對位置等取值，按照同等比例換算為 rem 單位的值

rem 適配方案技術使用( 市場 )

  • 技術方案 1
    • less
    • 媒體查詢
    • rem
  • 技術方案 2
    • flexible.js
    • rem

兩種方案現在都存在，方案 2 更簡單，現階段無需瞭解裡面的 js 程式碼

Ⅰ、rem 實際開發適配方案

rem + 媒體查詢 + less 技術

  • 1、設計稿常見尺寸寬度
    裝置常見寬度
    iphone4.5640px
    ipgone 678750px
    Android常見 320px、480px、540px、600px、720px、768px、800px、1080px
    目前常見市場主流裝置尺寸按照 1080px 設計

一般情況下，我們以一套或兩套效果圖石適應大部分的螢幕，放棄極端屏或對其優雅降級，犧牲一些效果，現在基本以 750 為準

動態設定 html 標籤 font-size 大小

  • 假設設計稿是 750px
  • 假設把整個螢幕劃分為 15 等份（劃分標準不一定是 20份也可以是10等份）
  • 每一份作為 html 字型大小，這裡就是 50px
  • 那麼在 320px 裝置的時候，字型大小為 320 / 15 就是 21.33px
  • 用我們的頁面元素的大小 除以 不同的 html 字型大小會發現他們比例還是相同的

比如以 750 為標準設計稿

  • 一個 100 *100 畫素的頁面在 750 螢幕下，就是 100 / 50 轉換為 rem 是 2rem * 2rem 比例是 1 比 1
  • 在 320 螢幕下，html 字型大小為 21.33 則 2rem = 42.66px 此時寬和高都是 42.66， 但是寬和高的比例還是 1 比 1
  • 但是已經能實現不同螢幕下 頁面元素盒子等比例縮放的效果
/* 媒體查詢設定不同螢幕下的 html 的字號 */
/* 設計圖參考 750px */
/* 將螢幕寬度劃分為 15份 */
/* 字號 = 螢幕寬度 / 15 */
@media screen and (min-width: 320px) {
    html {
        font-size: 21.33px;
    }
}
@media screen and (min-width: 750px) {
    html {
        font-size: 50px
    }
}
/* 設定頁面中元素大小時，參考 750px 螢幕的字號 */
/* 寬高為 100*100 px 的盒子 */
.box {
    width: 2rem;
    height: 2rem;
    background-color: sandybrown;
}

元素大小取值方法

  • 最後的公式：頁面元素的 rem 值 = 頁面元素值 (px) / (螢幕寬度/劃分的份數)
  • 螢幕寬度 / 劃分的份數就是 html font-size 的大小
  • 或者：頁面元素的 rem 值 = 頁面元素值 (px) / html font-size 字型大小

七、less 基礎

1、維護 css 的弊端

css 是一門非程式式語言，沒有變數、函式、SCOPE (作用域) 概念

  • css 需要書寫大量看似沒有邏輯的程式碼，css 冗餘度是比較高的
  • 不方便維護及擴充套件，不利於服用
  • css 沒有很好的計算能力
  • 非前端開發工程師來講，往往會因為缺少 css 編寫經驗而很難寫出組織良好有易於維護的 css 程式碼專案

2、Less 介紹

  • Less ( Leaner Style Sheets 的縮寫) 是一門 css 擴充套件語言，也稱為 css 前處理器
  • 做為 css 的一種形式的擴充套件，它並沒有減少 css 的功能，而是在現有的 css 語法上，為 css 加入程式式語言的特性
  • 它在 css 的語法基礎上，引入了變數，Mixin（混入），運算以及函式等功能，大大簡化了 css 的編寫，並且降低了 css 的維護成本，就像它的名稱所說的那樣， less 可以讓我們用更少的程式碼做更多的事情

Less 中文網址：http://lesscss.cn/
常見的 css 前處理器：Sass、Less、Stylus

3、Less 安裝

  • 安裝 nodejs，可選擇最新的版本，網址：https://nodejs.org/zh-cn/download/
  • 檢查是否安裝成，使用 cmd 命令，輸入 node -v 檢視版本即可
  • 基於 node.js 線上安裝 Less，使用 cmd 命令 npm install -g less
  • 檢查是否安裝，使用 cmd 命令 less -v 檢視版本即可

4、Less 使用

首先新建一個字尾名為.less 的檔案，在這個檔案裡書寫 less 語句

①、Less 變數

  • 變數是指沒有固定的值，可以動態改變的，因為我們 css 中的一些顏色和數值經常使用
  • @變數名:值;

    Ⅰ、變數名命名規範

    • 必須有 @ 為字首
    • 不能包含特殊字元
    • 不能以數字開頭
    • 大小寫敏感
    • @color:pink;

    Ⅱ、變數使用規範

/*直接使用*/
body {
	color: @color;
}
a:hover {
	color:@color;
}

②、Less 編譯

  • 本質上，Less 包含一套自定義的語法及一個解析器，使用者根據這些語法定義自己的樣式規則，這些規則最終會通過解析器，編譯生成對應的 css 檔案
  • 所以，我們需要把我們的 .less 檔案，編譯生成為 .css 檔案，這樣我們的 html 頁面才能使用
  • 推薦方法 (node.js): 在當前資料夾，使用 cmd 命令 lessc style.css>style.css

VS Code Less 外掛

  • Easy Less 外掛用來把 less 檔案編譯為 css 檔案
  • 安裝完畢外掛，重新載入 vscode
  • 只要儲存一下 Less 檔案，會自動生成 css 檔案

③、Less 巢狀

  • 經常用的選擇器
#header .logo {
	width: 20px;
}
  • Less 巢狀寫法
#header {
	.logo {
		width: 20px;
	}
}

如果遇見( 交集| 偽類| 偽元素選擇器 )

  • 內層選擇器的前面沒有 & 符號，則它被解析為父選擇器的後代
  • 如果有 & 符號，它就被解析為父元素自身或父元素的偽類
a:hover {
	color: red;
}
a {
	&:hover {
		color: red;
	}
}

④、Less 運算

  • 任何數字、顏色或者變數都可以參與運算，Less 提供了加（+）、-、*、/ 算數運算

注意

  • （*） 和 （/） 的寫法
  • 對於兩個不同的單位的值之間的運算，運算結果的值取第一個值的單位
  • 如果兩個值之間只有一個值有單位，則運算結果就取該單位
  • 運算子中間左右有個空格隔開 1px + 5rem
// less 運算
@baseFont: 50px;

html {
    font-size: @baseFont;
}

div {
    // rem 的單位
    width: 200rem / @baseFont;
    height: 300rem / @baseFont;
    background-color: #999;
}

// div {
//     width: 200px + 50px;
//     height: 200px * 1.5;
//     background-color: #999;
// }

// 1、參與運算的兩個數字，可以一個有單位，一個沒有單位，最終單位就是唯一的那個單位
// 2、參與運算的兩個數字，兩個都有單位，最終單位取第一個數字的單位
// 3、less的運算子中間左右必須加空格隔開

八、響應式開發

1、瞭解響應式開發原理

①、響應式開發原理

  • 就是使用媒體查詢針對不同寬度的裝置進行佈局和樣式的設定，從而適配不同裝置的目的
裝置劃分尺寸之間
超小螢幕 （手機）<768px
小屏裝置（平板）>=768px ~ 992px
中等螢幕（桌面顯示器）>=992px ~ <1200px
寬屏裝置（大桌面顯示器）>=1200px

②、響應式佈局容器

  • 響應式需要一個父級做為佈局容器，來配合自己元素來實現變化效果
  • 原理就是在不同螢幕下，通過媒體查詢來改變這個佈局容器的大小，在改變裡面子元素的排列方式和大小，從而實現不同螢幕下，看到不同的頁面和樣式變化

平時的響應式尺寸劃分

  • 超小螢幕（手機，<768px）: 設定寬度為 100%
  • 小螢幕（平板，>=768px）: 設定寬度為 750px
  • 中等螢幕（桌面顯示器，>= 992px）: 寬度設定為 970ppx
  • 大螢幕（大桌面顯示器，>=1200px）: 寬度設定為 1170px

但是也可以根據實際情況自己定義劃分

 * {
margin: 0;
    padding: 0;
}
.nav {
    width: 800px;
    margin: 0 auto;
    background-color: greenyellow;
    overflow: hidden;
    list-style: none;
}
.nav li {
    float: left;
    width: 100px;
    height: 30px;
    font-size: 16px;
    text-align: center;
    line-height: 30px;
    color: #fff;
}
/* 在小螢幕中要更改 nav 容器的寬度，以及元素的排列方式 */
@media screen and (max-width: 799px){
    .nav {
        width: 100%;
    }
    
    .nav li {
        width: 33.33%;
    }
}

2、Bootstrap

中文官網：https://www.bootcss.com/
官方文件：https://v3.bootcss.com/css/#overview

①、Bootstrap 使用方法

Ⅰ、Bootstrap 使用四部曲

  • 建立資料夾結構
  • 建立 html 骨架結構
  • 引入相關樣式檔案
  • 書寫內容

Ⅱ、建立 html 骨架結構

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- 要求當前網頁使用 IE 瀏覽器最高版本的核心來渲染 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 視口的設定：視口的寬度和裝置一直，預設的縮放比例和PC端一直，使用者不能自行縮放 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
   
    <!-- 解決 ie9 一下瀏覽器對 html5 新增標籤的不識別，並導致 css不起作用的問題 -->
    <!-- 解決 ie9 一下瀏覽器對 css3 Media Query 的不識別 -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

    <!-- bootstrap 核心樣式 -->
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    
    <title>Document</title>
</head>
<body>
    
</body>
</html>

Ⅲ、引入相關樣式檔案

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

Ⅳ、書寫內容

  • 直接拿 Bootstrap 預先定義好的樣式來使用
  • 修改 Bootstrap 原來的樣式，注意權重問題
  • 學號 Bootstrap 的關鍵在於知道它定義了那些樣式，以及這些樣式能實現什麼樣的效果
button.my_button{
     background-color: hotpink;
 }

<button type="button" class="btn btn-primary "> 預設按鈕 </button>
<button type="button" class="btn btn-primary my_button"> 修改按鈕 </button>

②、Bootstrap 佈局容器

Bootstrap 需要為頁面內容和柵(shan)格系統包裹一個 .container 容器，它提供了兩個作此用處的類

Ⅰ、container 類

  • 響應式佈局的容器 固定寬度
  • 大屏 （ >=1200px ）寬度定為 1170px
  • 中屏（ >=992px ）寬度定為 970px
  • 小屏（ >=768px ）寬度定為 750px
  • 超小屏（100%）
<div class="container">container</div>

Ⅱ、container-fluid 類

  • 流式佈局容器 百分比寬度
  • 佔據全部視口 ( viewport ) 的容器
  • 適用於製作移動端頁面開發
<div class="container-fluid">container-fluid</div>

③、柵格系統

  • 柵格系統，也叫做 “網格系統”，它是指將頁面佈局劃分為等寬的列，然後通過列數的定義來模組化頁面佈局
  • Bootstrap 提供了一套響應式、移動裝置優先的流式柵格系統，隨著螢幕或視口 ( viewport ) 尺寸的增加，系統會自動分為最多 12 列

Ⅰ、柵格選項引數

柵格系統用於通過一系列的行 ( row ) 與列 ( colimn ) 的組合來建立頁面佈局，那你的內容就可以放入這些建立好的佈局中

超小螢幕(手機)
< 768px		小屏裝置(平板)
>= 768px		中等螢幕(桌面顯示器)
>= 992px		寬屏裝置(大桌面顯示器)
>=1200px
.container 最大寬度自動(100%)750px970px1170px
類字首.col-xs-.col-sm-.col-md-,col-lg-
列 ( column) 數12121212
  • 按照不同螢幕劃分為 1~12 等份
  • 行（row）可以去除父容器作用 15px 的邊距
  • xs-extra samll：超小；sm-small：小；md-medium：中等；lg-large：大；
  • 列（column）大於 12，多餘的 " 列 ( column )" 所在的元素將作為一個整體另起一行排列
  • 每一列預設有左右 15px 的 padding
  • 可以同時為一列指定多個裝置的類名，以便劃分不同份數，例如 class=“col-md-4 col-sm-6”
<div class="container">
 <div class="row">
        <!-- 內部新增 4 個元素 -->
        <div class="col-lg-3">1</div>
        <div class="col-lg-3">2</div>
        <div class="col-lg-3">3</div>
        <div class="col-lg-3">4</div>
    </div>

    <div class="row">
        <!-- 內部新增 4 個元素 -->
        <div class="col-lg-6">1</div>
        <div class="col-lg-2">2</div>
        <div class="col-lg-2">3</div>
        <div class="col-lg-2">4</div>
    </div>

    <!-- 內部的列的子元素佔有的柵格份數小於 12 份，會留一些空白 -->
    <div class="row">
        <!-- 內部新增 4 個元素 -->
        <div class="col-lg-6">1</div>
        <div class="col-lg-2">2</div>
        <div class="col-lg-2">3</div>
        <div class="col-lg-1">4</div>
    </div>

     <!-- 內部的列的子元素佔有的柵格份數大於 12 份，會換行顯示 -->
     <div class="row">
        <!-- 內部新增 4 個元素 -->
        <div class="col-lg-6">1</div>
        <div class="col-lg-2">2</div>
        <div class="col-lg-2">3</div>
        <div class="col-lg-4">4</div>
    </div>

    <div class="row">
        <!-- 內部新增 4 個元素 -->
        <div class="col-lg-3 col-md-6">1</div>
        <div class="col-lg-3 col-md-6">2</div>
        <div class="col-lg-3 col-md-6">3</div>
        <div class="col-lg-3 col-md-6">4</div>
    </div>
</div>

Ⅱ、列巢狀

柵格系統內建的柵格系統將內容再次巢狀，也就是一個列內在分成若干份小列，可以通過新增一個新的 .row 元素和一系列 .col-sm-* 元素到已經存在的 .col-sm-* 元素內

<div class="container">
 <div class="row">
        <!-- 內部新增 4 個元素 -->
        <div class="col-lg-4 row">
            <!-- 巢狀一個新的柵格系統 -->
            <p class="col-lg-6">1</p>
            <p class="col-lg-6">2</p>
        </div>
        <div class="col-lg-4">2</div>
        <div class="col-lg-4">3</div>
    </div>
</div>

Ⅲ、列偏移

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

<div class="container">
 <div class="row">
        <div class="col-lg-4">左側</div>
        <div class="col-lg-4 col-lg-offset-4">右側</div>
        <div class="col-lg-8 col-lg-offset-2">3</div>
    </div>
</div>

Ⅳ、列排序

通過使用 .col-md-push-* 往右推和 .col-md-pull-* 往左拉兩個類就可以容易的改變列 ( column ) 的順序

<div class="container">
  <div class="row">
        <!-- 左側元素往後推 8 份位置 -->
        <div class="col-lg-4 col-lg-push-8">左側</div>
        <!-- 右側元素往前拉 4 份位置 -->
        <div class="col-lg-8 col-lg-pull-4">右側</div>

        <div class="col-lg-8 col-lg-push-2">3</div>
    </div>
</div>

④、響應式工具

  • 為了加快對移動裝置友好的頁面開發工作，利用媒體查詢功能並使用這些工具類可以方便的針對不同裝置展示或隱藏頁面內容
類名超小螢幕
手機 (<768px)		小螢幕
平板 (≥768px)		中等螢幕
桌面 (≥992px)		大螢幕
桌面 (≥1200px)
.hidden-xs隱藏可見可見可見
.hidden-sm可見隱藏可見可見
.hidden-md可見可見隱藏可見
.hidden-lg可見可見可見隱藏
  • 與之相反的，.visible-xs-* ，.visible-sm-* ，.visible-md-* ，.visible-lg-* 是針對不同裝置顯示某個內容
  • 其他多看看官方文件
<div class="container">
<div class="row">
    <!-- 在小螢幕進行隱藏 -->
        <div class="col-lg-4 hidden-sm">1</div>
        <div class="col-lg-8">2</div>
        <!-- 在大螢幕進行顯示，其他螢幕隱藏 -->
        <div class="col-lg-8 visible-lg">3</div>
    </div>
</div>

相關文章