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

Question

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

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 元素颜色。 但是，无论屏幕大小如何，元素都不会发生变化。我有点困惑，因为我看过人们以此为例的视频。

Answer 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因此inline-block。

媒体查询不会否定类似display的东西，除非它被显式定义，所以所有input按钮仍然呈现为inline-block.但是现在在移动屏幕上，这些按钮将占用足够的空间，以至于它们会相互推动到单独的行。