移动端常见布局

1流式布局(百分比布局)

  • 流式布局就是百分比布局,也称非固定像素布局。

  • 通过盒子宽度设置成百分比来根据屏幕的宽度来进行伸缩,不受固定像素限制,内容向两侧填充。

  • 流式布局方式是移动web开发使用的比较常见的布局方式

  • max-width 最大宽度(max-height 最大高度)

  • min-width 最小宽度(min-hight 最小高度)

京东首页案例   

注意:里面的图片默认和文字基线对齐,注意要添加vertical-align: middle; 让图片和文字中线对齐,解决图片底部留白问题

移动端常见布局

 

 

部分重要代码

 

 

<!-- 首先添加meta  viewport属性 设置视口 -->
    <meta name="viewport"  content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">

初始化body样式

body {
/* 让body和设备一样宽 */
    width: 100%;
    margin: 0 auto;
  /* 给定最大宽度 */
    max-width: 640px;
    /* 给定最小宽度 */
    min-width: 320px;
    font: 14px/1.5 -apple-system, Helvetica, sans-serif;
    color: #666;
}
 
盒子用百分比给宽度
 
.app ul li:nth-child(1) {
    width: 8%;
}
.app ul li:nth-child(2) {
    width: 10%;
}
.app ul li:nth-child(3) {
    width: 57%;
}
.app ul li:nth-child(4) {
    width: 25%;
    background-color: #f63515;
}
 
/* 搜索模块 */
.search-wrap {
    position: fixed;
    /* 解决子盒子.search外边距合并问题 */
    overflow: hidden;
    height: 44px;
    /* 固定定位的盒子需给定宽度 ,且给百分比需在一定范围内*/
    width: 100%;
    max-width: 640px;
    min-width: 320px;

}

/* 左右两个盒子用定位 不占位置*/
.search-wrap .search-btn,
.search-wrap .search-login {
    position: absolute;
    top: 0;
    width: 40px;
    height: 44px;

}

.search-wrap .search-btn {
    left: 0;
}

.search-wrap .search-login {
    right: 0;
}

/* 使用伪元素添加小图标 */
.search-wrap .search-btn::after {
    content: "";
    display: block;
    position: absolute;
    bottom: 12px;
    right: 6px;
    width: 20px;
    height: 18px;
    background: url(../images/s-btn.png) no-repeat;
    /* 背景图缩放 */
    background-size: 20px 16px;
}

/* 中间盒子不给宽,左右margin值留出空白,使盒子能跟随设备宽度伸缩 */
.search-wrap .search {
    position: relative;
    height: 30px;
    margin: 7px 50px 0;
    background-color: #fff;
    border-radius: 15px;
}
/* 放大镜 */
.search-wrap .search .sou {
    position: absolute;
    top: 8px;
    left: 53px;
    width: 18px;
    height: 15px;
/* 二倍精灵图技术,先缩放整张精灵图后再量坐标,代码里精灵图尺寸也要缩放 */
    background: url(../images/jd-sprites.png) no-repeat -83px 0;
    background-size: 200px;
}
 
/* 主体内容 */
/* 滑动图 */
.main-content .slider img {
    width: 100%;
}

/* 品牌日 */
.main-content .brand div {
    float: left;
    width: 33.33%;
}

.main-content .brand div img {
    width: 100%;
}

/* 导航模块 */
.main-content .nav a {
    /* 添加浮动就不需要转换行内块 */
    float: left;
    width: 20%;
    text-align: center;
}

.main-content .nav a img {
    width: 40px;
    margin: 10px 0;

}

.main-content .nav a span {
    /* 转换为块级元素,另起一行显示 */
    display: block;
}

移动端常见布局

上一篇:iOS Abort问题系统性解决方案


下一篇:fiddler-04(怎么对APP抓包)