CSS3响应式布局-我可以选择哪种方法？

Question

嗨，我正在做一个网站，这个网站有3个不同的样机台式机，平板电脑，智能手机。我可以使用respond.js来识别宽度。

但我的问题是，我如何将设计切换到合适的设备上。我可以使用查询选择器更改宽度和高度，但是如何更改页面的内容。

有什么好主意吗。在之前的版本中，我下载了所有的内容，并使用display:none来隐藏不需要的内容，我知道这是错误的。除了使用服务器端代码查找之外，哪种方法是最好的？

谢谢

Answer 1

为所有模型类型创建设计主题，并在标记中使用相同的css类。检查窗口大小客户端，并根据窗口端加载适当的主题。

Answer 2

我认为检测移动浏览器用户代理字符串(服务器端)并相应地显示内容是明智的。

如果您正在使用PHP进行构建，那么请查看此awesome脚本。

用法是这样的：

if($isMobile){
   header('Location: http://m.youdomain.com/' . urlencode($_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI']));
   exit();
}

也可以查看Switcher