在我开始开发网站之前,这篇文章不是关于代码语法,而是关于工作策略。
如果我需要为智能手机(Android { 3 个不同尺寸}、iphone {2 个不同尺寸} 和其他非智能手机)设计移动网站的前端,我应该如何进行?(我的设计必须对所有这些设备都有效并且相同)
1-我是否应该按照关于灵活图像和流体网格(灵活 DIV:s)的想法来设计我的作品。
或者
2-为每个目标模型设置不同的媒体查询大小?(这个解决方案可能会创造更多的开发工作,不是吗?)
非常感谢你的想法...
在我开始开发网站之前,这篇文章不是关于代码语法,而是关于工作策略。
如果我需要为智能手机(Android { 3 个不同尺寸}、iphone {2 个不同尺寸} 和其他非智能手机)设计移动网站的前端,我应该如何进行?(我的设计必须对所有这些设备都有效并且相同)
1-我是否应该按照关于灵活图像和流体网格(灵活 DIV:s)的想法来设计我的作品。
或者
2-为每个目标模型设置不同的媒体查询大小?(这个解决方案可能会创造更多的开发工作,不是吗?)
非常感谢你的想法...
@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/并在所有设备中看起来都相同。
这真的是一个偏好问题。您可以使用流畅的设计、媒体查询(使用 css 转换)或所有技术的组合。
在我最近的项目中,我使用了媒体查询。完成基本设计后,我用了不到一个小时的时间让它在从 240 像素到 960 像素宽的不同分辨率下工作。所以更多的开发工作......它不是。
我之前对您之前的一个问题的建议仍然有效:
设计(即:一个 design.css 文件或拆分为多个文件,如 fonts.css、typography.css 等...)网站而不定位任何内容。您可以从 HTML 5 重置开始,实现字体,设置背景,为链接着色,设置输入样式但不定位任何内容(即:如果您有页眉、导航、内容和页脚部分,请不要定位它们) .
使用媒体查询(即:layout-240.css、layout-960.css)来定位您的视口并相应地定位每个内容。它们通常包含少于 100 行 CSS 并占用少于 3 KB 的磁盘空间,但这无关紧要。
首先使用流体网格。然后你可以使用媒体查询来做一些最后的调整。例如,如果有空间(横向模式),则将图像向右浮动。
这样您就可以支持几乎所有的设备,而不仅仅是大 2(尽管我相信黑莓比 Android 更大)。