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

2023-12-14 22:42:03

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行当做整体）

属性值作用
flex-start位于容器的开头
flex-end位于容器的结尾
center居中显示

6. align-content:设置每个flex元素在交叉轴上的默认对齐方式（多行当做整体）

属性值作用
flex-start默认，位于开头
flex-end位于结尾
center居中显示
space-between之间留有空白
space-around空白平均分布

7. flex-grow：设置合资的扩展比例，会根据设置的grow来按照百分比扩展

8. flex-shrink设置盒子的缩小比例

9. flex-basis：设置弹性盒子的伸缩基准值

基准值设置之后，对应的宽度和高度会对应变成基准值

10.flex 前面三个的简写：

11.特殊写法：

属性值作用
flex-autoflex：1 1 auto
flex:noneflex：0 0 auto

flex: 0%;

flex:100px

flex: 1 1 0%;

flex: 1 1 100px

flex:1flex: 1 1 0%

文章来源:https://blog.csdn.net/m0_54409739/article/details/134999783
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。