响应式之媒体查询

最新推荐文章于 2023-12-14 21:15:55 发布

人生无绝境

最新推荐文章于 2023-12-14 21:15:55 发布

阅读量248

点赞数

分类专栏： HTML

本文链接：https://blog.csdn.net/qqj3066574300/article/details/84548678

版权

HTML 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

前言

当你想用媒体查询时，就必须得用@media，而使用了@media查询，就可以对不同得媒体类型定义不同得样式，而@media，是可以针对不同得屏幕得大小来设置不同得样式，当重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面，也就是它得强大之处。

@media的使用语法：

@media mediatype and |not|only(media feature)
{
    具体的样式内容
}

@media的使用代码案例

<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        body{
            background-color: lightgreen;
        }
        @media only screen and (max-width: 900px) {
            body{
                background-color: red;
            }
        }
    </style>
</head>
<body>
<h2>当页面的宽度小于600px的时候，背景会变为浅红色，当宽度大于900px的时候，页面的背景就会变成浅绿色。当页面的高度小于600px的时候，页面变黄色，当页面的高度大于900px的时候，页面就会变成蓝色</h2>
</body>
</html>

效果显示

<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>

        @media only screen and (max-height: 900px) {
            body{
                background-color: yellow;
            }
        }
        @media only screen and (min-height: 600px) {
            body{
                background-color: blue;
            }
        }

    </style>
</head>
<body>
<h2>当页面的宽度小于600px的时候，背景会变为浅红色，当宽度大于900px的时候，页面的背景就会变成浅绿色。当页面的高度小于600px的时候，页面变黄色，当页面的高度大于900px的时候，页面就会变成蓝色</h2>
</body>
</html>

效果显示

希望能帮助到热爱编程的爱好者，谢谢观看！

人生无绝境

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
响应式之媒体查询

前言当你想用媒体查询时，就必须得用@media，而使用了@media查询，就可以对不同得媒体类型定义不同得样式，而@media，是可以针对不同得屏幕得大小来设置不同得样式，当重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面，也就是它得强大之处。@media的使用语法：@media mediatype and |not|only(media feature){ ...
复制链接

扫一扫