【发布时间】：2014-01-22 10:24:36
【问题描述】：
我正在构建一个在桌面上看起来很棒的网站，但是当我在移动设备上查看它时，它并没有真正起作用。我想知道如何设置一个在设备上查看时自动加载移动网站的方法/系统。有没有办法做到这一点？我对构建 2 个不同的站点没有任何问题，但我希望它是自动的。
如果你看一下你就会明白我的意思 - redchevron.co.uk
谢谢
【问题讨论】：
标签： html css responsive-design
【发布时间】：2014-01-22 10:24:36
【问题描述】：
作为一般规则，如果可以避免，您不应该建立两个单独的网站。一般的最佳实践是使用响应式设计技术来构建一个可以自动调整其外观和行为以适应不同设备的网站。
要根据设备自动调整网站的布局和样式，请使用 CSS 媒体查询。这是一个大课题 - 所以这里有一些地方可以开始你的研究：
- Beginners guide to responsive web design
- Media queries for standard devices
- Mobile first responsive design
简而言之 - 媒体查询允许浏览器使用样式（并忽略其他样式），具体取决于显示站点的设备的属性。对于移动设备，最常见的技术是为小于 x 像素宽的屏幕设置媒体查询，并在其中包含您的移动设备样式。
要针对不同设备调整行为，您可以使用 javascript 检测用户设备的各种属性（例如是否为触摸设备），并进行调整以适应。不过值得注意的是，您的网站功能应该在没有 javascript 的情况下运行 - 创建一个可靠的纯 HTML 网站作为您进行任何其他工作的基础非常重要。
【讨论】：
-
所以它的概念类似于if语句？所以说像 - 如果设备宽度小于 480 像素，显示 X？
-
没错。你如何组织你的样式表起着重要的作用。我通常有一组通用样式，然后是一组桌面、平板电脑和手机样式，每个样式都包含在一个媒体查询中。