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

Question

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

如果我需要为智能手机设计移动网站的前端（Androids {3种不同尺寸}，iphone {2种不同尺寸}，以及其他非智能手机），我该如何处理？ （我的设计有效，所有这些设备都一样）

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

或

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

非常感谢你的想法...

Answer 1

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

通过这种方式，您可以支持几乎所有设备，而不仅仅是大型设备（尽管Blackberry比我认为的Android更大）。

Answer 2

@ YoniGeek;可能你必须使用fluid layout。

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

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

检查此网站的灵感http://mediaqueri.es/＆amp;在所有设备中看起来都一样。

Answer 3

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

在我最近的项目中，我接受了媒体查询。一旦我完成了基本设计，我花了不到一个小时的时间就可以处理从240像素到960像素宽的不同分辨率。所以更多的开发工作......它不是。

关于您之前提出的一个问题的previous建议仍然存在：

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

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