对于移动设备，分辨率实际上很大，只有屏幕尺寸很小。基于此：
- 对于网站设计，我们是否针对屏幕分辨率（例如 1920x1080）？
- 而对于移动应用程序。我们是否针对屏幕尺寸？
响应式网页设计是基于屏幕分辨率还是屏幕尺寸？
平面设计
网站设计
css
html
移动的
响应式设计
2022-01-19 08:21:41
4个回答
响应式设计既不基于屏幕分辨率也不基于屏幕尺寸。相反，响应式设计基于内容及其制作方式，使其适合所有尺寸和分辨率。
你思考响应式设计的方式是错误的。我假设您来自更传统的印刷设计背景，是吗？为网络设计更自由。响应式网站通常不具有相同的常规断点或特定尺寸/分辨率，因为 Web 允许的不止这些 - 它允许达到所有屏幕尺寸。这样，您可以使用适合您设计的任何尺寸进行设计，只要它们是合理的。
话虽如此，最佳实践是以移动优先的方式进行设计，实际上应该将其命名为mobile-most-important。这迫使您专注于最重要和可能的内容，然后允许您为更大的屏幕添加更多内容，而不是强迫您在大屏幕上开始添加更多内容，然后在为较小的屏幕进行设计时删除内容。您可以在我的响应式设计入门中阅读更多相关信息。
但我们还必须以允许响应性的方式进行设计。最佳实践是一个活生生的例子，无论是原型形式还是某些线框图程序，而不是像 PSD 这样的静态文档。在开发人员方面，我们应该使用响应式单元并以一种有意义的方式构建我们的代码。
话虽如此，您应该以像素为单位，即分辨率，而不是屏幕尺寸。
首先，感谢大家的回答和宝贵的指导方针，它确实有帮助！
请允许我添加我的结论：
实际上，以手机屏幕分辨率为目标并不是一个好的用户体验，小屏幕分辨率太高，字体太小无法阅读，图标太小无法点击等。
因此，最好根据实际视口大小进行设计！这种方式是基于用户可以看到和感受到的。
为了在现实生活中实现这一点，我们应该在<head>HTML 文档中添加一个视口宽度元标记：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
这告诉浏览器以等于屏幕宽度的宽度呈现页面，以确保 HTML 页面宽度等于屏幕宽度（以像素为单位）。然后可以通过针对不同移动视口大小（彼此有点接近）的媒体查询轻松规划开发，并将产生视觉上更清晰的元素。
如果我错了，请纠正我。
更新：
根据我的卑微经验，我建议以下步骤来更好地开发响应式网站：
1-使用视口元（见顶部），它还将根据谷歌提高网页在移动搜索结果中的排名。 http://googlewebmastercentral.blogspot.com/2015/04/faqs-april-21st-mobile-friendly.html
经过测试，似乎单独添加视口元数据会给您的网站在移动测试工具中的评分 https://developers.google.com/speed/pagespeed/insights/
2-您可能要考虑应用移动优先方法，总是比变大更容易（取决于您的网站有多复杂）
3-应用混合响应系统，混合自适应（流体）和响应（css媒体查询），以实现此目的：
对宽度和水平边距/填充使用百分比。（如果您愿意，垂直边距可以具有固定的像素大小。滚动不再是问题）
将em用于字体，这样当您在媒体查询中更改正文（或 html）的字体大小时，所有 CSS 元素都将适应该大小，使用 px 将使其成为一场噩梦，因为您必须为每个 CSS 类和更改其字体大小。
将 div浮动到左侧，以便它们与可用空间正确对齐（如果您的设计需要，则向右对齐）。
4- 定义断点，为此使用响应式测试工具。我使用firefox响应式设计视图，简单地缩小宽度，直到你到达网站出错的点（例如500px），这是一个断点标记它。
在该断点（500px）的媒体查询中应用新的 CSS 规则，
5- 记住要保持网站的质量和清晰度！如果元素变得不清楚并且彼此太靠近，则扩展元素宽度以占据容器宽度并使其垂直堆叠，
并记住为 body 提供一个新的字体大小，以便所有子元素继承更大的字体并变得更具可读性。
6-重复响应测试并定义你的第二个断点，很可能你不会得到很多断点，因为我们在这里使用流体设计，这就是使用百分比的地方！
我之前在一个设计元素繁重的大型网站上工作过，它只需要 2 个媒体查询 :)
希望这会有所帮助
确实是个好问题！
我令人困惑的长答案：没有，两者都有
这里只是一些想法，稍微评论一下我们今天面临的矛盾。
自古以来，这项技术就不再是应有的样子。
我们都应该根据现实生活中的单位（或感知大小）进行设计，并具有一定程度的灵活性和自由度，让用户进行一些额外的调整。
但是要知道现实生活中的测量，我们需要这两种信息。物理尺寸和设备分辨率 = 像素密度。
但事实证明，就在几年前，屏幕设备开始宣布像素密度。还有一些不向服务器申报，只是大肆宣传。（又名 Ipad，Iphone）
操作系统可以检测显示分辨率，因为必须相应地发送信号，但是对于屏幕实际尺寸，我们需要每个模型的庞大数据库。不好。
这给我们留下了这个屏幕分辨率，这是我们可以知道的一些信息。
但是，为大型 FullHD 显示器设计与在移动设备上设计相同的分辨率完全不同。均为 1920x1080。哎哟。
一个特殊情况是在投影仪上，因为我们不知道投影距离和观看者距离。
部分解决方案是媒体查询和矢量元素等。
一个简短的回答
对于网页设计：至少在我们找到更好的东西之前。
流体设计（百分比）和自然流动，明确定义的部分。
1920 宽
媒体查询可能在 1280
和/或在 1024
大概720
和 480。
带有设备检测以提供额外支持。
对于移动原生应用
由于它非常具体，只需遵循品牌的指导方针，关于 UI 和图标。
已编辑。
为什么要在全高清移动设备上选择小屏幕分辨率？
智能手机的实际分辨率为 FullHD，但通常它会向服务器和浏览器声明小分辨率。您可以测试这个谷歌搜索https://www.google.com/search?q=what+is+my+screen+resolution以便媒体查询工作。
响应式页面如何重排是基于以虚拟像素（不是真实像素）为单位的视口（不是屏幕）的尺寸。
在 1 个虚拟像素 = 1 个实际像素的传统桌面上，如果您的浏览器宽度设置为 1000 像素，则页面将重新排列以适应该值。
在 iPhone 6 上，其中 1 个虚拟像素（Apple 称这些点）= 3 个实际像素，浏览器宽度是屏幕宽度，内容将重新排列以适应 417px 宽度（即使这实际上是 1242 个实际像素）
所以有点奇怪，在上面的例子中，具有较少实际像素的设备实际上被视为响应式布局中更宽的视口。
其它你可能感兴趣的问题