媒体查询VS.流体网格适用于不同的移动格式 [英] media-queries VS. fluid grids FOR different mobile-formats
问题描述
这篇文章不是关于代码语法，而是关于工作策略，在我开始开发网站之前。
This post is not about code-syntax but about work-strategy, before I start developing the site.
如果我需要为智能手机设计移动网站的前端（Android {3种不同尺寸}，iphones {2种尺寸}和其他非智能手机手机），我该如何进行？ （我的设计适用于所有这些设备）
If I need to design the front-end of a mobile-site for smart-phones (Androids { 3 different sizes}, iphones {2 differents sizes}, and other non - smartphones phones) how shall I proceed? (MY DESIGN HAS TO WORK AND BE THE SAME FOR ALL THESE DEVICES)
1-我应根据有关灵活图片的想法设计我的作品和流体网格（灵活的DIV：s）。
1- shall I design my work following the idea about flexible images and fluid grids (flexible DIV:s).
或
2-设置不同的媒体查询每个目标模型？
2- set different media queries-sizes for every target model? (this solution might create more development-work isn't it?)
非常感谢yr的想法...
Thanks very much for yr thoughts...
推荐答案
这是一个偏好的问题。您可以使用流体设计，媒体查询（使用CSS转换）或所有技术的组合。
It's a matter of preference really. You can use a fluid design, media queries (with css transitions) or a combination of all techniques.
在我最近的项目中，我去了媒体查询。一旦我做了基本的设计，它花了我不到一个小时，使其工作在不同的分辨率从240像素到960像素宽。所以更多的开发工作...不是。
On my most recent project, I went with media queries. Once I had the basic design done it took me less than an hour to have it working on varying resolutions from 240 pixels to 960 pixels wide. So more development work... it was not.
-
设计（即：一个design.css文件或分割成多个文件，如fonts.css，typography.css等） 。你可以从HTML 5重置开始，实现字体，设置背景，颜色链接，设置输入样式，但不要放置任何位置（例如：如果你有标题，导航，内容和页脚部分，
Design (ie: one design.css file or split up into multiple files such as fonts.css, typography.css, etc...) the site without positioning anything. You cam start with a HTML 5 reset, implement font faces, set the backgrounds, color the links, style the inputs but do not position anything (ie: if you have header, nav, content and footer sections, don't position them).
使用媒体查询（即：layout-240.css，layout-960.css）定位您的视口，它们通常包含少于100行的CSS，占用少于3 KB的磁盘空间，但这是不相关的。
Use media queries (ie: layout-240.css, layout-960.css) to target your viewports and position each everything accordingly. They will generally contain less than 100 lines of CSS and take up less than 3 KB of diskspace but that's irrelevant.
这篇关于媒体查询VS.流体网格适用于不同的移动格式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
