移动端特点 flex布局和圣杯布局

最新推荐文章于 2024-07-08 18:44:35 发布

杀破狼我也

最新推荐文章于 2024-07-08 18:44:35 发布

阅读量195

点赞数 2

文章标签： css 移动开发 flex

本文链接：https://blog.csdn.net/qq_48235154/article/details/121864500

版权

本文详细介绍了PC端与移动端布局的区别，重点讲解了移动端的适配策略，包括视口的概念、视口标签的使用以及二倍图的应用。同时，深入探讨了Flex布局的高效性和灵活性，解析了主轴和侧轴对齐方式，以及伸缩比的概念。通过实例展示了如何实现圣杯布局，总结了Flex布局的优势和兼容性。

摘要由CSDN通过智能技术生成

PC端/移动端不同？

PC端

屏幕大，网页固定版心
端浏览器繁多，更多考虑兼容性问题。（布局：浮动+定位+标准流）

移动端

手机屏幕小，网页宽度多数为100%，是适配手机屏幕宽度
移动端则基本不需要考虑兼容性问题，放心大胆使用CSS新特性

物理分辨率和逻辑分辨率

物理分辨率：硬件所支持的，屏幕出厂就设定无法修改
逻辑分辨率：软件可以达到的，我们开发中写的是逻辑分辨率

视口

视口（viewport）就是浏览器显示页面内容的屏幕区域。

视口的分类：

布局视口。 iOS, Android基本都将这个视口分辨率设置为980px。
视觉视口。用户正在看到的网站的区域。
理想视口。设备有多宽，我的网页就显示有多宽

视口标签

有了视口标签，可以达到我们想要的理想视口。

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

width=device-width：视口宽度=设备宽度
initial-scale=1.0：初始页面缩放倍数
maximum-scale=1.0 最大缩放倍数
user-scalable=0 不允许用户缩放页面（移动端）或者为 no 如果为 yes 则允许用户缩放

二倍图

其实实际开发中还有三倍图甚至四倍图等，多倍图，但是现在市场还是二倍图偏多，我们称为二倍图。

简单理解，二倍图存在就是为了让页面中图片更加清晰，遵循即可。

网页美工的设计稿基本是 750px

我们前端工程师拿到设计稿利用像素大厨选择 2X，进行缩小一半，按照提示的单位开发即可。

flex布局

flex布局极大的提高了我们布局的效率，更简单、灵活。

display: flex; 一定要给亲爸爸父盒子加。

主轴对齐方式

属性值	作用
flex-start	默认值, 起点开始依次排列
flex-end	终点开始依次排列
`center`	沿主轴居中排列
`space-around`	弹性盒子沿主轴均匀排列, 空白间距均分在弹性盒子两侧
`space-between`	弹性盒子沿主轴均匀排列, 空白间距均分在相邻盒子之间
`space-evenly`	弹性盒子沿主轴均匀排列, 弹性盒子与容器之间间距相等

重点记住标红的。如果非要问我那个常用，我只能说是 space-between

justify-content: space-between;

显示效果：两侧没缝隙

justify-content: space-around;

效果如下： 记住盒子之间2倍边距

justify-content: space-evenly;

效果如下： 记住空隙一样大

justify-content: center;

效果如下： 经常用于让一个盒子水平居中

记忆：

两侧没缝隙是 between
缝隙一样大是 evenly
2倍缝隙是 around

侧轴对齐方式

属性值	作用
flex-start	起点开始依次排列
flex-end	终点开始依次排列
`center`	沿侧轴居中排列
stretch	默认效果, 弹性盒子沿着侧轴线被拉伸至铺满容器

重点记住center ，可以让元素垂直居中。

 align-items: center;

我们可以通过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>
        .father {
            margin: 100px auto;
            width: 500px;
            height: 500px;
            background-color: pink;
            /* 设置为flex布局 */
            display: flex;
            /* 主轴水平居中 */
            justify-content: center;
            /* 侧轴垂直居中 */
            align-items: center;
        }

        .son {
            width: 200px;
            height: 200px;
            background-color: purple;
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>

</html>

伸缩比

把父盒子分为若干份数，每个子盒子各占几份。

flex:1; 一定给子盒子加

语法：

flex: 1;

比如有一个父盒子里面有三个子盒子，每个子盒子写 flex：1；此时每个子盒子各占三分之一。

<!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>
        .father {
            display: flex;
            height: 300px;
            background-color: pink;
        }

        .father div {
            /* 每个孩子各占1份 */
            flex: 1;
        }

        /* 选择器选择子元素 */
        .father div:nth-child(2) {
            /* 默认子盒子和父亲一样高 */
            background: #f31e95;
        }

        .father div:nth-child(3) {
            /* 默认子盒子和父亲一样高 */
            background: #f56bb5;
        }
    </style>
</head>

<body>
    <div class="father">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
</body>

</html>

显示效果：

一定要给子盒子添加。

子盒子默认高度会和父盒子一样高。

圣杯布局

所谓的圣杯布局就是左右两边大小固定不变，中间宽度自适应。

一般这种布局方式适用于各种移动端顶部搜索部分，这是最常见的，如京东手机版主页面顶部搜索

核心思路：

两侧盒子写固定大小
中间盒子 flex: 1; 占满剩余空间

<!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>
        .top {
            display: flex;
            justify-content: space-between;
        }

        .top div:first-child {
            width: 50px;
            height: 50px;
            background-color: red;
        }

        .top div:last-child {
            width: 50px;
            height: 50px;
            background-color: red;
        }

        .top div:nth-child(2) {
            flex: 1;
            height: 50px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div class="top">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
</body>

</html>