语法以及如何编写媒体查询

dirilisartogul.

媒体查询语法有两种定义方式：外部和内部。 内部形式或内部 内部媒体查询 当我们想要直接在CSS文件中使用媒体查询代码时，会使用此语法。代码的编写方式如下： @仅限媒体|不是媒体类型(条件){ /* --- CSS代码 --- */ } 上面代码的目的是，如果媒体查询的条件正确，它将执行自身内部的CSS代码，并赋予它们比我们之前编写的CSS代码更高的优先级。 （确保在第一个CSS代码之后编写媒体查询代码） 外型 外部媒体查询 当我们想要处理多个不同的CSS文件并根据媒体查询条件的真实性使用它们时，使用上面的语法。 此语法使用HTML中的 link 元素以以下形式使用： <link rel="stylesheet" href="main.css" media="only|not mediaType（条件）"> 此代码的目的是在媒体查询条件为 true 时使用 main.css 文件代码而不是主CSS文件代码。

现在我们将研究该语法的不同部分。 如果有不明白的内容，请务必在评论区提问。我和其他 Mizfa 团队成员会帮助你  媒体查询语法的不同部分 关键词媒体查询 该关键字分别由外部和内部模式中的媒体属性和@media术语指定，指定媒体查询代码。无论我们 阿尔及利亚 手机号码 想要使用MediaQuery，都必须提到这个词。 仅条件部分|不 在本节中，指定媒体查询逻辑。我们在 MediaQuery 中使用的逻辑运算符是： not：接受除规定条件的状态之外的所有状态。 and：位于两个或多个条件之间，当所有条件都为真时执行媒体查询。 or：以“,”的形式写在两个或多个条件之间，如果至少有一个条件为真则执行媒体查询。 only：出现在mediaType之前，在旧的浏览器中，当我们不希望浏览器向媒体查询样式添加额外的样式时使用它。现代浏览器中不需要它。



要更改的媒体类型 本节指定媒体查询代码应该更改哪个页面？ screen：更改普通模式下内容的布局。 语音：更改屏幕阅读器（盲人）的内容布局。 print：改变页面打印模式下内容的布局。 （ctrl+p） all：以相同的方式更改上述所有模式的内容布局。 媒体查询条件 这部分是媒体查询语法中最重要的部分，指定在什么条件下页面应该遵循媒体查询代码。该条件可以用 4 种方式定义。这种情况最重要的形式是高度和宽度的使用： width 和 height：使用 min-width、max-width、max-height 和 min-height 属性，我们可以指定最小和最大宽度和长度。请注意以下示例及其解释： @仅媒体屏幕（最大宽度：1000px） 上面的代码表示：“当宽度小于1000像素时，应在网站页面上进行更改”。