移动端导航布局（基础属性解决大问题）

Edison 发布于2019-08-30 15:44 / 1710人阅读

摘要：移动端比较常见的一个需求是高度根据宽度进行自适应。等于视口高度的。一布局场景首页导航布局有间距样式代码页面布局与布局相同代码解析去除最后一个元素值设置布局经常会使得元素元素间莫名其妙出现空隙。

写在最前：移动端中导航的网格式布局无处无在，宽高怎么设置相适应？元素怎么居中对齐？不同场景怎么选择代码最高效？巧妙使用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布局经常会使得元素元素间莫名其妙出现空隙。可以在写代码时使得元素和元素紧紧相连，但不太方便我们编写代码，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移动端布局大数据分析解决问题移动端大数据分析

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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