2020年史上最全移動端Web整理從開發基礎到實戰(三)

1、touch事件的缺陷

咱們在上面《頁面分類》的項目中，對 tap 事件的處理使用的是 touch 事件處理的，由於若是使用 click 事件的話，總會有延時。

可是呢，touch 事件並非完美的，無論是咱們本身封裝的 tap 事件，仍是 zepto 自帶的 tap 事件，在移動端都有一個致命的缺陷，就是「點透」。

什麼是「點透」呢？

假若有兩個盒子，盒子A和盒子B，若是盒子A在盒子B的上面，當咱們使用 tap 事件點擊盒子A的時候，盒子B會觸發 click 事件，這就是點透。

觸發這兩個事件的順序是 tap 事件，而後是 click 事件。由於 tap 事件內部是 touch 事件處理的，而 touch 事件是先於 click 事件觸發的。

這個時候，咱們既想無延時，又不想觸發點透效果，並且有的時候，咱們但願咱們的網頁不只能夠在移動端訪問，在 PC 模式下也能夠訪問，可是 tap 事件只能在移動端使用，因此只能用 click 事件，可是 click 又有延時，怎麼辦呢？

咱們知道， touch 事件只能在移動端使用，這個咱們沒法改變，因此咱們只能改變延時的問題，因而咱們就引入了 "fastclick.js" 庫文件，解決 click 的延時問題。

使用方式：

一、引入 fastclick.js 文件。

二、在 script 中加入如下函數：

原生 js 的話，加入：

if ('addEventListener' in document) {
	document.addEventListener('DOMContentLoaded', function() {
      	// document.body 表示整個body下的全部元素都是用fastclick效果，能夠修改。
		FastClick.attach(document.body);
	}, false);
}
複製代碼

jQuery 或 Zepto 的話：

$(function() {
	FastClick.attach(document.body);
});
複製代碼

三、正常使用 元素.addEventListener("click", function(){}) 或者 元素.on("click", function(){}) ，來使用改裝事後的 click 事件，這個 click 事件沒有延時。

2、移動端的一些經常使用插件

見識到 fastclick 插件的好處以後，咱們就挖掘出了更多好用的插件，能夠大大提升咱們開發的效率。

一、iScroll

如下爲官方介紹：

iScroll是一個高性能，資源佔用少，無依賴，多平臺的 javascript 滾動 插件。

它能夠在桌面，移動設備和智能電視平臺上工做。它一直在大力優化性能和文件大小以便在新舊設備上提供最順暢的體驗。

iScroll不只僅是 滾動。它能夠處理任何須要與用戶進行移動交互的元素。在你的項目中包含僅僅4kb大小的iScroll，你的項目便擁有了滾動，縮放，平移，無限滾動，視差滾動，旋轉功能。給它一個掃帚它甚至能幫你打掃辦公室。

即便平臺自己提供的滾動已經很不錯，iScroll能夠在此基礎上提供更多難以想象的功能。具體來講：

細粒度控制滾動位置，甚至在滾動過程當中。你老是能夠獲取和設置滾動器的x，y座標。 動畫可使用用戶自定義的擦出功能（反彈'bounce'，彈性'elastic'，回退'back'，...）。 你能夠很容易的掛靠大量的自定義事件（onBeforeScrollStart, * 開箱即用的多平臺支持。從很老的安卓設備到最新的iPhone，從Chrome瀏覽器到IE瀏覽器。

API:caibaojian.com/iscroll-5/

使用方式：

一、但願你的結構以下，可是不限定標籤（下面的 ul 能夠改成 div，li 能夠改成 p 等，不限定標籤類型）。

<div id="wrapper">
    <ul>
        <li>...</li>
        <li>...</li>
        ...
    </ul>
</div>
複製代碼

二、在 script 標籤中初始化 iScroll。

var wrapper = document.getElementById('wrapper');
var myScroll = new IScroll(wrapper);
複製代碼

若是是 jQuery 的話更簡單了，一句話：

var myScroll = new IScroll(".wrapper");
複製代碼

三、若是想實現像滾輪，顯示滾動條等效果，能夠在初始化的時候，將這些需求做爲對象，填入第二個參數中，好比，增長滾輪上下滾動操做和顯示滾動條的效果：

var myScroll = new IScroll(".wrapper", {
  mouseWheel: true, // 使用滾輪
  scrollbars: true  // 顯示滾動條
});
複製代碼

如此簡單三步操做，就能夠輕鬆實現你想要的功能。

二、swipe

swipe.js 是一個比較有名的觸摸滑動插件，它可以處理內容滑動，支持自定義選項，你可讓它自動滾動，控制滾動間隔，返回回調函數等。常常做爲輪播圖使用。

使用方法：

一、引入 swipe.js 文件

二、但願你的 html 結構爲（不限定標籤名稱）：

<div id='slider' class='swipe'>
  <div class='swipe-wrap'>
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>
複製代碼

三、對其格式進行設定（固定寫法，最好不要修改，固然類名稱須要修改）

.swipe {
  overflow: hidden;
  visibility: hidden;
  position: relative;
}
.swipe-wrap {
  overflow: hidden;
  position: relative;
}
.swipe-wrap > div {
  float:left;
  width:100%;
  position: relative;
}
複製代碼

三、在 script 中進行初始化操做：

window.mySwipe = Swipe(document.getElementById('slider'));
複製代碼

四、若是你想要自動輪播，滑動等操做，須要在初始化的第二個參數中，引入一個對象，好比：

window.mySwipe = new Swipe(document.getElementById('slider'), {
  startSlide: 2,  // 默認顯示第二張圖片
  speed: 400,     // 過渡400ms
  auto: 3000,     // 輪播間隔 2s
  continuous: true,  // 循環輪播（默認開啓）
  disableScroll: false,  // 禁止滑動（默認關閉）
  stopPropagation: false,
  callback: function(index, elem) {},
  transitionEnd: function(index, elem) {}
});
複製代碼

五、固然你還能夠在 PC 上使用左右兩個按鈕來上一張下一張翻頁。swipe 會提供 next() , prev() 等函數來實現上一張下一張翻頁。好比：

document.getElementById('btn1').onclick = function(){
  window.mySwipe.prev(); // 調用系統的prev()方法
};

document.getElementById('btn2').onclick = function(){
  window.mySwipe.next(); // 調用系統的next()方法
};
複製代碼

三、swiper

swiper 與 swipe 相似，均可以提供輪播觸摸滑動的效果，只不過 swiper 可以提供的特效更多，更加炫酷，相應的體積也更大。

使用說明： 參考連接：www.swiper.com.cn/usage/index…

須要注意的是，swiper 不一樣於 swipe，它也是結構固定，不限標籤的，惟一的區別是類樣式的名稱是不可改變的。由於它引入了庫文件的 css 樣式。因此最好不要改變類樣式的名稱。具體的內容能夠參考官網，有不少詳細的使用說明和特效演示。

臨時Tips：overflow:hidden 可讓子元素浮動的父盒子由高度爲0，到自動伸縮。

3、響應式佈局

常見的網頁佈局方式分爲如下四種：

一、固定寬度佈局：爲網頁設置一個固定的寬度，一般以px作爲長度單位，常見於PC端網頁。

二、流式佈局：爲網頁設置一個相對的寬度，一般以百分比作爲長度單位。

三、柵格化佈局：將網頁寬度人爲的劃分紅均等的長度，而後排版佈局時則以這些均等的長度作爲度量單位，一般利用百分比作爲長度單位來劃分紅均等的長度。

四、響應式佈局：經過檢測設備信息，決定網頁佈局方式，即用戶若是採用不一樣的設備訪問同一個網頁，有可能會看到不同的內容，通常狀況下是檢測設備屏幕的寬度來實現。

注：以上幾種佈局方式並非獨立存在的，實際開發過程當中每每是相互結合使用的。"

一、響應式佈局

響應式佈局，意在實現不一樣屏幕分辨率的終端上瀏覽網頁的不一樣展現方式。

經過響應式設計能使網站在手機和平板電腦上有更好的瀏覽閱讀體驗，以下圖：

如上圖所示，屏幕尺寸不同展現給用戶的網頁內容也不同，咱們利用 媒體查詢 能夠檢測到屏幕的尺寸（主要檢測寬度），並設置不一樣的CSS樣式，就能夠實現響應式的佈局。

二、響應式佈局的缺點

咱們利用響應式佈局能夠知足不一樣尺寸的終端設備很是完美的展示網頁內容，使得用戶體驗獲得了很大的提高，可是爲了實現這一目的咱們不得不利用媒體查詢寫不少冗餘的代碼，使總體網頁的體積變大，應用在移動設備上就會帶來嚴重的性能問題。

響應式佈局經常使用於企業的官網、博客、新聞資訊類型網站，這些網站以瀏覽內容爲主，沒有複雜的交互。

三、屏幕尺寸的劃分

通常咱們會對常見的設備尺寸進行劃分後，再分別肯定爲不一樣的尺寸的設備設計專門的佈局方式，以下圖所示

類型	佈局寬度
大屏幕	>= 1200px
默認	>= 980px
平板	>= 768px
手機到平板之間	<= 767px
手機	<= 480px

四、媒體查詢

參考連接：www.runoob.com/cssref/css3…

使用 @media 查詢，你能夠針對不一樣的媒體類型定義不一樣的樣式。

@media 能夠針對不一樣的屏幕尺寸設置不一樣的樣式，特別是若是你須要設置設計響應式的頁面，@media 是很是有用的。

當你重置瀏覽器大小的過程當中，頁面也會根據瀏覽器的寬度和高度從新渲染頁面。

CSS 語法：

@media mediatype and|not|only (media feature) {
    /*CSS-Code*/
}

/*或者引入不一樣樣式文件的判斷：當知足某個條件的時候，引入mystylesheet.css樣式*/
<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">
複製代碼

mediatype 取值:

all 用於全部設備

print 用於打印機和打印預覽

screen 用於電腦屏幕，平板電腦，智能手機等。

speech 應用於屏幕閱讀器等發聲設備

and|not|only：

and 同時知足，至關於 &&；

not 取反（通常寫在 mediatype 前面）

示例：

<style>
  body{
    background-color: red;
  }
  /* 不在768-992之間的時候，設置背景顏色爲藍色*/
  @media not screen and (min-width: 768px) and (max-width: 992px){
    body{
      background-color: blue;
    }
}
</style>
複製代碼

media feature 取值：（主要關注如下三個寬度）

device-height 定義輸出設備的屏幕可見高度。

device-width 定義輸出設備的屏幕可見寬度。

max-device-height 定義輸出設備的屏幕可見的最大高度。

max-device-width 定義輸出設備的屏幕最大可見寬度。

min-device-width 定義輸出設備的屏幕最小可見寬度。

min-device-height 定義輸出設備的屏幕的最小可見高度。

max-height 定義輸出設備中的頁面最大可見區域高度。

max-width 定義輸出設備中的頁面最大可見區域寬度。

min-height 定義輸出設備中的頁面最小可見區域高度。

min-width 定義輸出設備中的頁面最小可見區域寬度。

4.一、min-width 與 min-device-height 的區別

device 表示的是設備，因此加了 device 的 範圍取值表示的是設備的寬度範圍。

• 在移動端，因爲經過模擬器改變的是移動端設備的寬度，因此 min-width 與 min-device-height 效果同樣；
• 在 PC 端，若是改變瀏覽器的寬度，而咱們電腦的寬度並無改變，因此設備的寬度必定，最終的效果就是隻有一個範圍起做用。

4.二、案例：控制不一樣屏幕尺寸下屏幕背景色,

<style>
    .container{
        width:1200px;
        margin: 0 auto;
        height:1200px;
        background-color: red;
    }
    /*媒體查詢：注意and後面空格的添加*/
    /*iphone: w < 768px*/
    @media screen and (max-width: 768px){
        .container{
            width:100%;
            background-color: green;
        }
    }
    /*pad: w >= 768  && w< 992*/
    @media screen and (max-width: 992px) and (min-width: 768px) {
        .container{
            width:750px;
            background-color: blue;
        }
    }
    /*中等屏幕   w >= 992  && w<1200*/
    @media screen and (max-width: 1200px) and (min-width: 992px) {
        .container{
            width:970px;
            background-color: pink;
        }
    }
</style>
複製代碼

4.三、媒體查詢條件判斷的順序

緣由：若是結構如上面示例的那樣，而且媒體查詢條件由重疊的話，後面的媒體查詢樣式設置會覆蓋前面的媒體查詢設置，爲了不發生這種狀況，咱們就應該遵循必定的規律，使得不一樣的媒體查詢條件下，執行不一樣的樣式，而不會發生衝突。

特色：

向上兼容：若是設置了寬度更小時的樣式，默認這些樣式也會傳遞到寬度更大的條件範圍內.

向下覆蓋：寬度更大的樣式會將前面寬度更小的樣式覆蓋

書寫建議：

• 若是是判斷最小值 (min-width)，那麼範圍就應該從小到大寫
• 若是是判斷最大值 (max-width)，那麼範圍就應該從大到小寫

例如：

@media screen and (min-width: 768px){
  body{
    background-color: green;
  }
}
!*w:992!1200 blue  min-width: 992px:當屏幕的寬度大於等於992的時候*!
@media screen and (min-width: 992px){
  body{
    background-color: blue;
  }
}
!*w>1200 pink*!
@media screen and (min-width: 1200px){
  body{
    background-color: pink;
  }
}
複製代碼

4、Bootstrap

一、常見的響應式框架

隨着Web應用變的愈來愈複雜，在大量的開發過程當中咱們發現有許多功能模塊很是類似，好比輪播圖、分頁、選項卡、導航欄等，開發中每每會把這些具備通用性的功能模塊進行一系列封裝，使之成爲一個個組件應用到項目中，能夠極大的節約開發成本，將這些通用的組件縮合到一塊兒就造成了前端框架。

常見的響應式框架有：

一、Bootstrap

官網：www.bootcss.com/

簡潔、直觀、強悍的前端開發框架，讓web開發更迅速、簡單。

來自 Twitter，粉絲衆多，是目前最受歡迎的前端框架。

二、Amaze UI

官網：amazeui.org/

中國首個開源 HTML5 跨屏前端框架。

Amaze ~ 妹子UI，國人開發，後起之秀！

三、Framework7

官網：www.framework7.cn/

Framework7 是一款免費、開源的移動HTML框架，主要用於開發混合手機App或者網頁App，某些應用場景的體驗幾乎與原生開發的 iOS 和 Android 應用如出一轍，同時也是一款不可獲取的應用原型快速開發及展現工具。

Framework7 主要的做用就是讓你有機會可以使用 HTML，CSS 和 JavaScript 簡單明瞭地開發 iOS 和 Android 應用。Framework7 是徹底開放的，它徹底沒有限制你進行打開腦洞的創造，同時還提供了一些解決方案。

Framework7 並不支持全部平臺。爲了給你帶來最好的體驗感覺，它只專一於 iOS 和 Google Material 設計風格。

二、bootstrap

Bootstrap是當前最流行的前端UI框架(有預製界面組件)

Bootstrap 是最受歡迎的 HTML、CSS 和 JS 框架，用於開發響應式佈局、移動設備優先的 WEB 項目。

Bootstrap是基於HTML5和CSS3開發的，它在jQuery的基礎上進行了更爲個性化和人性化的完善，造成一套本身獨有的網站風格，併兼容大部分jQuery插件。

Bootstrap 的全部 JavaScript 插件都依賴 jQuery。

2.一、BootStrap的版本瞭解

• 2.x.x:兼容性好 / 代碼不夠簡潔，功能不夠完善
• 3.x.x:穩定性好,放棄了IE6-IE7,對IE8的支持通常 /偏向於響應式佈局開發，移動設備優先的web項目開發
• 4.x.x:測試階段，偏向於響應式，移動設備

2.二、bootstrap 基本模板

<!--說明頁面是html5頁面-->
<!DOCTYPE html>
<!--頁面使用的語言環境-->
<html lang="zh-CN">
<head>
    <!--指定當前頁面的字符編碼-->
    <meta charset="utf-8">
    <!--若是是IE，會使用最新的渲染引擎進行渲染-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!--標準的視口設置-->
    <meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=0">
    <!-- 上述3個meta標籤*必須*放在最前面，任何其餘內容都*必須*跟隨其後！ -->
    <title>Bootstrap 101 Template</title>
    <!-- Bootstrap核心樣式文件 -->
    <link href="../lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries: 這兩個文件的引入是爲了支持IE8下面的html5元素和媒體查詢：由於在IE8下面默認不支持HTML5和媒體查詢，因此須要引入兩個插件-->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// 若是經過file://來查看文件，那麼respond.js文件不能正常工做，說明必須在http://形式下訪問纔有用-->
    <!--html5shiv.min.js：爲了在IE8下面支持HTML標籤 respond.min.js：爲了在IE8下面支持媒體查詢-->
    <!--[if lt IE 9]> <!--只有IE9以前纔會加載這兩個文件 lt:less than-->
    <script src="../lib/html5shiv/html5shiv.min.js"></script>
    <script src="../lib/respond.js/respond.js"></script>
    <![endif]-->
</head>
<body>
<h1>你好，世界！</h1>

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) bootstrap是依賴jquery的-->
<script src="../lib/jquery/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed bootstarp核心js文件-->
<script src="../lib/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
複製代碼

2.三、bootstrap 佈局容器

bootstrap 的 css 樣式中，有一個起着支撐整個頁面框架的容器，也叫佈局容器，它相似於咱們的版心結構。

一、.container 實現固定寬度並支持響應式佈局的容器。

當屏幕寬度 > 1200，則頁面寬度固定爲 1170px
當屏幕寬度 992~1200，則頁面寬度固定爲 970px
當屏幕寬度 768~992，則頁面寬度固定爲 750px
當屏幕寬度 < 768，則頁面寬度固定爲 100%.
複製代碼

二、.container-fluid ：實現寬度爲全屏 100% 的容器。

2.四、bootstrap 柵格系統

概念：Bootstrap 提供了一套響應式、移動設備優先的流式柵格系統，隨着屏幕或視口（viewport）尺寸的增長，系統會默認分爲12列。

柵格系統用於經過一系列的行（row）與列（column）的組合來建立頁面佈局，你的內容就能夠放入這些建立好的佈局中。

「行（row）」必須包含在 .container （固定寬度）或 .container-fluid （100% 寬度）中，以便爲其賦予合適的排列（aligment）和內補（padding）。

你的內容應當放置於「列（column）」內，而且，只有「列（column）」能夠做爲行（row）」的直接子元素。你可使用相似 .row 和 .col-xs-4 這種預約義的類，能夠用來快速建立柵格佈局。Bootstrap 源碼中定義的 mixin 也能夠用來建立語義化的佈局。

經過爲「列（column）」設置 padding 屬性，從而建立列與列之間的間隔（gutter）。經過爲 .row 元素設置負值 margin 從而抵消掉爲 .container 元素設置的 padding，也就間接爲「行（row）」所包含的「列（column）」抵消掉了padding。

柵格系統中的列是經過指定1到12的值來表示其跨越的範圍。例如，三個等寬的列可使用三個 .col-xs-4 來建立。

若是一「行（row）」中包含了的「列（column）」大於 12，多餘的「列（column）」所在的元素將被做爲一個總體另起一行排列。

示例：

<div class="row">
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"></div>
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"></div>
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"></div>
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"></div>
</div>
複製代碼

解釋：上面四個div，若是在超小屏幕上就 100%顯示（佔12柵格）；在小屏幕上，每一個div佔50%顯示；在中等屏幕上，每一個div佔25%顯示；在大屏幕上，每一個div佔33.33%顯示。

柵格參數：

.col-xs-：超小屏幕 手機 (<768px)

.col-sm- : 小屏幕 平板 (≥768px)

.col-md- : 中等屏幕 桌面顯示器 (≥992px)

.col-lg- : 大屏幕 大桌面顯示器 (≥1200px)

注意：

1.柵格系統是往上兼容的：意味着小屏幕上的效果在大屏幕上也是能夠正常顯示的人，可是大屏幕上的設置在小屏幕上卻沒法正常顯示。

2.Row能夠再次嵌套在列中。若是不能填滿整列，則默認從左排列，若是超出，則換行展現。

2.五、列排序

• col-xs-offset-n：往右偏移 n 個柵格，可是會影響後面全部元素也偏移 n 個柵格。（內部經過 margin-left 實現的）
• col-xs-push/pull-n：push 往右推，pull 往左拉。往右偏移 n 個柵格，可能會與後面的元素重疊。（內部實現原理經過定位實現）

2.六、列嵌套

列嵌套就是列中還能夠嵌套行，注意不能嵌套版心 container 和 container-fluid。

由於：

若是在外層沒有再包含container,那麼嵌套列的寬度就是參參照當前所在的柵格；

若是外層添加了container,那麼參照就是核心樣式文件所設置的容器寬度

<div class="container">
    <div class="row">
        <div class="col-xs-1">1</div>
        <div class="col-xs-1">2</div>
        <div class="col-xs-6">
            <!-- 1.若是在外層沒有再包含container,那麼嵌套列的寬度就是參參照當前所在的柵格 2.若是外層添加了container,那麼參照就是核心樣式文件所設置的容器寬度-->
            <!--<div class="container">-->
                <div class="row">
                    <div class="col-xs-6">3</div> <!--這裏的6佔的是直接父div的一半，而不是container的一半-->
                    <div class="col-xs-6">4</div>
                </div>
            <!--</div>-->
        </div>
        <div class="col-xs-1">4</div>
        <div class="col-xs-1">5</div>
        <div class="col-xs-1">6</div>
        <div class="col-xs-1">7</div>
    </div>
</div>
複製代碼

2.七、響應式工具

（無向上兼容，內部實現是一個具體的範圍，沒有波及到其餘區域）

.hidden-xs ：在超小屏幕下不可見

.hidden-sm ：在小屏幕下不可見

.hidden-md ：在中等屏幕下不可見

.hidden-lg ：在大屏幕下不可見

示例：

<div class="container">
    <div class="row">
        <div class="col-xs-1 hidden-sm">1</div> <!--在小屏幕下不可見-->
        <div class="col-xs-1 hidden-xs">2</div> <!--在超小屏幕下不可見-->
        <div class="col-xs-6 hidden-lg">        <!--在大屏幕下不可見-->
        <div class="col-xs-1">4</div>
        <div class="col-xs-1">5</div>
        <div class="col-xs-1">6</div>
        <div class="col-xs-1">7</div>
    </div>
</div>
複製代碼

5、Less

一、Less簡介

LESS 是一種動態的樣式表語言，經過簡潔明瞭的語法定義，使編寫 CSS 的工做變得很是簡單，本質上，LESS 包含一套自定義的語法及一個解析器。

二、less 安裝

一、下載安裝 node.js 環境。（官網：nodejs.org/zh-cn/）

二、安裝完成後驗證 node 環境是否安裝成功。

在命令行中輸入：node -v 出現 node 的版本號表示安裝成功。

三、安裝 less 工具（須要聯網）。

在命令行中輸入：npm install -g less 便可下載安裝。

四、安裝後驗證 less 是否安裝成功。

命令行輸入：lessc -v 出現 less 版本號，即表示安裝成功。

三、編譯

瀏覽器只能識別 CSS，Less 只是用來提高CSS可維護性的一個工具，所最終須要將LESS編譯成CSS。

編譯方式有兩種：

一、一種是使用命令行的方式手工編譯。

在咱們編寫好一個 less 文件後，可使用命令行輸入如下指令將 less 文件編譯成 css 文件。

lessc .\test.less .\test.css
複製代碼

這種手工編譯的方式效率比較低下，通常咱們都會藉助一些編輯器來完成自動編譯。

二、這裏我使用 vscode，使用很簡單，只須要安裝插件 「Easy LESS」 ，那麼編寫的 less 文件在保存時會自動在 less 文件相同的目錄下生成 css 文件。

四、語法

一、註釋

註釋的方式有兩種：// 或者 /**/ 。

可是這兩種註釋有區別：這兩種樣式在 less 中都是註釋，可是 // 註釋不會進行編譯，也就是不會在生成的 css 文件中顯示，而 /**/ 註釋則會在 css 文件中對應顯示。

/*註釋 纔會編譯*/
//這也是樣式，可是不會進行編譯
複製代碼

二、變量

語法格式爲：@變量名：值; ，好比 @baseColor: #ccc;

使用的時候： div { color: @baseColor;}

/*變量 @變量名:值; */
@baseColor:#e92322;
a{
  color: @baseColor;
}
複製代碼

三、混入（相似於函數）

語法：.樣式名(@變量名 ：默認值) {具體樣式}

/*混入:能夠將一個定義好的樣式引入到另一個樣式中 相似於函數的調用*/
/*.addRadius{ border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; }*/
/*至關於定義一個函數的參數*/
.addRadius(@r:10px){
  border-radius: @r;
  -webkit-border-radius: @r;
  -moz-border-radius: @r;
}
div{
  width: 200px;
  height: 200px;
  /*引入已經寫好的圓角樣式*/
  /*傳入參數*/
  .addRadius(5px);
}
複製代碼

四、嵌套

嵌套能夠實現選擇器的繼承，能夠減小代碼量，同時使用代碼結構更加清晰。

/* 之前咱們寫的樣式 .jd_header{} .jd_header > div{} .jd_header > div > h3{} .jd_header > div > h3::before{} .jd_header > div > a{} .jd_header > div > a:hover{} */


/*嵌套:實現選擇器的繼承，能夠減小代碼量，同時使用代碼結構更加清晰*/
.jd_header{
  width: 100%;
  height: 200px;
  .addRadius();
  // 加 > 表示直接子元素
  > div{
    // 加 & 表示中間沒有空格爲 div::before，若是沒有 & 則是 div ::before 就錯了。
    &::before{
      content: "";
    }
    width: 100%;
    // div下面的直接子元素a
    >a{
      text-decoration: underline;
      // a::hover，中間沒有空格
      &:hover{
        text-decoration: none;
      }
    }
    > h3{
      height: 20px;
    }
    ul{
      list-style: none;
    }
  }
}

複製代碼

五、less 文件引入

咱們以前編寫好 less 文件以後，都是自動解析成 css 而後添加到 html 文件中。若是 css 的文件不少的話，就要引入不少個 link 標籤，那麼可不能夠直接引入 less 文件呢？

固然能夠。

語法：

<link rel="stylesheet/less" href="./index.less">
複製代碼

只是在 stylesheet 後面加上 less 的說明。

只是引入 less 文件是不能夠的，還須要引入解析 less 的 js 插件。

<script src="./js/less.js"></script>
複製代碼

看起來好麻煩哦，爲何要引入 less 文件，它有什麼好處嗎？

好處是：無論有多少 less 文件，只須要引入一個 less 文件就能夠了，其餘須要的 less 文件都包含在引入的這個 less 文件中。

如何在 less 文件中引入其餘 less 文件呢？

語法：

@import "other1.less";  // other.less 爲其餘 less 文件的路徑名稱
@import "other2.less";
@import "other3.less";
複製代碼

這樣，無論有多少個 less 文件，均可以寫到一個待引入的 less 文件中。

最後

還有2件事拜託你們

一：求贊 求收藏 求分享 求留言，讓更多的人看到這篇內容

二：歡迎添加個人我的微信

備註「資料」， 300多篇原創技術文章，海量的視頻資料便可得到

備註「加羣」，我會拉你進技術交流羣，羣裏大牛學霸具在，哪怕您作個潛水魚也會學到不少東西