移动开发—媒体查询(Media Query)-阿里云开发者社区

移动开发—媒体查询(Media Query)

2023-11-27 49

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 移动开发—媒体查询(Media Query)

移动开发—媒体查询(Media Query)

1、使用@media，可以针对不同的媒体类型定义不同的样式

2、@media可以针对不同的屏幕尺寸设置不同的样式

3、当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面

语法规范：

一、mediatype查询类型

可以将不同的设备划分成不同的类型，称为媒体类型

二、关键字语法规范

关键字将媒体类型或多个媒体特性连接到一起作为媒体查询的条件

三、媒体特性

每种媒体类型都具有各自不同的特性，根据不同的媒体类型设置不同的展示风格，我们暂且了解三个，注意他们要加小括号

四、根据页面的宽度改变背景颜色

@media screen and (max-width:539px) {
            body {
                background-color: blue;
            }
        }
        @media screen and (min-width:540px) {}
        body {
            background-color: purple;
        }
        @media screen and (min-width:970px) {
            body {
                background-color: red;
            }

五、媒体查询+rem

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

@media screen and (min-width:320px) {
            html {
                font-size: 50px;
            }
        }
        @media screen and (min-width:640px) {
            html {
                font-size: 100px;
            }
        }
        * {
            margin: 0;
            padding: 0;
        }
        .top {
            height: 1rem;
            font-style: .5rem;
            background-color: green;
            color: #fff;
            text-align: center;
            line-height: 1rem;
        }
    </style>
</head>
<div class="top">
  好好学习，天天向上
</div>