一篇媒体查询简谈

最新推荐文章于 2024-07-16 17:18:30 发布

代森森

最新推荐文章于 2024-07-16 17:18:30 发布

阅读量340

点赞数 4

本文链接：https://blog.csdn.net/ovocc/article/details/121724122

版权

定义和使用
语法以及用法
属性
用法
- 媒体查询+rem实现元素的动态大小改变

定义和使用

1.使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。
2.@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。
3.当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。

语法以及用法

@media mediatype and|not|only (media feature) {
CSS-Code;
}

    <style>
        /* 我们在屏幕上适配且最大宽度了800像素 */
        
        @media screen and (max-width:800px) {
            body {
                background-color: plum;
            }
        }
        
        @media screen and (max-width:500px) {
            body {
                background-color: pink;
            }
        }
    </style>
</head>

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

请添加图片描述

属性

媒体类型

值	描述
all	用于所有设备
print	用于打印机和打印预览
screen	用于电脑屏幕，平板电脑，智能手机等。
–	–

媒体功能

值	描述
min-width	定义输出设备中的页面最小可见区域宽度。
max-width	定义输出设备中的页面最大可见区域宽度。
–	–

关键词

and，可以将多个媒体特征连接在一起，相当于且的意思
not，排除某个媒体类型，相当于非的意思，可忽略
only知道特定的媒体类型，可以忽略

用法

媒体查询+rem实现元素的动态大小改变

rem单位是跟着html走来走去的，有了rem页面元素可以设置不同大小尺寸
媒体查找可以根据不同设备宽度来修改样式
媒体查询+rem就可以实现不同设备宽度，实现页面元素大小的动态变化

eg：

   * {
            margin: 0;
            padding: 0;
        }
        /* 从小到大的顺序 */
        
        @media screen and (min-width:320px) {
            html {
                font-size: 50px;
            }
        }
        
        @media screen and (min-width:640px) {
            html {
                font-size: 100px;
            }
        }
        
        .top {
            height: 1rem;
            font-size: .5rem;
            background-color: green;
            color: #fff;
            text-align: center;
            line-height: 1rem;
        }
    </style>
</head>

<body>
    <div class="top">购物车</div>
</body>

请添加图片描述

代森森

关注

4
点赞
踩
0

收藏

觉得还不错? 一键收藏
3
评论
一篇媒体查询简谈

定义和使用语法以及用法属性媒体类型媒体功能关键词用法媒体查询+rem实现元素的动态大小改变定义和使用1.使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。2.@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。3.当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。语法以及用法@media mediatype and|not|only (media feature) {CSS-Code;.
复制链接

扫一扫