响应式布局1. 媒体查询与弹性布局

stu_kk

于 2023-12-14 21:15:55 发布

阅读量454

点赞数 8

分类专栏：前端开发文章标签：前端

本文链接：https://blog.csdn.net/m0_54409739/article/details/134999783

版权

前端开发专栏收录该内容

20 篇文章 0 订阅

订阅专栏

1. 媒体查询

媒体查询（Media Queries）是一种 CSS3 的功能，用于根据设备的特性和特定的媒体类型来应用不同的样式规则。媒体查询使得网页可以根据不同设备的屏幕尺寸、分辨率、浏览器视口大小等条件来自适应地调整布局和样式，从而提供更好的用户体验。

通过使用媒体查询，开发者可以根据不同的媒体特性定义不同的 CSS 规则，并将其应用于特定的设备或媒体类型。媒体查询通过检查设备的属性和媒体类型来判断是否应用相应的 CSS 规则。

简单来讲，就是通过设计一套CSS代码，使得网页既可以适应电脑的大屏幕，也可以适应安卓、苹果等等手机的屏幕尺寸。

媒体查询的语法通常是在 CSS 样式表中使用 @media 规则来定义。例如，下面是一个简单的媒体查询的示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="media/test1.css"/>
</head>
<body>

</body>
</html>

test1.css文件代码

body {
    background-color: black;
}

@media screen and (min-device-width: 100px) and (max-device-width: 300px) {
    body {
        background-color: azure;
    }
}

@media screen and (min-device-width: 301px) and (max-device-width: 500px) {
    body {
        background-color: bisque;
    }
}

代码实现了根据不同的屏幕尺寸来更换背景颜色

通过使用媒体查询，可以实现响应式设计，使网页在不同设备上以最佳方式呈现。例如，在移动设备上可以使用媒体查询来调整布局、字体大小和图像大小，以适应较小的屏幕空间，提升用户体验。媒体查询还可以用于隐藏或显示特定的内容、调整导航菜单样式等。

1.1. @media的常用参数

@media中可以设置有关屏幕尺寸的参数:

属性名称	作用
width、height	浏览器可视高度、宽度
device-width	设备屏幕的宽度
device-height	设备屏幕的高度

浏览器宽度高度获取：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            height: 300px;
            width: 300px;
        }

        @media screen and (min-width: 500px) and (max-width: 700px) {
            div {
                background-color: red;
            }
        }

        @media screen and (min-width: 701px) {
            div {
                background-color: blue;
            }
        }
    </style>
</head>
<body>
<div>
</div>
</body>
</html>

注意，设备屏幕和浏览器屏幕不一样

接下来再写一个按照不同尺寸设置每行子元素的摆放，这对于实际开发来说很常用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #div0 {
            height: 100%;
            height: 500px;
        }

        #div0 div {
            float: left;
            height: 400px;
        }

        #div0 div:nth-child(1) {
            background-color: aliceblue;
        }

        #div0 div:nth-child(2) {
            background-color: beige;
        }

        #div0 div:nth-child(3) {
            background-color: blueviolet;
        }

        /* 1行三个div */
        @media screen and (min-device-width: 701px) {
            #div0 div {
                width: 33.3%;
            }
        }

        /* 2行三个div */
        @media screen and (min-device-width: 501px) and (max-device-width: 700px) {
            #div0 div {
                width: 50%;
            }
        }

        /* 3行三个div */
        @media screen and (min-device-width: 301px) and (max-device-width: 500px) {
            #div0 div {
                width: 100%;
            }
        }

    </style>
</head>
<body>
<div id="div0">
    <div></div>
    <div></div>
    <div></div>
</div>
</body>
</html>

这个效果在手机端很常见

1.2.@media的引入方式

媒体查询除了上述的引入方式，还有其他的引入方式

1.style的media属性中写上条件：

    <style media="(min-device-width:100px) and (max-device-width:300px)" >
        /*style*/
    </style>

2.在link中引入，有条件的引入外部样式表

<link rel="stylesheet" type="text/css" href="test1.css" media="(min-device-width: 501px) and (max-device-width: 700px)"/>

2. Flex弹性布局

FlexiableBox是弹性盒子，用来进行弹性布局，可以配合rem处理尺寸的适配问题，并且任何一个盒子都可以定义为flex布局，更符合响应式设计的特点。

2.1. flex结构图

2.2. flex属性

1.flex-direction:子元素在父元素盒子中的排列方式

属性值	作用
row	默认值，按照从左到右顺序显示
row-reverse	按照从右到左顺序显示
column	垂直显示，按照从上到下的顺序显示
column-reverse	从下到上

2. flex-wrap 是否换行

在子元素总和超出父元素的宽度的时候，flex布局会自动将子元素压缩到符合父元素的尺寸中去：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #div0 {
            width: 400px;
            height: 300px;
            background-color: pink;
            display: flex;
            flex-direction: row;
        }
        #div0 div {
            width: 200px;
            height: 50%;
        }

        #div0 div:nth-child(1) {
            background-color: aliceblue;
        }

        #div0 div:nth-child(2) {
            background-color: beige;
        }

        #div0 div:nth-child(3) {
            background-color: slateblue;
        }

        #div0 div:nth-child(4) {
            background-color: chartreuse;
        }

    </style>
</head>
<body>
<div id="div0">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>

</div>
</body>
</html>

那如何让子元素不被压缩而换行呢？可以使用flex-wrap：

属性值	作用
nowrap	不换行
wrap	换行
wrap-reverse	换行，但是以相反的顺序

于是我们在上诉代码中的父元素放入：flex-wrap: wrap;效果就变成了：

3.flex-flow写法：flex-direction和flex-wrap的简写形式：

语法： flex-flow: <direction> || <wrap>

4. justfity-content:用来在主轴上存在剩余空间的时候，设置间隔

属性值	作用
flex-start	默认，从左到右，挨着行的开头
flex-end	从右到左
center	居中显示
space-between	平均分布在该行上，两边不得间隔空间
space-around	平均分布在该行上，两边留有一半的间隔空间

5.align-items ：设置元素在交叉轴上的默认的对齐方式（1行当做整体）