29

我很想知道，要针对平板电脑、台式机和智能手机优化您的网站，最好使用什么：媒体查询或视口元标记？见代码：

<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">

对比

/* 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 */
}
4

5 回答 5

22

两者都是必要的。

媒体查询用于为不同的设备提供不同的 css，就像不同设备的 if 条件一样。

Viewport meta 标签是设置告诉设备根据这个标签取宽度。如果未使用的设备将根据其默认设置调整布局，则它就像对设备的重置。

于 2012-07-16T18:31:15.810 回答
12

更新：从 2020 年开始

您需要一个视口元标记（总是）

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

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

并且几乎总是有几个@media 断点

但经常（最近）——人们尝试利用百分比、变量/相对单位、弹性框和自动填充类型的网格情况来避免@media 查询

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

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

这是一篇关于@media 规则的文章。

......

（背景故事的原始答案）

我会说每种情况都是不同的……这不是非此即彼的情况。您在那里拥有的视口元标记将使网站保持 1 比 1 的比例，这在很多情况下是好的。但是，它也被设置为用户可缩放的“否” - 这意味着用户将无法放大等...有时 ipad 和其他设备更改您的网站的方式是最好的...（取决于）

我发现的最好方法是使用媒体查询并选择 2 个方向之一：

  1. 从小做起
  2. 从大做起

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

然后在这一切之后......在设备上测试并尝试不同的视口元标记。

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

于 2012-07-16T18:41:11.660 回答
9

这取决于你想达到什么目标。

如果您只想为桌面分辨率设计并且让移动浏览器“缩小”并假设桌面分辨率，那么您可以仅使用视口元标记，将宽度设置为固定值。

如果你想要一个真正的响应式设计，你应该将视口元标记设置为设备宽度，并使用媒体查询来规划不同分辨率的布局，如代码中所示。

于 2012-07-16T18:31:17.367 回答
0

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

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

什么是媒体查询？ 仅当某个条件为真时，它才使用@media 规则来包含 CSS 属性块。

示例 如果浏览器窗口为 600 像素或更小，则背景颜色将为浅蓝色：

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

什么是元视图端口？？？

视口是网页的用户可见区域。

视口因设备而异，在手机上会比在电脑屏幕上小。

在平板电脑和手机之前，网页只针对电脑屏幕设计，网页采用静态设计和固定大小是很常见的。

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

这并不完美！但是快速修复。

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

我希望这可以帮助您了解元视口和@Media 查询。

于 2020-12-04T02:21:29.923 回答
0

不要小看任何一个！你需要：

  • 视口元数据使您的文本真正可读
  • MQ 让您的网页在小屏幕上易于使用
于 2021-01-31T08:35:05.130 回答