标签：媒体 media 中犯 查询 使用 屏幕 我们 CSS

您在 CSS 媒体查询中犯的错误。

视口，@media，最大高度，最小宽度，@supports，仅，屏幕 和 其他没用的东西 .如果我们有这个，我们需要什么：

 @media 屏幕和（最大宽度：Npx）{}

吨 我看到的大多数媒体查询都是这样的。

你可能使用 开发工具 对于响应式设计，当你测试你的布局时，你会使用一个发现 ** 休息** 元素算法。

休息 是一个添加元素 y 滚动 不需要时用于当前屏幕。

真实的例子。

在 ** Nest Hub Max** 我们的网站在此屏幕上看起来与我们预期的一样。让我们缩小屏幕尺寸以进行查找 休息 元素。

行动。

设计师说，在手机上，我们必须将我们的内容缩放到全屏。我们该怎么做？添加一个 @媒体目录 .

魔法

我们添加了这个 媒体查询 .

 @media screen and (max-width: 376px) {  
 宽度：100%；  
 }

这是有效的。

一般来说：

1. 您创建了一个应用程序/站点
2. 您为其他显示添加了断点。
3. 你喝咖啡。

但是确实有不同的显示。在某些显示器上， 高度大于宽度 在 另一个宽度小于 200px 或者 宽度大于高度 和 ETC .

这可能是一个真正的问题，你可能会失去很多用户和金钱。在这篇文章中，我想谈谈关于 ** 查看端口/媒体查询** 和 ** 响应式布局** 正如你所理解的，这是我写过的最长的介绍。

媒体查询中的简要介绍。

视口 是当前帧，没有额外的 x 或 y 滚动。
如果您的应用程序高度为 2340 像素且显示尺寸为 1600 - 您的视口为 1600 像素。

媒体查询 是样式更新的 CSS 规则，取决于设备设置。

断点 是我们在媒体查询中声明的宽高比。

让我们看一下基本的媒体查询。

 @media screen and (max-(width/height): 1200px) {}

在当前显示时应用样式 多于/长于 1200 像素。

 @media screen and (min-(width/height): 1200px) {}

在当前显示时应用样式 小于/小于 1200 像素。

 @media screen and (max-(width/height): 1200px)

我们可以将此样式应用于显示小于 1200 像素的任何设备。

 @media（方向：“肖像”|“风景”）

应用样式取决于设备的方向。

 @媒体演讲/全部/打印

如果当前设备是，则应用样式 ** 打印机** 或者 ** 演讲** , ** 全部** 意味着除了 打印机 .

有简单而流行的媒体查询。有时您可以使用以下方法创建一个困难的查询： 和 , 不 和 其他关键字。

 @media 屏幕和（最大宽度：1200px）

这个语法 媒体查询 是：

1. @媒体 是规则的
2. 屏幕 是媒体类型
3. 最大宽度 是媒体功能

现在让我们谈谈陷阱。

陷阱和不明显的错误。

a) 考虑身高。这真的很有必要。

你可能认为用户会使用你的应用程序 台式机/笔记本电脑/手机/平板电脑 .但这确实有必要考虑其他框架。 例如 : 越来越多的人每天使用智能手表。智能手表的默认尺寸为 240/240px。

在智能手表中，我们的网站是这样的。导航块对于这个尺寸来说非常大 - 让我们改变这个屏幕和这个媒体查询的导航高度：

 @media 屏幕和（最大高度：240 像素）{}

您可以看到我们将应用程序更新为智能手表。

结论 ：

想想每一帧，当你看到带显示屏的设备时——你必须明白我们可以在其中运行你的应用程序。

b) 尽可能使用“仅”表示“屏幕”

当我们创建一个媒体查询并希望为当前显示应用样式时，我们使用 ** 媒体类型** 关键字，但旧浏览器不理解，我们必须使用 只要 关键词。

结论：

利用 只要 当你使用 屏幕 关键词。

c) 不要忘记打印机。

不要忘记打印机。当我们在浏览器中看到应用程序时，浏览器使用 RGB 颜色模式，但打印机没有。打印机使用 CMYK 模型，正如您在 CMYK 中所知道的 - 黑色往往会褪色。如您所见，默认情况下浏览器将灰色更改为黑色。

“知识...” 是灰色的，我们将在现实生活中打印它，灰色将更难看到。让我们改变一些打印机的样式：

我添加了 ** 显示：无** 用于导航块，因为导航仅适用于桌面，我将打印机的默认颜色更改为黑色。

d）想想你使用的单位

如果您不考虑屏幕阅读器并随时随地使用像素，您可以跳过本节。但是，如果您考虑一下-您可能会使用 雷姆 用于改进 UI。正如你所理解的， rem 破坏了你的用户界面 .

为什么会这样？

1rem 是 HTML 的默认字体大小。默认情况下，1rem 是 16px。在这个例子中， 森林 是 2rem - 在桌面上这可以按我们的预期工作，但在另一台设备上 ** 例如智能手表** 它工作不正确。为了解决这个问题，尝试改变 雷姆 在其他单位。

e) 使用百分比和 em

尝试使用 百分比，em 以及其他用于响应式设计的可扩展单元，例如边距、填充、宽度。

但是当你使用可缩放的字体单位时——想想响应式设计。

d) 使用图片标签制作响应式图片

我在 本文 .

谢谢阅读。

如果你跟着我，我会很开心！

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明

本文链接：https://www.qanswer.top/5816/02180100

标签：媒体,media,中犯,查询,使用,屏幕,我们,CSS
From： https://www.cnblogs.com/amboke/p/16645036.html