Question

好的，我正在尝试更深入地学习HTML / CSS，我在CSS中遇到了一些新的东西。它显示如下：

@media(min-width: 850px) {
    .header h1 {
        font-size: 120px;
    }
}

我到处寻找答案，但每个人都试图让解释过于复杂。有人可以用简单的语言向我解释 @media 的作用吗？谢谢！

Answer 1

媒体查询允许您定义特定于某些环境的规则。例如＆＃34; @media（min-width：850px）＆＃34;表示此规则仅适用申请宽度至少为850像素的窗户。

经常使用此功能，例如，在尝试设计移动设备时，因为您可以使用@media screen and (max-width: 600px)之类的规则这意味着这仅适用于最大宽度为600像素的屏幕，如智能手机。

您可以轻松找到许多有关使用媒体查询的正确方法的教程

简单示例：http://www.w3schools.com/css/css_rwd_mediaqueries.asp

Answer 2

用非常简单的话说：

想象一下你＆＃39; h1＆＃39;的内容。您网站中的标记设置为默认值：

font-size: 220px;

当屏幕宽度大于850px时，将显示此信息。

在宽度小于850像素的设备中，将使用该指令

@media(min-width: 850px) {
    .header h1 {
        font-size: 120px;
    }
}

重新上限：

@media规则用于为不同的媒体类型/设备定义不同的样式规则。

Answer 3

'@ media'不过是'id'和'class'之类的css选择器。但'@media'用于设备屏幕宽度。考虑您要根据PC，平板电脑，手机等设备更改数据样式，您必须使用@media选择器。例如：你有h1：40px，现在如果你在移动设备上查看它的样式会显得很奇怪，所以要改变'h1'标签的样式，我们可以使用@media，如下所示。

@media（min-width：320px）和（max-width：767px）{h1：14px; }

'min-width'是最小设备宽度，'max-width'是最大设备宽度，如果您的屏幕介于该宽度之间，那么样式将适用。

您还可以通过更改桌面屏幕尺寸来检查这一点。

有人可以向我解释CSS中的'媒体'是什么吗？

3 个答案: