2

我开始为多种设备设计网站:台式机/笔记本电脑、平板电脑(例如 iPad、Galaxy Tab 和移动设备(例如 iPhone)。

我目前有一些页面有一些 javascript 可以重定向到完全不同的子域。例如,如果用户www.example.com在 iPhone 上访问,他们将被重定向到m.example.com或者t.example.com如果他们在平板电脑上。显然,这需要您创建可能具有相似内容的不同页面,而媒体查询将允许您根据屏幕大小稍微不同地布置内容。

所以在我看来,媒体查询将是处理不同屏幕分辨率的首选。不过,这给我留下了一些问题。例如,您在桌面网站上有一个导航栏,select在移动网站上可以更好地使用类似的导航栏。实现这一点的最佳方法是什么?

为我可能语无伦次的漫无边际道歉,但我想我的问题是实现移动版网站的最佳方式是什么,其中差异可能不仅限于布局(例如,简单的媒体查询),而且可能需要页面上的不同元素?

4

4 回答 4

1

媒体查询通常是您想要实现的最佳解决方案。如果你开始为不同的设备创建不同的版本,你会让自己非常头疼,试图让所有东西都保持最新。最好有一组代码来适应用户正在使用的设备。

看看 Twitter Bootstrap 项目。这是一个现成的框架,可以帮助您整合响应式设计。

于 2012-11-09T10:40:34.090 回答
0

您可以创建一个视图、一个 js 和一个 css 并在单个文件中处理所有内容,或者为了获得更好的性能,我建议使用 MVC 模式,您需要检测用户代理,然后在此基础上加载相应的视图 + css + js。加载这个页面+代理+扩展之类的东西

例如:

home.web.html、home.tablet.html、home.mobile.html

home.web.js、home.tablet.js、home.mobile.js(也可以制作单个js文件)

您可以放置​​一个通过媒体查询处理布局的 css

* Js 布局切换非常慢。有复合设计模式如果你喜欢使用 *

于 2012-11-06T10:12:43.050 回答
0

您可以通过使用 CSS 媒体查询来实现,借助媒体查询,您可以为不同的布局维护 css,您可以隐藏移动不需要的东西。

于 2012-11-06T12:00:39.477 回答
0

对,就是这样。您可以为桌面显示 Normal UL LI Nav,并使用 meida 查询为移动版本启用选择下拉导航。

于 2012-11-06T13:09:04.027 回答