我正在制作一个新网站。它将是博客风格，但从头开始制作，而不是使用现有的模板或软件(如WordPress(，主要是为了实验。
我的问题是，我应该怎么做才能使网站针对移动设备进行优化？我想用一种适合较小屏幕的样式来优化它，但不创建单独的页面并根据用户正在查看的设备重定向。基本上，我想创建一个页面的内容，两个样式表，以及根据用户正在查看的设备类型应用适当的样式表的可靠方法。
最好的方法是什么？
您是否正在寻找一种检测浏览器并应用正确 CSS 的方法？ 如果仅此而已，请尝试使用 CSS 媒体类型。 您可以将其中一个样式表设置为 screen，将另一个设置为handheld：
<LINK REL="stylesheet" TYPE="text/css" MEDIA="screen" HREF="desktop.css">
<LINK REL="stylesheet" TYPE="text/css" MEDIA="handheld" HREF="mobile.css">
这让设备/浏览器决定它想要使用哪种类型，而不是试图根据来自服务器的某种浏览器检测强制用户进入某种样式。
这种方法的另一个好处是，如果您使用 CSS 定义大量图像资源(而不是img标记(。 handheld样式表可以使用较少的资源，因此移动浏览器甚至不知道或关心它们。
为这两种变体创建单独的样式表是一个好主意，但正如您所说"针对移动设备进行了优化"，仅仅拥有自定义的 CSS 是不够的。还有其他因素使网站移动友好，例如网站加载速度，内容，移动设备上的用户体验等。
要更深入地了解此主题，您可以借助这篇关于移动优化的文章。