[英]CSS, change stylesheet if mobile device
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操纵我的文件路径>
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编写CSS的良好框架中最重要的两个!
What you want to focus on is the grid system.. 您要关注的是网格系统。
such as Bootstrap They 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! 在此可以找到更多文档,这打开了许多其他问题!
:) :)
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: 显然,您可以进行测量/比较:
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.
由于有人进行了更详细的介绍,因此不会对这些媒体查询进行详细介绍。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.