mobile - 媒体查询 VS。适用于不同移动格式的流体网格

Question

在我开始开发网站之前，这篇文章不是关于代码语法，而是关于工作策略。

如果我需要为智能手机（Android { 3 个不同尺寸}、iphone {2 个不同尺寸} 和其他非智能手机）设计移动网站的前端，我应该如何进行？（我的设计必须对所有这些设备都有效并且相同）

1-我是否应该按照关于灵活图像和流体网格（灵活 DIV：s）的想法来设计我的作品。

或者

2-为每个目标模型设置不同的媒体查询大小？（这个解决方案可能会创造更多的开发工作，不是吗？）

非常感谢你的想法...

Answer 1

@YoniGeek；可能你必须使用fluid layout.

为此，只需定义screen width而不是device width& 定义css屏幕maximum device尺寸。所以; 您无需css为不同的设备定义不同的。

阅读这篇文章http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/

检查此站点以获取灵感http://mediaqueri.es/并在所有设备中看起来都相同。

Answer 2

这真的是一个偏好问题。您可以使用流畅的设计、媒体查询（使用 css 转换）或所有技术的组合。

在我最近的项目中，我使用了媒体查询。完成基本设计后，我用了不到一个小时的时间让它在从 240 像素到 960 像素宽的不同分辨率下工作。所以更多的开发工作......它不是。

我之前对您之前的一个问题的建议仍然有效：

1. 设计（即：一个 design.css 文件或拆分为多个文件，如 fonts.css、typography.css 等...）网站而不定位任何内容。您可以从 HTML 5 重置开始，实现字体，设置背景，为链接着色，设置输入样式但不定位任何内容（即：如果您有页眉、导航、内容和页脚部分，请不要定位它们） .

2. 使用媒体查询（即：layout-240.css、layout-960.css）来定位您的视口并相应地定位每个内容。它们通常包含少于 100 行 CSS 并占用少于 3 KB 的磁盘空间，但这无关紧要。

Answer 3

首先使用流体网格。然后你可以使用媒体查询来做一些最后的调整。例如，如果有空间（横向模式），则将图像向右浮动。

这样您就可以支持几乎所有的设备，而不仅仅是大 2（尽管我相信黑莓比 Android 更大）。