根据屏幕分辨率通过javascript加载CSS
[英]load css via javascript according to screen resolution
问题描述
Statement: Making my website Responsive. 
声明：使我的网站具有响应能力。
What I have done so far: I've tried using @media queries, making external css pages according to resolution. 到目前为止，我已经完成的工作：我尝试使用@media查询，根据分辨率制作外部CSS页面。
Problem: I made 5 style sheets; 问题：我做了5个样式表； 1024.css, 1280.css, 1366.css, 1440.css, 1920.css . 1024.css，1280.css，1366.css，1440.css，1920.css。 All seem to work fine except the 1024.css! 除了1024.css以外，其他所有东西似乎都正常工作！ When I load the website in 1024 resolution it automatically turns to mobile-type site. 当我以1024分辨率加载网站时，它会自动变为移动类型的网站。 The nav turns into a button, all the elements get dislocated. 导航变成按钮，所有元素都错位。
What I'm looking for?: I want to load the css style sheets thru javascript. 我在寻找什么？：我想通过JavaScript加载CSS样式表。 For eg; 例如 I want to be able to load 1280.css when the screen's resolution is 1024px . 我希望能够在屏幕分辨率为1024px时加载1280.css。
I'm a beginner at js. 我是js的初学者。 So I can't make advanced functions. 所以我不能做高级功能。
But so far I've prepared this algorithm: 但是到目前为止，我已经准备了以下算法：
If (max-width = 1024px){replace style.css with 1280.css}
If (max-width = 1366px){replace style.css with 1366.css}
If (max-width = 1440px){replace style.css with 1440.css}
If (max-width = 1920px){replace style.css with 1920.css}
Else if (max-width = 1280px){replace style.css with 1280.css}
PS:I've Searched Google and Stackoverflow and found nothing. PS：我已经搜索过Google和Stackoverflow，却一无所获。
UPDATE: I tried what you said Abhishek Pandey but here is the result . 更新：我尝试了您说的Abhishek Pandey的问题，但这是结果。 you can check it on http://shalepizza.tk/ Im currently working on the index page. 您可以在http://shalepizza.tk/上查看它。
To check the appropriate resolution, when the page is loaded, press F12 and Ctrl+Shift+M 要检查适当的分辨率，请在加载页面时按F12键，然后按Ctrl + Shift + M
I link my CSS like this : <link href="/static/1024.css" rel="stylesheet" type="text/css" /> 我这样链接我的CSS： <link href="/static/1024.css" rel="stylesheet" type="text/css" />
3 个解决方案
解决方案1
4 2016-09-05 10:38:44
You can use html instead of js 您可以使用html而不是js
<link href="/static/1024.css" media="screen and (max-width:1024px)" rel="stylesheet" type="text/css" />
<link href="/static/1366.css" media="screen and (max-width:1366px)" rel="stylesheet" type="text/css" />
or best option is to use @media queries in css file 或最好的选择是在CSS文件中使用@media查询
/* min size style*/
@media screen and (max-width:320px) {
/* put your css style in there */
}
/* middle size style */
@media screen and (min-width:321px) {
/* put your css style in there */
}
/* large size style */
@media screen and (min-width:800px) {
/* put your css style in there */
}
解决方案2
0 2016-09-05 11:08:57
May I ask you why you want to use Javascript for that? 请问您为什么要使用Javascript？ HTML Has something called Media Queries (Rule: @media ), and with that you can specify which CSS it needs to run by a specific size. HTML具有称为Media Queries （规则： @media ）的内容，您可以使用它指定以特定大小运行它所需的CSS。
A Media query starts with @media . 媒体查询以@media开头。 To tell the code that's about the Screen Port, use screen . 要告诉您有关Screen Port的代码，请使用screen 。 Finish off with and (min-width:1024px){ and enter your CSS there. 用and (min-width:1024px){然后在此处输入CSS。
For Example. 例如。 This is your style.css ; 这是你的style.css ;
@media screen and (min-width:1024px){
background-color:#0f0f1f;
}
@media screen and (min-width:2411px){
background-color:000000;
}
Don't include other css files like this. 不要包括其他这样的CSS文件。 When you want to do that, you can give the Media attribute in your CSS include. 当您想要这样做时，可以在CSS include中提供Media属性。
media="screen and (min-width:1024px)"
解决方案3
0 2016-09-05 11:39:02
<body onresize="myFunction()">
function myFunction() {
var width = window.outerWidth;
if (width < 960){
$('link[href="style1.css"]').attr('href','style2.css');
}else{
$('link[href="style2.css"]').attr('href','style1.css');
}
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.