PC与移动端网页差异及Flex布局详解-优快云博客

本文链接：https://blog.youkuaiyun.com/zimingyo/article/details/124002992

pc端网页和移动端网页的有什么不同？

PC屏幕大，网页固定版心
手机屏幕小，网页宽度多数为100%

谷歌模拟器
作用：方便移动端的调试
启用流程如下：
在这里插入图片描述

在这里插入图片描述
注意：点完后需要刷新页面，才能显示移动端

分辨率

硬件分辨率（出厂设置）
缩放调节的分辨率（软件设置）

分辨率的分类
物理分辨率是生产屏幕时就固定的，它是不可改变的
逻辑分辨率是由软件（驱动）决定的

注意：写代码时，我们参考逻辑分辨率

视口
作用：使编写的html文件适配不同设备宽度的网页
在这里插入图片描述
快捷键：新建一个html,直接按Tab键

二倍图
作用：让图片分辨率更高，不让图片模糊失真

百分比布局（也叫流式布局）
效果：宽度自适应，高度固定。

Flex布局
解决了浮动脱标的问题

Flex布局/弹性布局：

是一种浏览器提倡的布局模型
布局网页更简单，灵活
避免浮动脱标的问题

注意：有些低版本的浏览器不兼容Flex布局
布局兼容浏览器情况

在这里插入图片描述
Flex布局模型构成
作用：

基于Flex精确灵活控制块级盒子的布局方式，避免浮动布局中脱离文档流现象发生
Flex布局非常适合结构化布局

设置方式：

父元素添加 display:flex,子元素可以自动的挤压或拉伸

组成部分

弹性容器
弹性盒子
主轴
侧轴/交叉轴

示例：

<!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">
    <title>体验flex布局</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            /* 视觉效果: 子级一行排列/水平排列 */
            /* 水平排列: 默认主轴在水平, 弹性盒子都是沿着主轴排列 */
            display: flex;
            height: 200px;
            border: 1px solid #000;
        }

        .box div {
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
</body>
</html>

效果图
在这里插入图片描述
主轴对齐方式
修改主轴对齐方式属性：justify-content

侧轴对齐方式
修改侧轴对齐方式属性：

align-items(添加到弹性容器)
align-self：控制某个弹性盒子在侧轴的对齐方式（添加到弹性盒子）

在这里插入图片描述
注意：使用stretch时，需要将子元素的高度注销，否则不会生效

弹性伸缩比
作用：使用剩余宽高进行一定比例的分配
语法：flex:数值； -->作用在要进行伸缩的对象上

示例：

<!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">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            display: flex;

            height: 300px;
            border: 1px solid #000;
        }

        .box div {
            height: 200px;
            margin: 0 20px;
            background-color: pink;
        }

        .box div:nth-child(1) {
            width: 50px;
        }

        .box div:nth-child(2) {
            /* 占用父级剩余尺寸的份数 */
            flex: 3;
        }

        .box div:nth-child(3) {
            flex: 1;
        }
        
    </style>
</head>
<body>
    <div class="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
</body>
</html>

效果图

在这里插入图片描述

主轴方向

主轴默认是水平，侧轴默认是垂直方向
修改主轴方向属性：flex-direction

在这里插入图片描述
示例：

<!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">
    <title>主轴方向</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style: none;
        }

        .box li {
            display: flex;
            /* 1. 先确定主轴方向; 2. 再选择对应的属性实现主轴或侧轴的对齐方式 */
            /* 修改主轴方向: 列 */
            flex-direction: column;

            /* 视觉效果: 实现盒子水平居中 */
            align-items: center;

            /* 视觉效果: 垂直居中 */
            justify-content: center;
            

            width: 80px;
            height: 80px;
            border: 1px solid #ccc;
        }
        
        .box img {
            width: 32px;
            height: 32px;
        }
    </style>
</head>

<body>
    <div class="box">
        <ul>
            <li>
                <img src="./images/media.png" alt="">
                <span>媒体</span>
            </li>
        </ul>
    </div>
</body>

</html>

效果图：
在这里插入图片描述
弹性盒子换行
前景：在于使用flex布局会导致所有的元素挤在一行（使得元素的宽高变形）

弹性盒子换行显示：flex-wrap：wrap
调整行对齐方式：align-content(取值与justify-content基本相同)

示例：

<!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">
    <title>弹性盒子换行</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            display: flex;

            /* 默认值, 不换行 */
            /* flex-wrap: nowrap; */

            /* 弹性盒子换行 */
            flex-wrap: wrap;

            /* 调节行对齐方式 */
            /* align-content: center; */
            /* align-content: space-around; */
            align-content: space-between;

            height: 500px;
            border: 1px solid #000;
        }
        
        .box div {
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div class="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
    </div>
</body>

</html>