移動web開發-佈局篇

前言：一般來說，一個比較大的網站和平臺都有PC端和移動端兩個網站點，即要寫兩套css樣式，也有一些公司採用的是響應式佈局（本質上也是兩套css樣式），今天就給大家介紹幾種移動端的佈局方式。
在介紹佈局方式之前，先介紹一下視口：viewport，viewport是移動端特有的一個承載網頁的虛擬區域，是瀏覽器承載視口，視口承載網頁。我們在head標籤內加入<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=0">這句話就完成了標準的移動端適配方案。

一、流式佈局

1.移動端佈局簡介

流式佈局就是百分比佈局，非固定像素，內容向兩側填充，理解成流動的佈局，稱爲流式佈局
使用流式佈局的時候，一般將大盒子設置爲width:100%;
所有的盒模型最好設置爲box-sizing: border-box;，防止內容溢出出現滾動條
不建議在移動端使用jquery，移動端有自己的專門的庫，後面會說到
點擊高亮：tap-highlight-color: red;
移動端瀏覽器的兼容：一般只需要加上前綴-webkit-就行了
清除圖片下間隙：圖片是行內塊元素，它有一個默認的對齊方式（文字的基線），這樣會導致圖片有一個下間隙，給圖片加display: block;讓它變成塊元素就可以清除下間隙了
多倍圖失真問題：在移動端佈局的時候，並不是所有的盒子（元素）都用百分比佈局，比如一個小圖標就需要設置固定像素，但是當圖片原來的尺寸比你預留的盒子的大小要大很多時，就需要縮小背景圖片來實現佈局，對背景設置background-size屬性即可

2.關於流式佈局的幾種佈局技巧

1. 雙飛翼佈局

所謂雙飛翼佈局就是兩邊的盒子固定大小，中間的盒子自適應。
方法一：給兩邊的盒子設置固定大小，讓他們定位到兩邊，給中間的盒子設置width:100%,並設置padding，padding的值爲兩邊盒子的寬度，注意：一定要給中間的盒子設置box-sizing: border-box；否則無效。
方法二：給兩邊的盒子設置固定大小，讓他們浮動到兩邊，此時會自動觸發BFC，給中間的盒子設置width:100%,不用設置padding也可以做到雙飛翼佈局，但個人覺得方法一更好。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .left{
            width: 100px;
            height: 100px;
            float: left;
            background: red;
        }
        .right{
            width: 100px;
            height: 100px;
            float: right;
            background: green;
        }
        .mid{
            width: 100%;
            height: 100px;
            background: #000;
        }
    </style>
</head>
<body>
<div class="left"></div>
<div class="right"></div>
<div class="mid"></div>
<!--這是方法二：
如果兩邊的盒子是浮動的話，注意看幾個div的順序，如果順序不對，就達不到雙飛翼的效果-->
</body>
</html>

2. 兩欄佈局

兩欄佈局就是並排兩個盒子，其中一個盒子是固定大小，另一個盒子是自適應。
方法一：同上
方法二：先給第一個盒子設置固定寬高，然後讓它向左或者右浮動，給第二個盒子設置overflow:hidden;觸發BFC，這樣就實現了兩欄佈局。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .left{
            width: 100px;
            height: 100px;
            float: left;/*或者right*/
            background: red;
        }
        .right{
            height: 100px;
            background: green;
            overflow: hidden;
        }
    </style>
</head>
<body>
<div class="left"></div>
<div class="right"></div>
</body>
</html>

二、響應式佈局

1.媒體查詢

所謂響應式佈局就是使用媒體查詢能針對不同屏幕區間設置不同的佈局和樣式，媒體查詢的語法：

       @media screen and (max-width: 768px) and (min-width: 320px){屬性樣式}

寫一套完整的媒體查詢的樣式：

       @media screen and (max-width: 768px) {
            /*1. 在超小屏設備的時候 768px以下      當前容器的寬度100%     背景藍色*/
            .container{
                width: 100%;
                background: blue;
            }
        }
        @media screen and (min-width: 768px) and (max-width: 992px){
            /*2. 在小屏設備的時候   768px-992px    當前容器的寬度750px    背景綠色*/
            .container{
                width: 750px;
                background: green;
            }
        }
        @media screen and (min-width: 992px) and (max-width: 1200px){
            /*3. 在中屏設備的時候   992px-1200px   當前容器的寬度970px    背景紅色*/
            .container{
                width: 970px;
                background: red;
            }
        }
        @media screen and (min-width: 1200px){
            /*4. 在大屏設備的時候   1200px以上      當前容器的寬度1170px   背景黃色*/
            .container{
                width: 1170px;
                background: yellow;
            }
        }





		/*優化寫法，screen可以省略*/
		@media (max-width: 768px) {
            /*1. 在超小屏設備的時候 768px以下      當前容器的寬度100%     背景藍色*/
            .container{
                width: 100%;
                background: blue;
            }
        }
        @media (min-width: 768px){
            /*2. 在小屏設備的時候   768px-992px    當前容器的寬度750px    背景綠色*/
            .container{
                width: 750px;
                background: green;
            }
        }
        @media (min-width: 992px) {
            /*3. 在中屏設備的時候   992px-1200px   當前容器的寬度970px    背景紅色*/
            .container{
                width: 970px;
                background: red;
            }
        }
        @media (min-width: 1200px){
            /*4. 在大屏設備的時候   1200px以上      當前容器的寬度1170px   背景黃色*/
            .container{
                width: 1170px;
                background: yellow;
            }
        }

更多的響應式佈局可以參考bootstrap文檔 http://www.bootcss.com/ ，Bootstrap提供了一套完整的響應式框架，推薦去系統地學一學。

三、rem佈局

1.less

一般rem佈局都會用less或者sass去做適配方案，所以我們先學習一下less：

1.less的變量

@charset "UTF-8";//使用less之前最好加上編碼語句
@mainColor:#e92323;//變量的聲明
@className:box;

div{
  background: @mainColor;
}
a:hover{
  color: @mainColor;
}

.@{className}{//字符串拼接時，要用{}把變量括起來
  color: @mainColor;
}

用less編譯後的css文件是這樣的：

div {
  background: #e92323;
}
a:hover {
  color: #e92323;
}
.box {
  color: #e92323;
}

2.混入

在 LESS 中，混入是指在一個 CLASS 中引入另外一個已經定義的 CLASS

類混入

.w50{
  width: 50%;
}
.f_left{
  float: left;
}
.f_right{
  float: right;
}
.w50-f_left{
  .w50();//就像一個函數一樣，用已有的類調用
  .f_left();
}

less編譯之後是這樣的：

.w50 {
  width: 50%;
}
.f_left {
  float: left;
}
.f_right {
  float: right;
}
.w50-f_left {
  width: 50%;
  float: left;
}

函數混入

.w50(){
  width: 50%;
}
.f_left(){
  float: left;
}
.w50-f_left{
  .w50();//相當於函數調用
  .f_left();
}

less編譯後的文件是：（函數混入比類混入的好處是函數混入編譯後的css文件代碼量更少）

.w50-f_left {
  width: 50%;
  float: left;
}

關於函數的傳參問題：
1.如果沒有定義參數，調用的時候不傳參
2.如果函數定義了參數（沒有默認值），調用的時候必須傳參
3.定義了參數（有默認值），調用的時候可傳可不傳

.f(@direction:left){//設置參數的方法，和定義變量是一樣的
  float: @direction;
}
.borderRadius(@width:100px){
  border-radius: @width;
  -webkit-border-radius:@width;
  -moz-border-radius:@width;
  -o-border-radius:@width;
  -ms-border-radius:@width;
}

.w50-f_left{
  .f(right);//使用傳參的方法更加方便
  .borderRadius(20px);
}

less編譯後的css文件是：

.w50-f_left {
  float: right;
  border-radius: 20px;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  -o-border-radius: 20px;
  -ms-border-radius: 20px;
}

3.嵌套

嵌套就是在A選擇器裏面嵌套一個B選擇器，用於B是A的後代時：
注：需要連接的地方（使用僞類選擇的時候）用&連接

.wjs_app{
  display: block;
  img{
    display: none;
  }
  /*需要連接的情況：&*/
  &:hover{
    img{
      display: block;
    }
  }
  > div{
    display: block;
  }
}

編譯後的css文件是：

.wjs_app {
  display: block;
}
.wjs_app img {
  display: none;
}
.wjs_app:hover img {
  display: block;
}
.wjs_app > div {
  display: block;
}

4.導入

就像c語言引用頭文件一樣，less可以導入其他的less文件：用@import "文件名"來進行導入

比如有一個文件名叫topBar.less的文件，我要在另一個less文件中導入它：

@import "topBar";

5.運算和內置函數

less可以用進行一些基本運算：

@num:5;
ul{
  width: 100%*@num;
  li{
    width: 100%/@num;
    color: red+yellow+blue;
    background: gray*0.3;
    /*內置函數*/
    border-color: darken(red,20%);
  }
}

上面的darken(red,20%);是less的一個內置函數，更多的內置函數參考文檔 https://www.html.cn/doc/less/

6.在瀏覽器中使用less

像引入css文件一樣引入less文件：

 <link rel="stylesheet" type="text/less" href="test.less">

然後引入js文件：

<script src="https://cdn.bootcss.com/less.js/3.9.0/less.min.js"></script>

2.rem佈局

1.rem介紹

rem是相對單位
em大小是基於父元素的字體大小
rem的大小是基於html元素的字體大小
r 意思 root 根元素，html標籤
rem佈局的優勢：不管是流式佈局、flex佈局還是響應式佈局，他們都是隻能做到寬度的自適應，而rem可以做到寬度和高度一起自適應
rem佈局：通過控制html上的字體大小去控制頁面上所有以rem爲單位的基準值控制尺寸，這樣當設備發生變化的時候，只需要改變html上的字體大小就可以做到自適應了。

2.rem佈局實現

一般來說,要做rem適配比較麻煩且不好維護，因爲市面上的設備更新快，要做rem適配的流程大概是這樣的：
1.拿到頁面設計稿，測量設計稿的寬度並記錄
2.預設一個html字體基準值，比如是100px，（意思就是假如設備是設計稿的寬度，就把設置html上的字體大小爲100px）然後測量設計稿的元素（盒子）的大小並把單位px轉成rem。（比如在設計稿上某個盒子的高是90px，就把它的高設置爲0.9rem）
3.當設備大小改變時，只需要改變html上的字體大小就可做到適配。
4.換算公式：當前html的字體大小=預設基準值/設計稿寬度*當前設備的寬度
我們可以通過js和媒體查詢完成以上步驟，但爲了更好地維護，我們可以用less來做適配
步驟如下：

1.設置變量：

@charset "UTF-8";
//變量
//rem適配方案不好維護  設備會更新  設計稿尺寸  預設基準值
//適配主流設備十幾種
@adapterDeviceList:750px,720px,640px,540px,480px,424px,414px,400px,384px,375px,360px,320px;
//設計稿尺寸
@psdWidth:750px;
//預設基準值
@baseFontSize:1000px;
//設備的種類
@len:length(@adapterDeviceList);
//主體顏色
@snColor:#fabc09;

2.遍歷設備

.adapterMixin(@index) when ( @index > 0){
  @media (min-width: extract(@adapterDeviceList,@index)){
    html{
      font-size: @baseFontSize / @psdWidth * extract(@adapterDeviceList,@index);
    }
  }
  .adapterMixin( @index - 1);
}

.adapterMixin(@len);

//less裏面沒有for循環，可以採用函數的迭代來遍歷循環，要注意迭代結束的條件

3.生成適配方案

把上面兩段代碼放在一個less文件裏，就可以生成如下css文件，你可以添加更新設備大小，維護性高

@media (min-width: 320px) {
  html {
    font-size: 426.66666667px;
  }
}
@media (min-width: 360px) {
  html {
    font-size: 480px;
  }
}
@media (min-width: 375px) {
  html {
    font-size: 500px;
  }
}
@media (min-width: 384px) {
  html {
    font-size: 512px;
  }
}
@media (min-width: 400px) {
  html {
    font-size: 533.33333333px;
  }
}
@media (min-width: 414px) {
  html {
    font-size: 552px;
  }
}
@media (min-width: 424px) {
  html {
    font-size: 565.33333333px;
  }
}
@media (min-width: 480px) {
  html {
    font-size: 640px;
  }
}
@media (min-width: 540px) {
  html {
    font-size: 720px;
  }
}
@media (min-width: 640px) {
  html {
    font-size: 853.33333333px;
  }
}
@media (min-width: 720px) {
  html {
    font-size: 960px;
  }
}
@media (min-width: 750px) {
  html {
    font-size: 1000px;
  }
}

移動web開發-佈局篇

一、流式佈局

1.移動端佈局簡介

2.關於流式佈局的幾種佈局技巧

1. 雙飛翼佈局

2. 兩欄佈局

二、響應式佈局

1.媒體查詢

更多的響應式佈局可以參考bootstrap文檔 http://www.bootcss.com/ ，Bootstrap提供了一套完整的響應式框架，推薦去系統地學一學。

三、rem佈局

1.less

1.less的變量

2.混入

3.嵌套

4.導入

5.運算和內置函數

6.在瀏覽器中使用less

2.rem佈局

1.rem介紹

2.rem佈局實現

移動端的佈局就說到這裏，關於移動端的特有事件、專用插件庫等知識可以參考我的另一篇文章

HTML頁面關於高分屏的設置

北歐瑞典挪威芬蘭瑞士TikTok海外網紅與YouTube博主的合作模式

歐洲英國德國法國TikTok與YouTube海外網紅達人的完美合作策略

druid數據源 xml配置

ES6入門基礎知識

Linux面試題史上最全總結

CleanWebpackPlugin is not a constructor 報錯原因

推薦一些好用的插件，可搭配react使用

JS特效-三大家族-原生封裝

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結