JS vs Media Queries用于网站设计

Question

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

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

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

对我可能不连贯的漫无目的道歉但我想我的问题是实现网站移动版本的最佳方式是什么，其中差异可能不仅限于布局（例如，使用简单的媒体查询），但可能需要不同的元素在页面上？

Answer 1

媒体查询通常是您尝试实现的最佳解决方案。如果您开始为单独的设备创建单独的版本，那么您将尝试让所有内容保持最新状态让您自己真正头疼。拥有一组适合用户正在使用的设备的代码会更好。

看一下Twitter Bootstrap项目。它是一个现成的框架，可以帮助您整理响应式设计。

Answer 2

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

之类的内容

For Instance：

home.web.html，home.tablet.html，home.mobile.html

home.web.js，home.tablet.js，home.mobile.js（你也可以制作单个js文件）

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

* Js布局切换速度很慢。有复合设计模式如果你想使用*

Answer 3

您可以通过使用CSS媒体查询来实现，在媒体查询的帮助下，您可以为不同的布局维护css，并且可以隐藏不需要的移动内容。

Answer 4

是的，没错。您可以为桌面显示Normal UL LI Nav，并使用meida查询启用Mobile版本的Select下拉导航。