前端学习笔记100-响应式布局

最新推荐文章于 2024-06-28 21:22:19 发布

小欣CZX

最新推荐文章于 2024-06-28 21:22:19 发布

阅读量213

点赞数

文章标签： html css

本文链接：https://blog.csdn.net/weixin_45034895/article/details/117134688

版权

小白前端学习专栏收录该内容

100 篇文章 7 订阅

订阅专栏

本文介绍了响应式布局的概念，通过实例展示了响应式布局在不同设备或窗口大小下的效果，重点讲解了媒体查询的使用，包括媒体类型如all、print、screen和speech。媒体查询允许根据设备特征设置样式，确保网页在各种设备上呈现良好。文章还探讨了`only`关键字的作用，并通过实际测试验证了其在老版本浏览器中的表现。

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

响应式布局

打开小米商城，可以看到网页右侧有这个，
在这里插入图片描述
如果我把网页缩小，它会自动变成这个，

打开jQuery官网，改变它的宽度，有如下效果，
在这里插入图片描述
这就是我们这节要学的响应式布局。

媒体查询

响应式布局：网页可以根据不同的设备或窗口大小呈现出不同的效果。
通过响应式布局，可以使一个网页适用于所有设备。
响应式布局的关键是媒体查询。
通过媒体查询，可以为不同的设备或设备的不同状态分别设置样式。
打开zeal，搜索media，
在这里插入图片描述
点这个，可以看例子。

语法

@media 查询规则（）

media types（媒体类型）

all：所有设备

<!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>
        @media all {
            body{
                background-color: #bfa;
            }
        }
    </style>
</head>
<body>
    
</body>
</html>

这个代码表示所有设备下，背景颜色都是#bfa。
在这里插入图片描述

print：打印设备。

        @media print {
            body{
                background-color: #bfa;
            }
        }

在这里插入图片描述

screen：带屏幕的设备
speech:屏幕阅读器
可以用，写好几种媒体类型。(一般不会这么写，如果有多种，直接写all就完事了)

        @media print,screen{
            body{
                background-color: #bfa;
            }
        }

可以在媒体类型前些only，表示只有在这个类型才有效。（这个有点鸡肋，不写only的话，也是只有这个类型才有效。它的作用是有些老版本浏览器在显示媒体响应中的东西时会有问题，如果我前面加一个only，老版本浏览器则会忽略掉媒体响应的内容。）

        @media only screen{
            body{
                background-color: #bfa;
            }
        }

edge的显示：
在这里插入图片描述
为了验证一下老版本的浏览器在这里是否真的会忽略掉媒体响应，我试了下ie的老版本，如下图。可以看到，ie9以下的忽略了媒体查询。

小欣CZX

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
2
评论
前端学习笔记100-响应式布局

前端学习笔记100-响应式布局响应式布局媒体查询语法media types（媒体类型）响应式布局打开小米商城，可以看到网页右侧有这个，如果我把网页缩小，它会自动变成这个，打开jQuery官网，改变它的宽度，有如下效果，这就是我们这节要学的响应式布局。媒体查询响应式布局：网页可以根据不同的设备或窗口大小呈现出不同的效果。通过响应式布局，可以使一个网页适用于所有设备。响应式布局的关键是媒体查询。通过媒体查询，可以为不同的设备或设备的不同状态分别设置样式。打开zeal，搜索media，
复制链接

扫一扫