CSS，如果移动设备更改样式表

Question

如果最终用户通过PC或移动设备访问我的网站，我很难更改CSS文件路径，以下是我的CSS，我认为如果使用任何手持设备，它将重定向用户：

<link rel="stylesheet" type="text/css" href="/css/style.css" />  
<link rel="stylesheet"      type="text/css"  href="/css/mobile.css"   media="handheld" />

请有人让我知道这是正确的方法还是我应该使用JavaScript操纵我的文件路径>

Answer 1

不要为检测浏览器和设备类型而费劲。

进行媒体查询。

@media only screen and (max-device-width: 480px) 

现在，所有设备都是众所周知的，但是无论分辨率如何，都将决定您为客户端提供的CSS样式。

可以在这里找到更多信息： MediaQueries

我建议MAYBE bootstrap3框架//基础等等，但是有很多可供选择，但是这是内置定义和为每个CSS编写CSS的良好框架中最重要的两个！

您要关注的是网格系统。

例如Bootstrap，它们以12列的col-size-n网格进行响应。

在此可以找到更多文档，这打开了许多其他问题！

:)

Answer 2

好吧，正确的方法是Media Queries 。

正如另一个人在您的问题上提到的那样，如果您真正尝试利用Javascript：

function Resize() {
     width = window.innerWidth;
     height = window.innerHeight;

     if(width < 1200 && height < 600) {
          // Modify particular Stylesheet elements.
     }
}

显然，您可以进行测量/比较：

• 浏览器内部宽度/高度
• 用户代理

这是两个示例，但实际上媒体查询将是理想且适当的。 由于有人进行了更详细的介绍，因此不会对这些媒体查询进行详细介绍。