视口元标记和媒体查询有什么区别？

Question

我很想知道，为了优化您的网站在平板电脑、台式电脑和智能手机上的表现，最好使用什么：媒体查询还是视口元标记？请看代码：

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

vs

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen 
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
/* Styles */
}

/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen 
and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}

- Dexter Schneider

---

你似乎认为你只能选择使用其中一个。 - BoltClock

Answer 1

两者都是必要的。

媒体查询(Media queries) 用于针对不同设备使用不同的CSS，就像为不同设备设置if条件一样。

视口(Viewport) 元标签用于告诉设备根据此标签来设置宽度。如果不使用此元标签，设备将根据其默认设置调整布局，该元标签相当于为设备进行重置。

- SVS

---

谢谢您的回答。告诉我，什么是最好的选择，是拥有一个普通的固定值定义的CSS样式，然后将所有其他CSS查询设置为相对百分比宽度/高度的“正常”样式表？还是为每个媒体查询样式表定义其自己的固定尺寸？ - Dexter Schneider

最好先为移动设备设计，然后再考虑更大的设备。百分比布局或流式布局对于任何类型的设计都是最好的选择，如果您能够处理它，那就更好了。另一种方法是使用自适应布局，针对不同的分辨率采用固定宽度。 - SVS

如果我理解正确的话，这里有自适应布局（针对媒体查询使用固定宽度）和响应式布局（针对媒体查询使用流体百分位宽度）。谢谢。 - Dexter Schneider

我会说：两者都不是必要的...HTML默认是响应式的。喜欢你回答的其余部分。 - Mr. Hugo

Answer 2

更新：从2020年开始

您需要一个视口元标记（始终如此）

<meta name="viewport" content="width=device-width, initial-scale=1">

https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag

几乎总是需要一些@media断点

但通常（最近）-人们尝试利用百分比，变量/相对单位，flex-box和自动填充类型的网格情况来避免@media查询

我认为所有这些东西都可以一起使用以获得最佳结果。我喜欢@media查询有很多原因。: )它们只是要使用的工具！坚持目标-正确的工具就会呈现出来。

这里有一个涵盖整个思考过程的视频。

这里有关于@media规则的文章。

.....

（背景故事的原始答案）

我认为每种情况都不同......这不是一个非此即彼的情况。您上面的视口元标记将使网站保持1:1比例，在许多情况下是有益的。但是，它还设置了user-scalable“no”-这意味着用户将无法缩放等等......有时ipad和其他设备改变您的网站的方式是最好的......（取决于情况）

我发现的最佳方法是使用媒体查询并选择以下两个方向之一：

1. 从小开始逐步构建
2. 从大开始构建

拉伸浏览器窗口越来越大（或越来越小），然后当网站变丑时（就在那之前），那就是您的下一个断点......在那里进行媒体查询......并重复。不要注意所有设备尺寸---这样您就知道无论出现什么新设备等等---您已经将其设计成在每种可能的大小下都看起来不错。（当它低于320 /我喜欢让网站变成名片///更好的是为非智能手机提供可读信息...）

然后，在所有这些之后......在设备上测试并尝试不同的视口元标记。

有很多关于它的好文章......使用关键词，如“响应式设计”或“自适应”或“RWD”响应式网页设计。祝你好运！

- sheriffderek

---

请注意，jQuery媒体感应功能可能存在问题...因为当您更改桌面浏览器大小时，它们不会自动调整...但是，它们非常适合针对移动设备。 - sheriffderek

如果您嵌入视频...我真的很喜欢 "Fitvids"，它是一个插件，告诉 Vimeo 等适应并更改大小以适应 div... 它真的很棒！！！就像 Chris Coyier 和 Paraval 一样。 - sheriffderek

我现在要做的是设置6个断点...然后使用CSS过渡在它们之间流动...http://derekthomaswood.com/transitionV.1/trans2.html 我一直在为客户制作一个示例...(仍然非常粗糙) - sheriffderek

谢谢你，这个帮我省了好几个小时的调试时间！！ - Sagar

最近制作了这个视频，专为那些对响应式布局的概念还不太熟悉的人而设计：https://vimeo.com/478753228 - sheriffderek

Answer 3

这取决于你想要实现什么目标。

如果你只想为桌面分辨率进行设计，并且让移动浏览器“缩小”并假定为类似于桌面的分辨率，那么你只需使用viewport元标记，将宽度设置为固定值。

如果你想要真正的响应式设计，你应该将viewport元标记设置为设备宽度，并使用媒体查询为不同的分辨率规划布局，就像你在代码中展示的那样。

- Variant

---

我有一个图片作为我的主页图片，并且它居中于页面。现在我想让高度随着屏幕大小自适应，这样就不需要滚动条了。由于所有的设计/规格都是以宽度为基础的，这会如何改变情况？ - Dexter Schneider

Answer 4

不要低估它们的重要性！ 你需要：

• 视口元标记，使你的文本实际可读
• 媒体查询，使你的网页在小屏幕上易于使用

- Anonymous

Answer 5

@Media Query 用于响应我们网站在其他设备上的显示。
例如，此查询仅适用于最小宽度为768像素和最大宽度为1024像素的设备。

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* Styles */
} 

什么是媒体查询？ 它使用@media规则，仅在特定条件为真时包含一组CSS属性块。

例如 如果浏览器窗口大小为600px或更小，则背景颜色将为lightblue：

@media only screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

什么是 Meta Viewport？？？

Viewport 是用户在网页上可见的区域。

Viewport 随设备而异，在手机上会比电脑屏幕小。

在平板电脑和手机出现之前，网页只设计给电脑屏幕使用，网页通常具有静态设计和固定大小。

然后，当我们开始使用平板电脑和手机浏览互联网时，固定大小的网页太大而无法适应视口。为了解决这个问题，这些设备上的浏览器将整个网页缩小以适应屏幕。

这并不完美！！但是是一个快速的解决方法。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

我希望这可以帮助你了解关于meta viewport和@Media查询的内容。

- Daham Akalanka