05-移动web之流式布局

一、视口

1.常见屏幕知识

设备	解释	描述
宽	屏幕的宽度 - （单位：英寸）	屏幕的宽度
高	屏幕的高度 -（单位：英寸）	屏幕的高度
对角线	屏幕的对角线的长度英寸	一般说手机尺寸是指以屏幕对角线为衡量单位是英寸
逻辑分辨率	屏幕的宽度 * 屏幕的高度（单位：px）	描述屏幕的宽度和高度
设备分辨率	物理像素点	屏幕里面一共拥有的物理像素点的个数
PPI	像素密度	每英寸所拥有的物理像素点
设备像素比	设备分辨率和逻辑分辨率的比例（取宽度比较）	可以简单理解为屏幕的清晰度的倍数

设备分辨率就是手机中的发光点，数值越大，越清晰。

2.二倍图

一倍图：当设备像素比为1:1时，使用1个设备像素显示1个CSS像素。

二倍图：当设备像素比为2:1时，使用4个设备像素显示1个CSS像素。

一张相同的图片放在设备像素比为1的手机上和设备像素比为2的手机上时，像素比为2的手机会出现失真现象。

在设备像素比为2的手机上，原来的一个物理像素点能显示的图像却变成了由4个物理像素点来显示，那么就会造成 就近取色的效果，出现失真现象。

在标准的viewport设置中，使用倍图来提高图片质量，解决在高清设备中的模糊问题，就是统一将图片放大到2倍，使用时缩小2倍使用。

3.视口

视口（viewport）就是浏览器显示页面内容的屏幕区域。视口可以分为布局视口、视觉视口和理想视口。

视口就是一个包裹着html的容器，由乔布斯发明，默认宽度980px。

3.1 布局视口

在布局视口下，html标签的宽度变成了 980px 而不是和 屏幕等宽。

是所有手机端自带的默认视口，默认视口分辨率为 980px，把一个980px宽的页面放入到320px的小屏幕上，所以网页元素元素都非常小。

3.2 标准理想视口（开发用）

<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no">

属性名	取值	描述
width	正整数或device-width	定义视口的宽度，单位为像素
height	正整数或device-height	定义视口的高度，单位为像素，一般不用
initial-scale	[0.0-10.0]	定义初始缩放值
minimum-scale	[0.0-10.0]	定义缩小最小比例，它必须小于或等于maximum-scale设置
maximum-scale	[0.0-10.0]	定义放大最大比例，它必须大于或等于minimum-scale设置
user-scalable	yes/no	定义是否允许用户手动缩放页面，默认值yes

视口参数设置：

meta标签用来描述或设置一个HTML网页文档的属性
content 要设置或者描述的内容
content 要设置或者描述的内容
width 设置视口的宽度 device-width等于屏幕的宽度
initial-scale 页面打开的时候视口放大的倍数 值:1
user-scalable 是否允许用户缩放页面 值：no
maximum-scale 如果允许放大的话最大放大多少倍 值：1
minimum-scale 如果允许放大的话最小放大多少倍 值：1

二、流式布局（百分比布局）

为了让页面中的元素能跟随屏幕的大小变换而变化，会使用百分比的形式来设置宽度或者高度

1.几个经典布局

1.左侧固定，右侧自适应（padding）

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

        .box {

            height: 50px;

            background-color: #f34;

        }

        .left {

            /* 1.左侧盒子固定，写死宽高 */

            width: 70px;

            height: 50px;

            /* 2.左浮动 */

            float: left;

            background-color: #095;

        }

        .right {

            /* 3.不写宽度，给右侧盒子加paddign-left，将内容挤过去 */

            padding-left: 70px;

        }

        .right .info {

            /* 4.在里面套一个盒子，使padding生效 */

            height: 50px;

            background-color: #06c;

        }

    </style>

</head>

<body>

    <div class="box">

        <div class="left"></div>

        <div class="right">

            <div class="info"></div>

        </div>

    </div>

</body>

</html>

2.左侧固定，右侧自适应（margin）

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

        .box {

            height: 50px;

            background-color: #f34;

        }

        .left {

            /* 1.左侧盒子固定，写死宽高 */

            width: 70px;

            height: 50px;

            /* 2.左浮动 */

            float: left;

            background-color: #095;

        }

        .right {

            height: 50px;

            /* 3.右侧标准流，直接用margin挤过去 */

            margin-left: 70px;

            background-color: #06c;

        }

    </style>

</head>

<body>

    <div class="box">

        <div class="left"></div>

        <div class="right"></div>

    </div>

</body>

</html>

3.左侧固定，右侧自适应（overflow）

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

        .box {

            height: 50px;

            background-color: #f34;

        }

        .left {

            /* 1.左侧盒子固定，写死宽高 */

            width: 70px;

            height: 50px;

            /* 2.左浮动 */

            float: left;

            background-color: #095;

        }

        .right {

            height: 50px;

            /* 3.右侧标准流，由于浮动的元素压不住overflow:hidden*/

            overflow: hidden;

            background-color: #06c;

        }

    </style>

</head>

<body>

    <div class="box">

        <div class="left"></div>

        <div class="right"></div>

    </div>

</body>

</html>

4.右侧固定，左侧自适应（overflow）

其他两个写法与左侧固定，右侧自适应同理，只需在body中将右侧写在前面即可

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

        .box {

            height: 50px;

            background-color: #f34;

        }

        .right {

            /* 1.右侧盒子固定，写死宽高 */

            width: 70px;

            height: 50px;

            /* 2.右浮动 */

            float: right;

            background-color: #095;

        }

        .left {

            height: 50px;

            /* 3.左侧标准流，由于浮动的元素压不住overflow:hidden*/

            overflow: hidden;

            /* 用margin也可以实现 */

            /* margin-right: 70px; */

            background-color: #06c;

        }

    </style>

</head>

<body>

    <div class="box">

        <!-- 由于代码从上往下执行，所以要将固定区域写在前面， -->

        <!-- 如果自适应的区域写在前面，由于没写宽，会将一行沾满，浮动的固定区域只会另起一行 -->

        <div class="right"></div>

        <div class="left"></div>

    </div>

</body>

</html>

5.左右固定，中间自适应

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

        .box {

            height: 50px;

            background-color: #f34;

        }

        .left {

            height: 50px;

            float: left;

            width: 70px;

            background-color: #09f;

        }

        .right {

            height: 50px;

            float: right;

            width: 50px;

            background-color: #90f;

        }

        /* 左右宽高写死，左浮右浮动 */

        .center {

            height: 50px;

            /* 1.用margin挤开左右距离 */

            /* margin: 0 50px 0 70px; */

            /* 2.用overflow */

            overflow: hidden;

            background-color: #06c;

        }

    </style>

</head>

<body>

    <div class="box">

        <!-- 同理，这里自适应的区域要写在后面 -->

        <div class="left"></div>

        <div class="right"></div>

        <div class="center"></div>

    </div>

</body>

</html>

6.左右固定，中间自适应（圣杯布局）

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

        * {

            margin: 0;

            padding: 0;

            text-align: center;

            line-height: 50px;

        }

        header,

        footer {

            height: 50px;

            background-color: #ccc;

        }

        footer {

            clear: both;

        }

        .box {

            /* 1.用预留出左右盒子的位置 */

            padding: 0 50px 0 80px;

        }

        .box .center,

        .box .left,

        .box .right {

            /* 2.三个盒子都左浮 */

            float: left;

            height: 50px;

        }

        .box .center {

            /* 3.自适应区域宽度100% */

            width: 100%;

            background-color: #90f;

        }

        .box .left {

            width: 80px;

            background-color: #09f;

            /* 4.往回走一个父盒子宽度，就是往上移一行 */

            margin-left: -100%;

            position: relative;

            /* 5.利用相对定位，往回走自身的宽度 */

            left: -80px;

        }

        .box .right {

            width: 50px;

            background-color: #f34;

            /* 6.向上移动自身的宽度 */

            margin-left: -50px;

            /* 7.向右移动自身的宽度 */

            position: relative;

            right: -50px;

        }

    </style>

</head>

<body>

    <header>header</header>

    <div class="box">

        <div class="center">center</div>

        <div class="left">left</div>

        <div class="right">right</div>

    </div>

    <footer>footer</footer>

</body>

</html>

7.左右固定，中间自适应（双飞翼布局）

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

        * {

            margin: 0;

            padding: 0;

            text-align: center;

            line-height: 50px;

        }

        header,

        footer {

            height: 50px;

            background-color: #ccc;

        }

        footer {

            clear: both;

        }

        .content {

            /* 1.预留出左右位置 */

            margin: 0 50px;

        }

        .box .center,

        .box .left,

        .box .right {

            /* 2.三个盒子都左浮 */

            float: left;

            height: 50px;

        }

        .box .center {

            /* 3.自适应盒子宽100% */

            width: 100%;

            background-color: #095;

        }

        .box .left {

            width: 50px;

            background-color: #09f;

            /* 4.左边盒子上移一行 */

            margin-left: -100%;

        }

        .box .right {

            width: 50px;

            background-color: #90f;

            /* 5.右边盒子也上去 */

            margin-left: -50px;

        }

    </style>

</head>

<body>

    <header>header</header>

    <div class="box">

        <div class="center">

            <div class="content">center</div>

        </div>

        <div class="left">left</div>

        <div class="right">right</div>

    </div>

    <footer>footer</footer>

</body>

</html>

2.京东案例

https://www.lanzous.com/ib5pw7a