移動端導航布局（基礎屬性解決大問題）

Edison 發布于2019-08-30 15:44 / 1736人閱讀

摘要：移動端比較常見的一個需求是高度根據寬度進行自適應。等于視口高度的。一布局場景首頁導航布局有間距樣式代碼頁面布局與布局相同代碼解析去除最后一個元素值設置布局經常會使得元素元素間莫名其妙出現空隙。

寫在最前：移動端中導航的網格式布局無處無在，寬高怎么設置相適應？元素怎么居中對齊？不同場景怎么選擇代碼最高效？巧妙使用margin、padding等基礎屬性，小小技巧可以解決許多煩惱！

一、Float布局 1、場景

首頁導航布局（無間距）

2、頁面布局

3、樣式代碼

.g-grid {
    text-align: center;
    overflow: hidden; 
    background: #fff;
}
.g-grid-item {
    position: relative;
    float: left; 
    width: 20%;
    padding: 10px 0;
    text-align: center;
}
.g-grid-imgWrap {
    display: inline-block;
    width: 30%; 
    height: 0; 
    padding-bottom: 30%; 
}
.g-grid-imgWrap img {
    width: 100%;
}
.g-grid-label {
    font-size: 12px;
    color: #333;
}

4、代碼解析（高度根據寬度進行自適應問題）

①、父元素g-grid通過overflow: hidden建立BFC，使得整體高度從1變成自適應。通常可使用clearfix來清除浮動的副作用

 .clearfix:after{
    display: block;
    clear: both;
    content: "";
    visibility: hidden;
    height: 0;
}
.clearfix{
    zoom:1;
}

②、子元素g-grid-item通過float: left屬性浮動起來，這也是該方法最主要的屬性。

③、移動端比較常見的一個需求是高度根據寬度進行自適應。這個時候可以使用到padding-bottom。當width和padding-bottom相等時就實現了寬高相等（注意要將height置為0），舉一反三，各種比例下也可以設置。

width: 30%; 
height: 0; 
padding-bottom: 30%;

引申：vh和vw是css引入視口的概念來代替顯示器的物理尺寸，它們作為單位的時候也可實現該效果，雖然現在兼容性慢慢變好，但是Android4.4之前不支持是硬傷。
vw：1vw等于視口寬度的1%。
vh：1vh等于視口高度的1%。

height:1vw;
width:1vw;

一、Display：inline-block布局 1、場景

首頁導航布局（有間距）

2、樣式代碼

頁面布局與Float布局相同

.g-grid {
    margin-right: -2%;
    padding: 10px 10px 0;
    font-size: 0;
    background: #fff;
}
.g-grid-item {
    position: relative;
    display: inline-block;
    width: 31.33%;
    padding-bottom: 31.33%;
    margin-right: 2%;
    margin-bottom: 10px;
}
.g-grid-imgWrap {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 20px;
}
.g-grid-imgWrap img {
    width: 100%;
    height: 100%;
}
.g-grid-label {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 20px;
    line-height: 20px;
    font-size: 12px;
    color: #333;
    text-align: center;
}

3、代碼解析（去除最后一個元素margin-right值）

①、g-grid-item設置display：inline-block布局經常會使得元素元素間莫名其妙出現空隙?？梢栽趯懘a時使得元素和元素緊緊相連，但不太方便我們編寫代碼，IDE格式化之后也會自動分開。此處建議設置父元素g-grid的font-size屬性為0就可以去掉空隙。

②、g-grid-item這些子元素之間需要間隔時用到margin-right(或者margin-left)，經常要處理最后一行設置為margin-right(或者margin-left)為0。有以下解決方法：

手動或者js為最后一個元素添加一個margin-right：0

通過偽類:nth-child(3n)來設置margin-right：0

在g-grid-item的父元素設置margin-right: -2%;（推薦該方法）

樓上的float布局也可以使用該方法去設置間隙

③、寬高多少不僅僅可以通過設置值來決定，該例子里面使用以下代碼實現了width：100%，高度為父級高度減去20px,根據場景不同來決定寫法。

position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 20px;

④、float布局和display：inline-block布局的水平居中通常使用text-align: center;，子元素在父元素里水平居中要求子元素display不為block

三、Grid布局 1、場景

網格布局（無間距）

2、頁面布局


    
      
      汽車票船票

3、樣式代碼

.g-grid {
    display: grid;
    grid-template-columns: repeat(3, 33.33%);
    grid-template-rows: repeat(3, 100px);
    background: #fff;
}
.g-grid-item {
    display: inline-grid;
    border-right: 1px solid #eee;
    border-top: 1px solid #eee;
    align-content: center
    justify-items: center;
}
.g-grid-item:nth-child(3n) {
    border-right: none;
}
.g-grid-item img {
    height: 30px;
    width: 30px;
}
.g-grid-label {
    font-size: 12px;
    color: #333;
}

4、代碼解析

①、grid布局通過grid-template-columns和grid-template-rows來設置幾列幾行
②、g-grid-item通過設置align-content: center;來使得子元素都處于垂直居中，justify-items: center來使得子元素都處于水平居中

四、Flex布局 1、場景

九宮格布局（有空隙）

2、樣式代碼

頁面布局與Grid布局相同請輸入代碼

.g-grid {
    display: flex;
    flex-wrap: wrap;
}
.g-grid-item {
    flex: 0 1 31.33%;
    margin: 0px 1% 10px;
    padding: 1.2rem;
    box-sizing: border-box;
    text-align: center;
    background: #eee;
}
.g-grid-item img {
    height: 30px;
    width: 30px;
}
.g-grid-label {
    font-size: 12px;
    color: #333;
}

3、代碼解析(Flex換行顯式且存在間距)

①、Flex布局通過flex-wrap: wrap;來進行換行，但當需要元素與元素之間存在間距時，不能使用justify-content: space-between;，減少一個元素會變成下圖：

所以該例子通過margin來設置間距，這個是比較通用的方法。

@vczhan 提供了一個思路，父級為justify-content: space-between;或者justify-content: space-around;的同時，加上

.g-grid::after {
  content: "";
  width: 31.33%;
}

可以解決三列下的問題，但是四或以上列下不固定個數的情況下還是不適用，請根據自己使用場景選擇方案。同理 @Ice丶Wing 提供的空div思路類似，也可以這么處理。
（再次謝謝兩位！）

②、.g-grid-item設置flex: 0 1 31.33%;意思是元素的本來大小為父元素的31.33%，空間不足時該元素將縮小，存在剩余空間也不放大。

當該值設為flex: 1 1 31.33%;時，減少一個元素會變成下圖：

尊重原創，如需轉載請注明出處！

GPU云服務器云服務器移動端布局 web移動端布局大數據分析解決問題移動端大數據分析

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/116255.html

CSS5:移動端頁面(響應式)

摘要：接下來做端一般都寫手機最大也就先隱藏手機菜單和按鈕優先級問題解決方法直接使用用谷歌開發者工具查看優先級里面的垂直居中再把寫成布局只要改成里面的子項目就變成一行了菜單導航導航導航導航導航到航導航導航導航導航方法切換元素的可見狀態。 CSS5:移動端頁面(響應式) 如果手機端和PC端頁面差別很大,就不要寫響應式,不要寫@media 就直接將兩個頁面拆開成兩個文件就可以了.關于判斷是手機端你...

superPershing 2019-08-30 15:53 評論0 收藏0
談談響應式布局

摘要：今天在這里就略微談一下響應式布局吧想必大家都知道響應式布局已經在這個移動端為主流的時代成為了避不開的話題之一接下來我們從小到大來談談響應式網頁設計的基本原則為什么為什么需要響應式設計想必這點不說大家都能想到答案現在是一個移動為先的時代我們要今天在這里就略微談一下響應式布局吧,想必大家都知道響應式布局已經在這個移動端為主流的時代成為了避不開的話題之一,接下來我們從小到大來談談響應式網頁...

smallStone 2019-08-29 11:30 評論0 收藏0
響應式布局入門之——側欄菜單

摘要：年月初，中共中央國務院發布了關于構建和諧勞動關系的意見，明確提出切實保障職工休息休假的權利，完善并落實國家關于職工工作時間全國年節及紀念日假期帶薪年休假等規定。下一步要抓好這項工作的落實。一直以來響應式布局都是利用的bootstrap來做，但是在手機上瀏覽的話，bootstrap樣式文件還是有點大 118k，如果再用上一些js庫的話，上個幾百k是輕輕松松了，這樣一來用移動流量的話真的...

singerye 2019-08-30 12:44 評論0 收藏0
響應式布局入門之——側欄菜單

摘要：年月初，中共中央國務院發布了關于構建和諧勞動關系的意見，明確提出切實保障職工休息休假的權利，完善并落實國家關于職工工作時間全國年節及紀念日假期帶薪年休假等規定。下一步要抓好這項工作的落實。一直以來響應式布局都是利用的bootstrap來做，但是在手機上瀏覽的話，bootstrap樣式文件還是有點大 118k，如果再用上一些js庫的話，上個幾百k是輕輕松松了，這樣一來用移動流量的話真的...

AlphaWatch 2019-08-01 15:02 評論0 收藏0
超越“虛擬的美麗”——云計算實踐再分析

摘要：云計算在年月達到了較高的點擊率次。而大數據正處于上升期，云計算正處于興旺期，網格計算沒有再出現。所以，我們第四屆中國云計算大會就是以示范引領創新實踐作為一個口號。就是說云計算已經成為行業的主旋律，不再動搖不再懷疑。云計算正在走向成熟，大數據正在發展在經歷了對云計算的認識以后，已經成為當前信息通信行業的主旋律。我們可以用維基百科看一看當前對三個重要技術概念的理解。一個是曾經人們跟云計算混...

tulayang 2019-04-25 16:49 評論0 收藏0