Android 流式布局 水平 流式布局什么意思

简单闲聊哈，据我现在所学的，我就觉得以后的编写移动端，不可能就让你只用流式布局，所以，知道并且了解怎么用流式布局就可以了。

1.什么叫流式布局

流式布局又叫做百分比布局，主要针对自适用宽度。

在流式布局中，宽度不再使用确定的大小，而是采用百分比，通常在一排放四个五个三个等的容易划分的。

2.流式布局应该如何写代码（或者说，刚刚接触移动端的我们应该怎么写代码）

牢记 以下步骤：

1.确定布局方案：（这里就要延伸出常见的移动端网页设计方案）

移动端网页的设置分为独立设计移动端网页，和兼容pc和移动端用同一个网站，区别就是，单独制作移动端网页 的网站前面会以m开头

以下说的都是单独制作移动端网站的方案

布局方式：

1.流式布局

2.flex弹性布局

3.rem+less+media媒体查询布局 / flexible+rem适配布局

先说第一个，后面的等我学了再来讲。

2.方案确定后，第二步，初始化样式

1.下载normalize.css （布局移动端基础样式，淘宝，京东都在用，你敢不用？） 不过放心， 等用了bootstrap就不用这个了 因为后者集成了前者。

2.引入normalize.css 网站甩给你Normalize.css: Make browsers render all elements more consistently.

3.视口标签 直接复制，不用墨迹
 <meta name="viewport" content="width=device-width, user-scalable=no,     initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
这是每一句话的解释：（愿意看就看，不看就直接复制就行了）
 
width = device -width  宽度为屏幕宽度

•    user-scalable = 0/no  不允许用户缩放，为yes或者1  允许用户缩放

•    initial-scale = 1.0  初始屏幕缩放比为1.0

•    maximum-scale = 1.0   最大屏幕缩放比为1.0

•    minimum-scale = 1.0   最小屏幕缩放比为1.0
 
4.创建文件夹结构，通常为
 
images（不常更换的图片）    uploads（产品类图片）   css（样式    normalize.css就在里面    还有index.css）  index.html
 
5.引入index.css
6.index.css中初始化body样式。
以下为初始化样式：
 
body {
    max-width: 640px;
    min-width: 320px;
    width: 100%;
    margin: 0 auto;
    font-size: 14px;
    background-color: #ebebeb;
}

说下为什么要这样写初始化body样式。

因为我们想让我们的移动端网站能够在我们手机打开或者电脑打开都能够位于正中央，所以我们要设置max-width

max-width是怎么算来的？

根据设计图算来的

大概就只有这一个问题。

3.引入完成之后就可以直接写了，但是还有一些小的知识点要写在前面

1.二倍图

pc端的px和像素比是1:1 所以不用考虑像素比的问题 但是移动端不一样，我们的手机屏幕一共就这么大，可为了让我们的屏幕显示的更加的清除，所以每一块像素里面都集成了好多个像素，这样就造成1px=**px

在设计移动端网页时，不能够直接扔图片进去，因为那样会很大，所以我们应该这样做。

比如 我们的psd图片上，显示 60*60的图片

那么好，我们就准备一张120*120的图片

然后，准备一个60*60的盒子 ，盒子里面放图片，然后将图片的大小更改为60x60，这样写完后，手机会自动放大，放大2倍后正好是120x120 正好是原图的大小

2.精灵图二倍图制作

精灵图总共三步。

1.准备大小的盒子

2.将背景精灵图变为原来的二分之一

3.测量坐标

4.代码中将精灵图的大小变成原来的二分之一。

4，接下来放今天做的两个案例，供欣赏。

1.益康问答案例

css代码：
 
body {
    max-width: 640px;
    min-width: 320px;
    width: 100%;
    margin: 0 auto;
    font-size: 14px;
    background-color: #ebebeb;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

ul {
    list-style: none;
}

.header {
    position: relative;
    height: 88px;
    background-color: #44b181;
    line-height: 88px;
    color: #fff;
    text-align: center;
    font-size: 36px;
}

.header span {
    position: absolute;
    top: 0;
    left: 48px;
    font-size: 30px;

}

.header span::before {
    content: "";
    position: absolute;
    top: 26px;
    left: -30px;
    width: 20px;
    height: 36px;
    background: url(../images/Back.png) no-repeat;
    background-size: 20px 36px;
}

.header::after {
    position: absolute;
    top: 38px;
    right: 20px;
    content: "";
    display: block;
    width: 52px;
    height: 12px;
    background: url(../images/更多.png) no-repeat;
    background-size: 52px 12px;
}

/* nav模块 */
.nav {
    overflow: hidden;
    height: 88px;
    background-color: #fff;
    line-height: 88px;
}

.nav li {
    float: left;
    width: 33.33%;
    height: 88px;
    text-align: center;
    list-style: none;
    font-size: 28px;
    box-sizing: border-box;

}

.nav li a {
    position: relative;
    color: #35424b;
    text-decoration: none;
}

.nav li:first-child {
    border-bottom: 3px solid #44b181;
}

.nav li:first-child a {
    color: #44b181;
}

.nav li:last-child a::after {
    content: "";
    position: absolute;
    top: 0px;
    right: -45px;
    width: 33px;
    height: 33px;
    background: url(../images/放大镜.png) no-repeat;
}

/* banner */
.banner {
    height: 303px;

}

.banner img {
    width: 100%;
}

/* study 模块 */
.study {
    margin-top: 20px;
    padding-left: 20px;
    padding-top: 20px;
    height: 253px;
    background-color: #fff;
}

.study p {
    font-size: 28px;
    color: #333;
    margin-right: 82px;
    margin-bottom: 20px;
}

.study span {
    font-size: 22px;
    color: #999;
    margin-right: 19px;
}

.study-bot {
    overflow: hidden;
    margin-top: 32px;
}

.study-bot1 {
    float: left;
    width: 80px;
    height: 80px;
}

.study-bot1 img {
    width: 100%;
}

.study-bot2 {
    float: left;
    width: 290px;
    height: 60px;
    margin-top: 20px;
    margin-left: 29px;
}

.study-bot2 img {
    width: 100%;
}

.study-bot3 {
    position: relative;
    float: right;
    color: #999;
    font-size: 22px;
    margin-top: 60px;
    margin-right: 20px;
}

.study-bot3::before {
    content: "";
    position: absolute;
    top: 0px;
    left: -30px;
    width: 24px;
    height: 21px;
    background: url(../images/耳机.png) no-repeat;
    background-size: 24px 21px;
}

/* footer模块 */
.footer {
    width: 100%;
    max-width: 640px;
    min-width: 320px;
    position: fixed;
    bottom: 0px;
    background-color: #f5f7f9;
}

.footer ul {
    overflow: hidden;
}

.footer ul li {
    float: left;
    width: 25%;
    text-align: center;
    padding: 18px 0;
}

.footer ul li a {
    display: block;
    font-size: 22px;
    color: #b4b5b6;
    text-decoration: none;
}

.footer ul li:first-child a {
    color: #44b181;
}

.footer ul li a::before {
    content: "";
    display: block;
    margin: 0 auto;
    margin-bottom: 14px;
    width: 32px;
    height: 27px;
    background: url(../images/榜单.png) no-repeat;
    background-size: 32px 27px;
}

.footer ul li:nth-child(2) a::before {
    background: url(../images/底部大耳机.png) no-repeat;
    background-size: 32px 27px;
}

.footer ul li:nth-child(3) a::before {
    background: url(../images/发现.png) no-repeat;
    background-size: 32px 27px;
}

.footer ul li:nth-child(4) a::before {
    background: url(../images/我的.png) no-repeat;
    background-size: 32px 27px;
}
 
html代码
 
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <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>Document</title>
</head>

<body>
    <header class="header">
        <span>返回</span>
        易康问答
    </header>
    <ul class="nav">
        <li>
            <a href="#">问题榜</a>
        </li>
        <li>
            <a href="#">新晋榜</a>
        </li>
        <li>
            <a href="#">才华榜</a>
        </li>
    </ul>

    <div class="banner">
        <img src="./images/备战中考领先一步.png" alt="">
    </div>
    <div class="study">
        <p>如何学习语文的文言文内容,快速提高语文成绩？</p>
        <span>王知易</span><span>|</span><span>英语文学语言老师</span>
        <div class="study-bot">
            <div class="study-bot1">
                <img src="./images/足球.png" alt="">
            </div>
            <div class="study-bot2">
                <img src="./images/限时免费听.png" alt="">
            </div>
            <div class="study-bot3">
                22人听过
            </div>
        </div>
    </div>
    <div class="study">
        <p>如何学习语文的文言文内容,快速提高语文成绩？</p>
        <span>王知易</span><span>|</span><span>英语文学语言老师</span>
        <div class="study-bot">
            <div class="study-bot1">
                <img src="./images/足球.png" alt="">
            </div>
            <div class="study-bot2">
                <img src="./images/限时免费听.png" alt="">
            </div>
            <div class="study-bot3">
                22人听过
            </div>
        </div>
    </div>
    <div class="study">
        <p>如何学习语文的文言文内容,快速提高语文成绩？</p>
        <span>王知易</span><span>|</span><span>英语文学语言老师</span>
        <div class="study-bot">
            <div class="study-bot1">
                <img src="./images/足球.png" alt="">
            </div>
            <div class="study-bot2">
                <img src="./images/限时免费听.png" alt="">
            </div>
            <div class="study-bot3">
                22人听过
            </div>
        </div>
    </div>
    <div class="study">
        <p>如何学习语文的文言文内容,快速提高语文成绩？</p>
        <span>王知易</span><span>|</span><span>英语文学语言老师</span>
        <div class="study-bot">
            <div class="study-bot1">
                <img src="./images/足球.png" alt="">
            </div>
            <div class="study-bot2">
                <img src="./images/限时免费听.png" alt="">
            </div>
            <div class="study-bot3">
                22人听过
            </div>
        </div>
    </div>
    <footer class="footer">
        <ul>
            <li><a href="#">
                    榜单
                </a></li>
            <li><a href="#">
                    收听
                </a></li>
            <li><a href="#">
                    发现
                </a></li>
            <li><a href="#">
                    我的
                </a></li>

        </ul>
    </footer>
</body>

</html>
 
2.京东案例
css代码
 
body {
    width: 100%;
    /* 这个参考的是给的图的宽度 */
    max-width: 640px;
    min-width: 320px;
    margin: 0 auto;
    font-size: 14px;
    font-family: -apple-system, Helvetica, sans-serif;
    line-height: 1.5;
    color: #666;
    background-color: #ccc;
    -webkit-text-size-adjust: 100% !important;
    padding-bottom: env(safe-area-inset-bottom);
}

.app {
    height: 45px;
    background-color: #333;
}

img {
    vertical-align: middle;
}

ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

p {
    margin: 0;
    padding: 0;
}

.app ul li {
    float: left;
    height: 45px;
    line-height: 45px;
    text-align: center;
    color: #fff;
}

.app ul li:nth-child(1) {
    width: 8%;
}

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

.app ul li:nth-child(2) {
    width: 10%;
}

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

.app ul li:nth-child(3) {
    width: 57%;
}

.app ul li:nth-child(3) p {
    text-align: left;
    line-height: 0;
    padding-left: 20px;
    padding-top: 16px;
    font-size: 12px;
}

.app ul li:nth-child(3) p:last-child {
    color: #999;
}

.app ul li:nth-child(4) {
    width: 25%;
    background-color: #cd2525;
    font-size: 15px;
}

/* search-content模块 */
.search-content {
    position: fixed;
    width: 100%;
    max-width: 640px;
    min-width: 320px;
    height: 44px;
    overflow: hidden;
}

.search-warp,
.search-login {
    position: absolute;
    top: 0;
    width: 40px;
    height: 44px;
    /* background-color: pink; */
    text-align: center;
    line-height: 44px;
    color: #fff;
}

.search-warp {
    left: 0;
}

.search-warp img {
    width: 20px;
}

.search-login {
    right: 0;
}

.search {
    position: relative;
    height: 30px;
    background-color: #fff;
    margin: 8px 50px 0;
    border-radius: 17px;
    padding: 0 10px 0 88px;
}

.search-jd {
    width: 20px;
    height: 15px;
    position: absolute;
    top: 6px;
    left: 16px;
    background-color: pink;
    background: url(../images/jd.png) no-repeat;
    background-size: contain;
}

.search-jd::after {
    position: absolute;
    top: 0px;
    left: 29px;
    content: "";
    display: block;
    width: 1px;
    height: 16px;
    background-color: #ccc;
}

.search-text {
    position: relative;
    height: 30px;
    line-height: 30px;
    color: #ccc;
    font-size: 12px;
}

.search-text::before {
    content: "";
    position: absolute;
    top: 7px;
    left: -30px;
    width: 18px;
    height: 15px;
    background: url(../images/jd-sprites.png) no-repeat -81px 0px;
    background-size: 200px;
}

/* banner-box */
.banner-box img {
    width: 100%;
}

.banner-box:hover {
    cursor: pointer;
}

/* advert模块 */
.advert {
    /* background-color: #ccc; */
    overflow: hidden;
}

.ad1,
.ad2,
.ad3 {
    float: left;
    width: 33.3333%;
}

.advert img {
    width: 100%;
}

/* supermarket模块 */
.super {
    overflow: hidden;
    background-color: #fff;
    padding-bottom: 5px;
}

.super li {
    float: left;
    width: 20%;
    text-align: center;
}

.super li img {
    width: 40px;
    height: 40px;
    margin: 10px 0;
}

.super li p {
    color: #666;
}

/* 抽奖模块 */
.luck-draw li {
    float: left;
    width: 25%;
}

.luck-draw li:first-child {
    width: 50%;
}

.luck-draw li img {
    width: 100%;
}

.luck-draw li:nth-child(-n+2) {
    box-sizing: border-box;
    border-right: 0.5px solid #ccc;
}
 
html代码
 
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <!-- 请使用ie的最高版本来解析 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 设置视口标签 -->
    <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">
    <!-- 引入首页css -->
    <link rel="stylesheet" href="./css/index.css">
    <title>Document</title>
</head>

<body>
    <!-- top -->
    <header class="app">
        <ul>
            <li>
                <img src="./images/close.png" alt="">
            </li>
            <li>
                <img src="./images/logo.png" alt="">
            </li>
            <li>
                <p>打开京东APP</p>
                <p>购物实惠又轻松</p>
            </li>
            <li>立即打开</li>
        </ul>
    </header>
    <!-- 搜索框 -->
    <div class="search-content">
        <div class="search-warp">
            <img src="./images/s-btn.png" alt="">
        </div>
        <div class="search">
            <div class="search-jd">
            </div>
            <div class="search-text">
                笔记本固态硬盘
            </div>
        </div>
        <div class="search-login">登陆</div>
    </div>
    <!-- banner -->
    <div class="banner-box">
        <div class="banner1">
            <img src="./upload/banner.dpg" alt="">
        </div>
    </div>
    <!-- 广告模块 -->
    <div class="advert">
        <div class="ad1">
            <img src="./upload/pic11.dpg" alt="">
        </div>
        <div class="ad2">
            <img src="./upload/pic22.dpg" alt="">
        </div>
        <div class="ad3">
            <img src="./upload/pic33.dpg" alt="">
        </div>
    </div>
    <!-- supermarket模块 -->
    <ul class="super">
        <li>
            <img src="./upload/nav2.webp" alt="">
            <p>京东超市</p>
        </li>
        <li>
            <img src="./upload/nav2.webp" alt="">
            <p>京东超市</p>
        </li>
        <li>
            <img src="./upload/nav2.webp" alt="">
            <p>京东超市</p>
        </li>
        <li>
            <img src="./upload/nav2.webp" alt="">
            <p>京东超市</p>
        </li>
        <li>
            <img src="./upload/nav2.webp" alt="">
            <p>京东超市</p>
        </li>
        <li>
            <img src="./upload/nav2.webp" alt="">
            <p>京东超市</p>
        </li>
        <li>
            <img src="./upload/nav2.webp" alt="">
            <p>京东超市</p>
        </li>
        <li>
            <img src="./upload/nav2.webp" alt="">
            <p>京东超市</p>
        </li>
        <li>
            <img src="./upload/nav2.webp" alt="">
            <p>京东超市</p>
        </li>
        <li>
            <img src="./upload/nav2.webp" alt="">
            <p>京东超市</p>
        </li>

    </ul>
    <!-- 抽奖模块 -->
    <ul class="luck-draw">
        <li>
            <img src="./upload/new1.dpg" alt="">
        </li>
        <li>
            <img src="./upload/new2.dpg" alt="">
        </li>
        <li>
            <img src="./upload/new3.dpg" alt="">
        </li>
    </ul>
</body>

</html>