文章目录

1. 案例：京东移动端首页

访问地址： m.jd.com

image-20200815122844420


2. 技术选型

方案：采取单独制作移动页面方案

技术：布局采取流式布局


3. 搭建相关文件夹结构

images 背景图

upload 产品图

image-20200815122951344


4. 设置视口标签以及引入初始化样式

<meta name="viewport" content="width=device-width, user-scalable=no,
initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/index.css">

参考：https://github.com/6xiaoDi/blog–Mobile-layout/tree/a0.10
Branch： branch01

commit description：a0.10（jd首页案例—设置视口标签以及引入初始化样式 及框子）

tag：a0.10


5. 常用初始化样式

通常给body设置固定尺寸，后面按照百分比设置就行了，在页面当中不能无限放大和缩小（不能让页面变形），因此需要设置最大和最小宽度尺寸。

为了适应平板及4k高清、1080p手机，把最大限制1080px，这里我们让其小一点。

min-width: 320px; 市场上大部分手机网页定的最小宽度。

在这里插入图片描述

body {
    width: 100%;
    min-width: 320px;
    max-width: 640px;
    /*居中对齐*/
    margin: 0 auto;
    /*字体按照jd设置*/
    font-size: 14px;
    font-family: -apple-system, Helvetica, sans-serif;
    color: #666;
    line-height: 1.5;
}

image-20200815130923400

参考：https://github.com/6xiaoDi/blog–Mobile-layout/tree/a0.11
Branch： branch01

commit description：a0.11（jd首页案例—设置body样式）

tag：a0.11


6. 导航布局

image-20200815131735973


6.1 首行

image-20200815131802202

注意：宽度设置百分比，高度暂时我们先写死。

.app {
    height: 45px;
}

拾色

image-20200815132342035

.app ul li {
    height: 45px;
    background-color: #333333;
}

<body>
<!-- 顶部 -->
<header class="app">
<!-- ul>li*4   -->
    <ul>
        <li>
        </li>
        <li>
        </li>
        <li>打开京东App，购物更轻松</li>
        <li>立即打开</li>
    </ul>
</header>
</body>

image-20200815132618723

li应该有宽度，是浮动起来的，再分别设置百分比宽度，注意设置最后一个背景色是红色。

清除ul内外边距及清除ul的默认样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, user-scalable=no,initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/index.css">
    <title>Title</title>
</head>
<body>
<!-- 顶部 -->
<header class="app">
<!-- ul>li*4   -->
    <ul>
        <li>
            111
        </li>
        <li>
            222
        </li>
        <li>333</li>
        <li>444</li>
    </ul>
</header>
</body>
</html>

body {
    width: 100%;
    min-width: 320px;
    max-width: 640px;
    /*居中对齐*/
    margin: 0 auto;
    /*字体按照jd设置*/
    font-size: 14px;
    font-family: -apple-system, Helvetica, sans-serif;
    color: #666;
    line-height: 1.5;
}
ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
.app {
    height: 45px;
}
.app ul li {
    float: left;
    height: 45px;
    background-color: #333333;
}
.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;
}

image-20200815133448010

百分比布局可以拉伸了。

参考：https://github.com/6xiaoDi/blog–Mobile-layout/tree/a0.12
Branch： branch01

commit description：a0.12（jd首页案例—第一层布局）

tag：a0.12


准备填充内容及格式

<header class="app">
<!-- ul>li*4   -->
    <ul>
        <li>
            <img src="images/close.png" alt="">
        </li>
        <li>
        </li>
        <li>打开京东App，购物更轻松</li>
        <li>立即打开</li>
    </ul>
</header>

图太大了。

image-20200815133952201

必须进行缩放（官网缩放10*10），图片再水平垂直居中

.app ul li {
    float: left;
    height: 45px;
    /*垂直居中*/
    line-height: 45px;
    background-color: #333333;
    /*水平居中*/
    text-align: center;
}
.app ul li:nth-child(1) img {
    width: 10px;
}

image-20200815134329478

加第二个块的图片

        <li>
            <img src="images/close.png" alt="">
        </li>
        <li>
            <img src="images/logo.png" alt="">
        </li>

.app ul li:nth-child(2) img {
    width: 30px;
}

为啥前面图片垂直居中，第二个就不行了？

因为图片默认与文字的基线对齐，第一张图是因为图很小，和文字差不多。

=> 令图片与文字居中对齐。（字体乱码，是小迪的webstorm有点问题别在意）

image-20200815134551989

.app ul li:nth-child(2) img {
    width: 30px;
    vertical-align: middle;
}

image-20200815142427082

完整版

body {
    width: 100%;
    min-width: 320px;
    max-width: 640px;
    /*居中对齐*/
    margin: 0 auto;
    /*字体按照jd设置*/
    font-size: 14px;
    font-family: -apple-system, Helvetica, sans-serif;
    color: #666;
    line-height: 1.5;
}
ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
.app {
    height: 45px;
}
.app ul li {
    float: left;
    height: 45px;
    /*垂直居中*/
    line-height: 45px;
    background-color: #333333;
    /*水平居中*/
    text-align: center;
    color: #fff;
}
.app ul li:nth-child(1) {
    width: 8%;
}
.app ul li:nth-child(1) img {
    width: 10px;
}
.app ul li:nth-child(2) {
    width: 10%;
}
.app ul li:nth-child(2) img {
    width: 30px;
    vertical-align: middle;
}
.app ul li:nth-child(3) {
    width: 57%;
}
.app ul li:nth-child(4) {
    width: 25%;
    background-color: #F63515;
}


<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, user-scalable=no,initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/index.css">
    <title>Title</title>
</head>
<body>
<!-- 顶部 -->
<header class="app">
<!-- ul>li*4   -->
    <ul>
        <li>
            <img src="images/close.png" alt="">
        </li>
        <li>
            <img src="images/logo.png" alt="">
        </li>
        <li>打开京东App，购物更轻松</li>
        <li>立即打开</li>
    </ul>
</header>
</body>
</html>

image-20200815144314694

参考：https://github.com/6xiaoDi/blog–Mobile-layout/tree/a0.13
Branch： branch01

commit description：a0.13（jd首页案例—第一层实现）

tag：a0.13


第二层布局分类

image-20200815144631766

注意，当我们拉伸页面的时候，两侧按钮尺寸不变，但是input框的尺寸会跟随变化。

首先准备一个父盒子，左右两侧定死，用定位即可，不占位置。

剩下中间盒子，自由伸缩，我们再准备一个标准流的盒子，不设置宽度，默认与父级一样宽（随着界面自由伸缩了并自适应），只需要设置margin把两侧盒子空出来就行了。

image-20200815145311298

    <!-- 顶部 -->
    <header class="app">
    <!-- ul>li*4   -->
        <ul>
            <li>
                <img src="images/close.png" alt="">
            </li>
            <li>
                <img src="images/logo.png" alt="">
            </li>
            <li>打开京东App，购物更轻松</li>
            <li>立即打开</li>
        </ul>
    </header>
    <div class="search-wrap">
<!--        .search-btn+.search-login-->
        <div class="search-btn"></div>
        <div class="search-login"></div>
    </div>

/* 搜索 */

.search-wrap {
    position: relative;
    height: 44px;
}
.search-btn {
    position: absolute;
    top: 0;
    left: 0;
    background-color: pink;
    width: 40px;
    height: 44px;
}
.search-login {
    position: absolute;
    right: 0;
    top: 0;
    width: 40px;
    height: 44px;
    background-color: blue;
}

image-20200815150332950

继续加中间的标准流

    <div class="search-wrap">
<!--        .search-btn+.search-login-->
        <div class="search-btn"></div>
        <div class="search">
        </div>
        <div class="search-login"></div>
    </div>

.search {
    height: 44px;
    background-color: greenyellow;
}

image-20200815150631321

实际输入框是有margin的，而不是贴死。

=> margin: 0 50px;

image-20200815150817249

实际输入框不是等高的，并且是圆角形状

.search {
    height: 30px;
    background-color: greenyellow;
    margin: 0 50px;
    border-radius: 15px;
}

image-20200815151322197

顶部距离不是贴着的

=> margin-top: 7px;

image-20200815151405287

然而父级也下来了，出现了外边距合并（塌陷）的问题 =>

父级 => overflow: hidden;

image-20200815151517421

image-20200815151937675

参考：https://github.com/6xiaoDi/blog–Mobile-layout/tree/a0.14
Branch： branch01

commit description：a0.14（jd首页案例—第二层布局）

tag：a0.14


完成左侧按钮，是一个图片 => 使用before伪元素

.search-btn::before {
    content: "";
    display: block;
    width: 20px;
    height: 18px;
    background: url(../images/s-btn.png) no-repeat;
}

有点跑偏了，图很大，盒子有点小，就装不下了 => 图片缩放

image-20200815152555923

background-size: 20px 18px;

image-20200815153120435

加一点边距，并且有点偏右

margin: 14px 0 0 15px; (上右下左)

image-20200815153247608

右侧是文字，文字内容改为白色，并垂直居中

<div class="search-login">登录</div>

.search-login {
    position: absolute;
    right: 0;
    top: 0;
    width: 40px;
    height: 44px;
    background-color: blue;
    color: #fff;
    line-height: 44px;
}

image-20200815153630000

实现中间部分，两者图片，最右侧是input => 排列用定位

image-20200815153641725

左侧按钮，绝对定位 => 子绝父相

        <div class="search">
            <div class="jd-icon"></div>
        </div>

.search {
    position: relative;
    height: 30px;
    background-color: greenyellow;
    margin: 0 50px;
    border-radius: 15px;
    margin-top: 7px;
}
.jd-icon {
    width: 20px;
    height: 15px;
    position: absolute;
    top: 8px;
    left: 13px;
    background: url(../images/jd.png) no-repeat;
}

图片看不全，肯定需要缩放了。

image-20200815154150084

background-size: 20px 15px;

image-20200815154227103

后面还有一根竖线 => after

.jd-icon::after {
    content: "";
    display: block;
    width: 1px;
    height: 15px;
    background-color: #ccc;
}

跑到最前面去了 => 定位到后头

image-20200815154507020

.jd-icon::after {
    content: "";
    position: absolute;
    right: -8px;
    top: 0;
    display: block;
    width: 1px;
    height: 15px;
    background-color: #ccc;
}

image-20200815154652284

image-20200815160520924

参考：https://github.com/6xiaoDi/blog–Mobile-layout/tree/a0.15
Branch： branch01

commit description：a0.15（jd首页案例—实现第二层两侧，中间暂未实现完成）

tag：a0.15


实现搜索框里的放大镜

发现京东中做成了精灵图，在移动端如何处理呢？

单独图片可以随意缩放，而对于精灵图，一缩放它的位置就会受到影响了，就需要重新计算和测量位置了。

image-20200815160709615

    <div class="search-wrap">
<!--        .search-btn+.search-login-->
        <div class="search-btn"></div>
        <div class="search">
            <div class="jd-icon"></div>
<!--     放大镜       -->
            <div class="sou"></div>
        </div>
        <div class="search-login">登录</div>
    </div>

.sou {
    width: 18px;
    height: 15px;
    background-color: pink;
}

image-20200815161122040

绝对定位调整位置

.sou {
    position: absolute;
    top: 8px;
    left: 50px;
    width: 18px;
    height: 15px;
    background-color: pink;
}

image-20200815161230319

=> background: url(…/images/jd-sprites.png) no-repeat;

此时显示的是精灵图，最上方的jd logo

image-20200815161402328

jd-sprites

计算位置先

image-20200815161825482

这里不能直接缩放精灵图，这样整个图都缩放了，我们量取的距离也不对了。


7. 二倍精灵图做法

  • 在firework里面把精灵图等比例缩放为原来的一半
  • 之后根据大小 测量坐标
  • 注意代码里面background-size也要写： 精灵图原来宽度的一半

先选中图，然后勾选等比例缩放，再输入我们要缩放的宽度，高度会同步等比例缩放。

image-20200815163226351

勾勒出20 x 18的尺寸即可

image-20200815164005804

.sou {
    position: absolute;
    top: 8px;
    left: 50px;
    width: 18px;
    height: 15px;
    background-color: pink;
    background: url(../images/jd-sprites.png) no-repeat -81px 0;
    background-size: 200px auto;
}

image-20200815164204774

image-20200815164422979

参考：https://github.com/6xiaoDi/blog–Mobile-layout/tree/a0.16
Branch： branch01

commit description：a0.16（jd首页案例—实现第二层两侧，实现中间层的放大镜，利用精灵图技术）

tag：a0.16


8. 图片格式

实际我们可以看到jd的某些大图是dgp格式，这是什么呢？

image-20200815165242210


8.1 DPG图片压缩技术

京东自主研发推出DPG图片压缩技术，经测试该技术，可直接节省用户近50%的浏览流量，极大的提升了用户的网页打开速度。能够兼容jpeg，实现全平台、全部浏览器的兼容支持，经过内部和外部上万张图片的人眼浏览测试后发现，压缩后的图片和webp的清晰度对比没有差距。


8.2 webp 图片格式

谷歌开发的一种旨在加快图片加载速度的图片格式。图片压缩体积大约只有JPEG的2/3，并能节省大量的服务器宽带资源和数据空间。


9. 下半部布局

下半部都是主体内容，因此选中一个大盒子，把它都包起来。

    <!-- 主体内容部分 -->
    <div class="main-content">
        <!-- 滑动图 -->
        <div class="slider">
            <img src="upload/banner.dpg" alt="">
        </div>
    </div>

图实在太大了。 => 缩放

image-20200815165511581

父盒子多宽，就缩成多宽

.slider img {
    width: 100%;
}

image-20200815170957534

按道理滚动幻灯片应该在第一层下方，并且是固定住的，所以用固定定位最为合适。

image-20200815171449660

同时把我们方便调试代码，设置的特殊背景去掉。

.search-wrap {
    position: fixed;
    overflow: hidden;
    height: 44px;
}

出问题了，都挤到一块了，因为没设置搜索框宽度。

image-20200815175449994

应该限制宽度。

.search-wrap {
    position: fixed;
    overflow: hidden;
    height: 44px;
    min-width: 320px;
    max-width: 640px;
}

image-20200815180055890

宽度比例还是不对，应该占满 => width: 100%;

image-20200815180138597

image-20200815180242876

参考：https://github.com/6xiaoDi/blog–Mobile-layout/tree/a0.17
Branch： branch01

commit description：a0.17（jd首页案例—实现顶部导航及幻灯片部分）

tag：a0.17

实现如下部分 => 设置一个盒子，丢一张图片，但是点击图片可以跳转页面，并且里面可以点击跳转几个页面，因此是多个图组成。

image-20200815180549441

实际是一个大盒子，里装三张图片，可实现不同的跳转，同时是小圆角。

image-20200815180755390

    <!-- 主体内容部分 -->
    <div class="main-content">
        <!-- 滑动图 -->
        <div class="slider">
            <img src="upload/banner.dpg" alt="">
        </div>
        <!-- 蔡康永品牌日 -->
        <div class="brand">
            <div>
                <a href="#">
                    <img src="upload/pic1.dpg" alt="">
                </a>
            </div>
            <div>
                <a href="#">
                    <img src="upload/pic2.dpg" alt="">
                </a>

            </div>
            <div>
                <a href="#">
                    <img src="upload/pic3.dpg" alt="">
                </a>
            </div>
        </div>

排成一列了，而京东是放在一行上，大小基本相同。我们可以让每个盒子各占一份即可，同时浮动。

.brand div {
    float: left;
    width: 33.33%;
}

image-20200815181722369

图片大小不对，应该盒子多宽，图片就多宽。

.brand div img {
    width: 100%;
}

image-20200815181822113

还需设置圆角。

image-20200815181846153

.brand {
    border-radius: 10px 10px 0 0;
}

依旧没变，因为光给盒子设置了，照片肯定没效果 =>

image-20200815181846153

overflow: hidden;

image-20200815182047070

但是还是有问题，上方会有小缝隙，因为图片底色默认有空白缝隙（他的底线会和父级盒子的基线对齐），

img {
    vertical-align: middle;
}

image-20200815182417194

并且忘记设置使用css3盒模型了，我们也设置上

div {
    /* css3 盒子模型 */
    box-sizing: border-box;
}

参考：https://github.com/6xiaoDi/blog–Mobile-layout/tree/a0.18
Branch： branch01

commit description：a0.18（jd首页案例—实现幻灯片下层部分）

tag：a0.18


实际布局布好了，剩下就是换图片的事情了。

我们尝试再修改一下刚刚的功能。

image-20200815183915030

        <!-- 小家电品牌日 -->
        <div class="brand">
            <div>
                <a href="#">
                    <img src="upload/pic11.dpg" alt="">
                </a>
            </div>
            <div>
                <a href="#">
                    <img src="upload/pic22.dpg" alt="">
                </a>

            </div>
            <div>
                <a href="#">
                    <img src="upload/pic33.dpg" alt="">
                </a>
            </div>
        </div>

image-20200815184122154

实现后面导航栏的内容

image-20200815184210787

只需要一个大盒子包起来，宽度和父级一样宽，高度不用设置，随着内容撑开即可。

一行5个盒子，各占20%就行。每个盒子里一张图，一个span。

移动端导航不会太复杂，就不用ul和li，直接用a即可。

        <nav class="clearfix">
            <a href="">
                <img src="upload/nav1.webp" alt="">
                <span>京东超市</span>
            </a>

            <a href="">
                <img src="upload/nav2.webp" alt="">
                <span>京东超市</span>
            </a>

            <a href="">
                <img src="upload/nav1.webp" alt="">
                <span>京东超市</span>
            </a>

            <a href="">
                <img src="upload/nav1.webp" alt="">
                <span>京东超市</span>
            </a>

            <a href="">
                <img src="upload/nav1.webp" alt="">
                <span>京东超市</span>
            </a>

            <a href="">
                <img src="upload/nav3.webp" alt="">
                <span>京东超市</span>
            </a>

            <a href="">
                <img src="upload/nav1.webp" alt="">
                <span>京东超市</span>
            </a>

            <a href="">
                <img src="upload/nav1.webp" alt="">
                <span>京东超市</span>
            </a>

            <a href="">
                <img src="upload/nav1.webp" alt="">
                <span>京东超市</span>
            </a>

            <a href="">
                <img src="upload/nav1.webp" alt="">
                <span>京东超市</span>
            </a>

        </nav>

nav a {
    float: left;
    width: 20%;
}

nav a img {
    width: 40px;
}

image-20200815204725613

加边距及对齐

nav a {
    float: left;
    width: 20%;
    text-align: center;
}

nav a img {
    width: 40px;
    margin: 10px 0;
}

image-20200815204847167

span和img是行内元素，得将span转成块级元素才能下来

nav a span {
    display: block;
}

image-20200815205043114

所有的a标签风格一致。

a {
    color: #666;
    text-decoration: none;
}

image-20200815210114494

顶部距离稍微大一些

nav {
    padding-top: 5px;
}

image-20200815210314995

参考：https://github.com/6xiaoDi/blog–Mobile-layout/tree/a0.19
Branch： branch01

commit description：a0.19（jd首页案例—实现主导航部分）

tag：a0.19


实现新闻快报部分

image-20200815210658106

图片得空白间隙实际在图片中就做好了，

image-20200815210808386

        <!-- 新闻模块 -->
        <div class="news">
            <a href="#">
                <img src="upload/new1.dpg" alt="">
            </a>
            <a href="#">
                <img src="upload/new2.dpg" alt="">

            </a>
            <a href="#">
                <img src="upload/new3.dpg" alt="">

            </a>
        </div>

加浮动，图片撑满父级，第一个占满50%、剩下两个各占25%

.news img {
    width: 100%;
}

.news a {
    float: left;
}

.news a:nth-child(1){
    width: 50%;
}

.news a:nth-child(2),
.news a:nth-child(3){
    width: 25%;
}

image-20200815212337026

.news a:nth-child(2),
.news a:nth-child(3){
    width: 25%;
}

还有另外一种简写 =>

/* n+2 就是从从2个往后面选 */

.news a:nth-child(n+2) {
    width: 25%;
}

image-20200815212337026

顶部再加一些边距

.news {
    margin-top: 20px;
}

结果加在上面了

image-20200815222905348

由于浮动导致，解决这个问题 => 我在网上找了个兼容性更好的清除浮动的方法（ 自动清除其子元素 ）。https://stackoverflow.com/questions/8554043/what-is-a-clearfix

image-20200816235521131

Clearfix Image

/* 利用生成内容清理浮动 for IE8(标准模式) 和 非IE浏览器 */
.clearfix:after {
    content: ".";
    clear: both;
    height: 0;
    visibility: hidden;
    display: block;
}

image-20200815223022609

加上移动端需要全局加的样式

/*点击高亮我们需要清除清除  设置为transparent 完成透明*/

* {
    -webkit-tap-highlight-color: transparent;
}


/*在移动端浏览器默认的外观在iOS上加上这个属性才能给按钮和输入框自定义样式*/

input {
    -webkit-appearance: none;
}


/*禁用长按页面时的弹出菜单*/

img,
a {
    -webkit-touch-callout: none;
}

图片之间有竖线

.news a:nth-child(n+2) {
    width: 25%;
    border-left: 1px solid #ccc;
}

image-20200815223111711

a采用css3样式

.news a {
    float: left;
    box-sizing: border-box;
}

image-20200815223155419


image-20200815223954154

参考：https://github.com/6xiaoDi/blog–Mobile-layout/tree/a0.20
Branch： branch01

commit description：a0.20（jd首页案例—实现主导航部分）

tag：a0.20


ios端主导航的图片显示不出来，暂时不知道咋回事。

10. 移动端布局之流式布局总结

  1. 标准viewport规范以及写法
  2. 模拟移动端调试方法
  3. 移动端常见的布局方案
  4. 流式布局原理
  5. 京东移动端首页布局技巧



（后续待补充）
Logo
华为开发者空间

华为开发者空间，是为全球开发者打造的专属开发空间，汇聚了华为优质开发资源及工具，致力于让每一位开发者拥有一台云主机，基于华为根生态开发、创新。

更多推荐

cover

解析openGauss账本数据库

avatar 华为开发者空间
cover

GaussDB高校行走进哈尔滨，与两校学子共话数据库人才发展

avatar 华为开发者空间
cover

二十载岁月如磐，一位高校女教师的技术坚守之路

avatar 华为开发者空间