时间戳

首页 > 解决方案 > 媒体查询有自己的想法

html - 媒体查询有自己的想法

问题描述

这很简单。我想做的是用媒体查询改变我的 h1 的颜色。这只是为了测试它们是否正常工作。他们不是。正如您在屏幕截图中看到的那样，当它是 mim 时，我想将其设置为红色。最小时为 600 像素和蓝色。768 像素。

正如您在屏幕截图中看到的那样，它是 634px 宽，应该会触发 min。600px 媒体查询，但它实际上触发了最小值。768px 查询。这没什么意义。

你能帮我做一个响应式网站吗？我感谢那些帮助...

截图

CSS 代码：

@media only screen and (min-width: 600px) {
    h1{
        margin-top: 15%;
        font-size: 3.5rem;
        color: red;
    }}

@media only screen and (min-width: 768px) {
    h1{
        margin-top: 15%;
        font-size: 3.5rem;
        color: blue;
    }}

标签： htmlcssresponsive-designmedia-queries

解决方案

您忘记使用元标记

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">

推荐阅读