Question

我如何使网站采用正在浏览它的用户设备的尺寸，以避免出现诸如滚动页面宽度以便查看完整内容等美学问题。< / p>

如果不可能，最佳尺寸是什么？

Answer 1

您可以使用多种技术，其中大部分都在术语＆＃34;响应式设计＆＃34;中进行了总结。你的第一个评论员在他们说你应该研究这个主题时是正确的，因为它太宽泛而无法回答，但让我做出基本的努力，给予任何寻找一些指针的人（就技术而言，不是在表格中）超链接）

百分比值

首先，总是有用的 - 在CSS中使用比例宽度，如下所示：

#content { max-width: 800px; width: 100%; } /* this spans around #left and #right */
#left { width: 25%; }
#right { width: 75%; }
#right img { max-width: 100%; }

使用这些值通常不是预制布局的最佳方式，但却是人们有时忽略的响应式网页设计的基本要素。但是，虽然在大多数情况下您都可以将所有内容都包含在屏幕中，但您无法针对特定屏幕维度优化输出 - 以及媒体查询的来源。

媒体查询

媒体查询是CSS3规范的一部分，旨在仅将样式应用于特定设备，屏幕大小或其他输出条件。它是以不同方式为不同设备或分辨率绘制元素的首选工具。

最重要的是，您会看到如下声明：

@media (min-width: 600px) {
  body {
    background-color: blue;
  }
}

如果用户的屏幕宽度至少为600px（在当前使用的方向上），则仅显示括号之间的所有内容。

还有其他类型的选择器，可让您过滤设备类型（如屏幕或电视）或方向（横向或纵向）。请注意，由于这里提及的原因太多而无法在所有设备上忠实地实施这些设备。

more about media queries on w3schools

Viewport Metatag

作为<head>内容的一部分，您可以添加名为视口的元标记，您可以在其中设置设备的某些轮廓以呈现您的网页。由于某些移动设备特别会缩放您的内容以适应屏幕而不是使用真实的屏幕分辨率，因此视口标记允许您微调页面的呈现方式。

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

在这种情况下，正在设置以下内容：

网页的渲染宽度应为设备的屏幕分辨率
网页最初应以100％
最大缩放级别为100％（防止用户放大）
根本不允许用户缩放页面（阻止用户完全缩放）

more about the viewport metatag on w3schools

技术

在处理媒体查询一段时间后，网页设计师一致认为移动优先设计是最佳实践。这意味着（非常粗略地概述）默认情况下，CSS将应用于最小分辨率，然后您可以使用min-width媒体查询添加更多定义。这样可以确保即使在Universe上最旧，维护最少的浏览器上，您的网页也会呈现可读性（如果不是优化且非常漂亮），并且在创建它时，您将比通过其他方式更轻松地进行循环。

技术方面不是一切，但是：移动优先设计让您了解网页的内容 - 您的观众感兴趣的实际部分。您现在被迫为每个元素找到一个有意义的地方在你的页面上，如果不是这样，你可能会把你不必要的元素放在那里，只为了display:none它们的低分辨率，表明它们并不是那么重要。启动。

让网站跨越用户？

2 个答案:

百分比值

媒体查询

Viewport Metatag

技术