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