javascript CSS，如果移动设备更改样式表
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26555621/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS, change stylesheet if mobile device
提问by soc86
I'am having trouble changing CSS file paths if the end user is accessing my site via a PC or mobile device, below is my CSS, I thought that it would redirect the user if using any handheld device:
如果最终用户通过 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" />
Please can someone let me know if this is the correct way or should I be using javascript to manipulate my file path>
请有人告诉我这是正确的方法还是我应该使用javascript来操作我的文件路径>
回答by Pogrindis
Dont make life too hard on yourself going that route of detecting a browser and device type..
不要让自己走上检测浏览器和设备类型的路线太难了..
Go with Media Queries..
使用媒体查询..
@media only screen and (max-device-width: 480px)
All devices are now all well known but regardless the resolution will determine the css style you offer the client..
现在所有设备都广为人知，但无论分辨率如何，都将决定您提供给客户端的 css 样式。
A Lot more can be found here : MediaQueries
在这里可以找到更多：MediaQueries
I would suggest MAYBE bootstrap3 framework // foundation etc there are a lot to choose from but these are the top two which come with built in definitions and a good framework to write css for each!
我建议 MAYBE bootstrap3 框架 // 基础等有很多可供选择，但这些是前两个，它们带有内置定义和一个很好的框架来为每个框架编写 css！
What you want to focus on is the grid system..
你要关注的是网格系统..
such as BootstrapThey work of a col-size-n grid of 12 colums, responsive.
例如Bootstrap他们使用 12 列的 col-size-n 网格，响应迅速。
A Lot more documentation can be found there and it opens a world of other questions!
可以在那里找到更多文档，它打开了一个其他问题的世界！
:)
:)
回答by Greg
Well, the proper way would be Media Queries.
好吧，正确的方法是Media Queries。
As mentioned by another individual on your question, if your truly trying to utilize Javascript:
正如另一个人在您的问题中提到的，如果您真的尝试使用 Javascript：
function Resize() {
width = window.innerWidth;
height = window.innerHeight;
if(width < 1200 && height < 600) {
// Modify particular Stylesheet elements.
}
}
Obviously you can do measurement / comparison:
显然您可以进行测量/比较：
- Browser Inner Width / Height
- User Agent
- 浏览器内部宽度/高度
- 用户代理
Those are two examples, but really Media Queries would be ideal and proper. Won't go into detail on those Media Queries, since someone went into more detail.
这是两个例子，但真正的媒体查询将是理想和适当的。不会详细介绍这些媒体查询，因为有人详细介绍过。
