使用@media 查询来实现媒体兼容性答案

【问题标题】：using @media queries for media compatibility使用@media 查询来实现媒体兼容性
【发布时间】：2020-07-04 12:06:55
【问题描述】：

我不相信我掌握了如何创建响应式网站。这是我的代码：

body{
    width: 100%;
    font-size: 16px;
    background-color: grey;

}
h1{
    color:black;
}

p{
    color:black;
}

@media only screen and(min-width:320px)and(max-width:420px){
    h1{
        color:red;
    }
    p{
        color: white;
    }
}

我对这个小 CSS 编辑的目标是查看我是否了解媒体查询的工作原理，并在屏幕尺寸介于移动设备尺寸之间时更改 h1 和 p 元素颜色。但是，无论屏幕大小如何，元素都不会发生变化。我有点困惑，因为我看过人们以此为例的视频。

【问题讨论】：

查看此链接以获得更完善的信息w3schools.com/css/css_rwd_mediaqueries.asp
感谢您提供此资源。（我觉得解释我如何通过问题解决可能会帮助其他人在未来解决他们的问题）这有助于记住代码是自上而下处理的，我也错过了这个元标记<meta name="viewport" content="width=device-width, initial-scale=1.0">我的问题在这里我相信也是使用 min-width和最大宽度（在我的情况下）通过从（最小宽度：1080）到（最小宽度：780）到（最小宽度：420）的递减工作来解决（在我的情况下），因为我之前为桌面分辨率构建了我的网站.

标签： html css media-queries

【解决方案1】：

你有正确的顺序，首先是普通规则，然后是移动规则。

假设您在桌面和手机的屏幕上有两个按钮。因为手机显然没有足够的宽度，所以您可能希望将按钮显示在彼此上方和下方，而不是并排显示。

我的手机横屏宽度为375px。如果按钮呈现为250px，那么它们显然不会在我的手机上并排呈现而不会被剪裁，因此对访问者来说看起来很乱。

考虑一下这段代码：

input[type='button'] {display: inline-block; width: calc(50% - 8px);}

@media (max-width: 1024px)
{
 input[type='button'] {width: calc(100% - 8px);}
}

按钮input 元素设置为使用（大约）50% 的宽度（对border 和margin 进行一点补偿）。由于它们固有 display: inline; 我使用display: inline-block 来保持它们在同一行上渲染（直接block 渲染没有换行符）虽然允许设置width 因此@987654331 @。

媒体查询不会否定display 之类的东西，除非它被明确定义，所以所有input 按钮仍然呈现为inline-block。但现在在移动屏幕上，这些按钮将占用足够的空间，它们会相互推动以分隔行。

【讨论】：