前端必知：22.流式布局和媒体查询（附加简单的自适应布局案例）

小姚学前端

已于 2023-07-23 19:19:34 修改

阅读量247

点赞数 2

分类专栏： HTHL+CSS 文章标签：前端

于 2023-07-23 18:22:33 首次发布

本文链接：https://blog.csdn.net/qq_52799985/article/details/131881853

版权

HTHL+CSS 专栏收录该内容

38 篇文章 2 订阅

订阅专栏

screen 电脑屏幕，手机，ipad 设备中的一种，print 打印机，speech盲人听读机

all指的是所有设备

min-width 的设置

案例

流式布局就是百分比布局

高度的百分比是基于父元素的百分比进行渲染，因此使用百分比作为高度

他的父级必须定高

特殊属性的百分比

元素的margin-top， margin-bottom， padding-top， padding-bottom 他们的

百分比设置都是基于父元素宽度的百分比

line-height 如果设置百分比，不是基于父元素的line-height的值,而是基于他自己字号的百分比

媒体查询

媒体查询根据不同设备的宽度，设置不同的样式

关键字是 @media

属性：

only 指的是只针对某一种设置

not 不针对某一种设备

screen 电脑屏幕，手机，ipad 设备中的一种，print 打印机，speech盲人听读机

all指的是所有设备

and链接后面（）括号中条件的关键字，and的左右两边必须有空格（）在括号里面可以设置条件，它里面的条件一般都是 max-width

min-width 的设置

{} 满足条件的时候css样式必须书写在{}中

注意事项：媒体查询不提供优先级，因此，需要把媒体查询的样式最后加载，基础样式

写在媒体查询的前面，这样才不会覆盖媒体查询的样式

案例

使用流式布局和媒体查询实现简单的自适应布局

相关代码

html部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>媒体查询</title>
    <link rel="stylesheet" href="../css/媒体查询.css">
</head>
<body>
    <div class="fu">
        <div class="z1"><img src="../img/1.png" alt=""><p>小米Max2创意海报1</p></div><div class="z2"><img src="../img/1.png" alt=""><p>小米Max2创意海报2</p></div><div class="z3"><img src="../img/1.png" alt=""><p>小米Max2创意海报3</p></div><div class="z4"><img src="../img/1.png" alt=""><p>小米Max2创意海报4</p></div>
    </div>
</body>
</html>

css部分

*{
    margin: 0;
    padding: 0;
    font-size: 0;
}
.fu{
    width: 80vw;
    height: 500px;
    margin: 30px auto;
    background-color: aqua;
   
}
img{
    width: 100%;
}
.fu div p{
    margin-bottom: 5px;
    font-size: 16px;
}
.fu div{
    width: 26vw;
    height: 240px;
    background-color: #fff;
    display: inline-block;
    overflow: hidden;
    text-align: center;
}
.z2{
    margin: 0 1vw;
}
.z1,.z2,.z3{
    margin-bottom: 10px;
}

@media only screen and (max-width:1000px) {
    .fu{
        width: 53vw;
        background-color: #f00;
    }
    .z1{
        margin-right: 1vw;
    }
    .z2{
        margin: 0;
    }
    .z3{
        margin-right: 1vw;
    }
    .z2,.z3{
        margin-bottom: 0;
    }
    .z2{
        margin-bottom: 10px;
    }
}

总结

流式布局是一种在网页设计中常用的布局方式，它的目标是实现在不同屏幕尺寸下内容的自适应和流动性。在流式布局中，元素的大小和位置通过相对单位或百分比来定义，以便根据视窗大小的变化而调整。

流式布局的好处是可以适应不同设备和屏幕尺寸，提供更好的用户体验。它可以使网页内容自动适应于不同屏幕宽度，避免了在小屏幕设备上出现滚动条或内容被截断的问题。而且，在大屏幕设备上，流式布局可以确保内容不会显得稀疏而留下大量空白区域。

媒体查询是CSS3中的一个特性，它允许我们根据不同的媒体设备和视窗尺寸应用不同的CSS样式。通过使用@media规则，我们可以为特定的设备或视窗尺寸定义不同的样式规则。这使得我们能够创建针对不同屏幕尺寸的自定义布局和样式，达到更好的适应性和响应性。

简单的自适应布局通常结合流式布局和媒体查询来实现。通过设置媒体查询，我们可以针对不同的屏幕宽度应用不同的CSS样式和布局规则。例如，我们可以定义在小屏幕设备上元素的宽度为100%，而在大屏幕设备上为50%。这样就能够实现针对不同设备进行自适应的布局。

总而言之，流式布局和媒体查询是前端开发中必须要掌握的技术。它们提供了灵活性和可伸缩性，使我们能够创建适应不同屏幕尺寸的网页和应用程序。通过使用流式布局和媒体查询，我们可以提供更好的用户体验，让网页内容在各种设备上都能良好地展示和交互。对于现代响应式设计来说，掌握这些概念至关重要。

小姚学前端

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
前端必知：22.流式布局和媒体查询（附加简单的自适应布局案例）

流式布局是一种在网页设计中常用的布局方式，它的目标是实现在不同屏幕尺寸下内容的自适应和流动性。在流式布局中，元素的大小和位置通过相对单位或百分比来定义，以便根据视窗大小的变化而调整。流式布局的好处是可以适应不同设备和屏幕尺寸，提供更好的用户体验。它可以使网页内容自动适应于不同屏幕宽度，避免了在小屏幕设备上出现滚动条或内容被截断的问题。而且，在大屏幕设备上，流式布局可以确保内容不会显得稀疏而留下大量空白区域。媒体查询是CSS3中的一个特性，它允许我们根据不同的媒体设备和视窗尺寸应用不同的CSS样式。
复制链接

扫一扫