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来操作我的文件路径，请有人告诉我＆gt;

Answer 1

不要让自己太过努力去探索浏览器和设备类型......

使用媒体查询..

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

所有设备现在都是众所周知的，但无论分辨率如何，都将决定您为客户提供的css风格..

可在此处找到更多内容：MediaQueries

我建议MAYBE bootstrap3框架//基础等有很多可供选择，但这些是前两个内置定义和一个很好的框架来为每个写css！

您想要关注的是网格系统..

例如Bootstrap他们使用12个colums的col-size-n网格，响应。

在那里可以找到更多的文档，它打开了一个其他问题的世界！

:)

Answer 2

嗯，正确的方法是媒体查询。

正如另一个人提到的那样，如果您真正尝试使用Javascript：

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

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

显然你可以做测量/比较：

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

这是两个例子，但实际上媒体查询是理想和恰当的。由于有人详细介绍了这些媒体查询，因此不会详细介绍。

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

2 个答案: