Question

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

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

Answer 1

两者都是必要的。

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

视口元标记用于设置告诉设备根据此标记获取宽度。它就像设备的重置一样，如果未使用的设备将根据其默认设置调整布局。

Answer 2

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

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

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

Answer 3

我会说每种情况都不同......而且这不是一种情况。你拥有的视口元标记会使网站保持1比1的比例，这在很多情况下是好的。然而，它也设置为用户可扩展“否” - 这意味着用户将无法放大等...有时ipads和其他设备改变您的网站的方式是最好的...（取决于）

我找到的最好的方法是使用媒体查询并选择2个dirrections中的一个：

从小开始构建
从大型开始构建

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

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

有很多关于它的精彩文章...使用“响应式设计”或“自适应”或“RWD”响应式网页设计等关键字。祝你好运!!!

Answer 4

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

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

什么是媒体查询？ 仅当满足特定条件时，它才使用@media规则包含CSS属性块。

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

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

什么是元视图端口？

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

视口随设备而异，在手机上会比在计算机屏幕上小。

在平板电脑和移动电话之前，网页仅设计用于计算机屏幕，并且网页具有静态设计和固定大小是很常见的。

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

这不是完美的！但是快速解决。

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

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

Answer 5

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

Viewport meta 使您的文本真正可读
MQ 让您的网页易于在小屏幕上使用

视口元标记与媒体查询？

5 个答案: