前端从0到1--移动WEB百分比布局&Flex

SuperBeiBei03
94 阅读3分钟

一、视口

1.概念

-ViewPort是移动Web开发中一个重要的概念，最早是由苹果公司在推出iPhone手机时发明的。其目的时为了让iPhone的小屏幕尽可能的完整显示整个网页。通过设置视口，不管网页原始分辨率尺寸有多大，都能将其缩小显示在手机浏览器上，这样保证网页在手机上看起来更像在桌面浏览器中的样子，视口简单来说就是浏览器显示页面内容的屏幕区域。在移动端浏览器中，存在着3种视口，分别是布局视口(layout viewport)、视觉视口(visual viewport)和理想视口(ideal viewport)

布局视口

布局视口是指网页的宽度，一般移动端浏览器都默认设置了布局视口的宽度。根据设备的不同，布局视口的默认宽度有可能是768px、980px或1024px等，这个宽度并不适合在手机屏幕中展示。移动端浏览器之所以采用这样的默认设置，是为了解决早期的PC端页面在手机上显示的问题。

视觉视口

视觉视口是指用户正在看到的网站的区域，这个区域的宽度等同于移动设备浏览器窗口的宽度

理想视口

理想视口是指对设备来讲最理想的视口尺寸。采用理想视口的方式，可以使网页在移动浏览器上获得最理想的浏览和阅读的宽度。

<!-- 理想视口 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">

二、百分比布局

1.特点

1.流式布局概念

  • 流式布局是一种等比例缩放布局方式，在css代码中使用百分比来设置宽度，又叫做百分比自适应布局。流式布局实现方式是将像素宽度换算为百分比宽度。公式：目标元素宽度/父盒子宽度=百分数宽度

  • 经典流式布局方式

    1.左侧固定 右侧自适应

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    .father {
        display: flex;
        height: 800px;
        background-color: red;
    }

    .left {
        width: 200px;
        height: 300px;
        background-color: green;
    }

    .right {
        flex: 1;
        height: 500px;
        background-color: blue;
    }
</style>

<body>
    <div class="father">
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>

</html>

  2.右侧固定，左侧自适应

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    .father {
        height: 800px;
        background-color: pink;
        position: relative;
        padding-left: 200px;
    }

    .left {
        height: 500px;
        background-color: red;

    }

    .right {
        width: 200px;
        height: 600px;
        background-color: green;
        padding-left: 200px;
        position: absolute;
        top: 0;
        right: 0;
    }
</style>

<body>
    <div class="father">
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>

</html>

 3.两侧固定，中间自适应(圣杯布局)

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .father {
            height: 800px;
            background-color: red;
            display: flex;
            flex: 1;
        }

        .left {
            width: 200px;
            height: 400px;
            background-color: green;
        }

        .middle {
            width: 100%;
            height: 400px;
            background-color: #6cf;
            flex: 1;
        }

        .right {
            width: 200px;
            height: 400px;
            background-color: blue;
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="left"></div>
        <div class="middle"></div>
        <div class="right"></div>
    </div>
</body>

</html>

4.等分布局 根据数量判断百分比

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        ul {
            overflow: hidden;
        }

        li {
            width: 25%;
            float: left;
            list-style: none;
            background-color: pink;
            height: 200px;
            border: 1px solid #000;
        }
    </style>
</head>

<body>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>

</html>

2.总结：特点：流式布局 宽度自适应，高度固定。 布局方式：宽度为百分比写法

三、Flex布局

1.优势和特点

1.浏览器提倡的布局模型，页面渲染性能更高
2.布局简单、方便 3.避免浮动带来的脱标影响 4.兼容性较差（不兼容低版本浏览器）

2.组成部分

1.弹性容器(父元素，添加display：flex)
2.弹性盒子(子元素）
3.确定主轴方向 flex-direction(默认值:row主轴方向水平从左到右 column主轴方向垂直从上到下)
4.主轴(justify-content: ;)
5.侧轴（单行侧轴 align-items: ; 多行侧轴 align-content: ;）

3.主侧轴对齐方式

1.主轴(justify-content)

  • center 居中
  • space-between 左右靠边线 中间产生间距
  • space-evenly 父子级间距都相同 平均分配空间
  • space-around 每个项目左右两侧间距相同

2.侧轴(align-items)(align-content)

  • center 居中
  • strech 默认值：拉伸

3.align-self(控制某个弹性盒子)

4.弹性伸缩比 1.flex：整数数字 2.占用父元素剩余尺寸的分数

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0,maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <title>Document</title>
    <style>
        .father{
            height: 600px;
            background-color: #6cf;
            /* 父元素设定弹性布局 */
            display: flex;

            /* 确定主轴方向 */
            /* flex-direction: column; */

            /* 主轴对齐方式 */
            /* justify-content: center; */
            /* justify-content: space-evenly; */
            /* justify-content: space-around; */
            /* justify-content: space-between; */

            /* 侧轴对齐方式 */
            /* align-items: center; */
        }
        .left{
            width: 200px;
            height: 200px;
            background-color: red;
        }
        .center{
            width: 200px;
            height: 200px;
            /* 弹性伸缩比 */
            /* 给中间设置flex 1 两侧固定 拉伸时只有中间改变大小 */
            /* flex: 1; */
            background-color: green;
        }
        .right{
            width: 200px;
            height: 200px;
            background-color: blue;
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="left"></div>
        <div class="center"></div>
        <div class="right"></div>
    </div>
</body>

</html>
avatar
文章
阅读
粉丝