All geek questions in one place

Changing css file according to resolution using javascript

I found it on a website, but for me this does not work. The problem is that css does not change or changes very quickly, all I see is a black flash and a blank page (http://gino.net16.net/inde.php, this can be clearly seen with firefox). Since I don't have javascript, so I don't know what happened.

Main file

<html>
<head>
      <title>my title</title>
<SCRIPT LANGUAGE="JavaScript">


<!-- Begin
function redirectCSS() {

if ((screen.width == 640) && (screen.height == 480))
      {document.write("<link href='style.css' rel='stylesheet' type='text/css'>")}

else if ((screen.width == 800) && (screen.height == 600))
      {document.write("<link href='style.css' rel='stylesheet' type='text/css'>")}

else if ((screen.width == 1024) && (screen.height == 768))
      { document.write("<link href='style.css' rel='stylesheet' type='text/css'>")}

else
      {document.write("<link href='style.css' rel='stylesheet' type='text/css'>")}
}
// End -->
</script>      

</head>
<body onLoad="redirectCSS()">

<h1>Use the appropriate stylesheet to display this content</h1>

</body>
</div>
</html>

CSS style file

@charset "utf-8";
/* CSS Document */

body {
    background-color: #2a2725;
    font-family: Arial, Helvetica, sans-serif;
    text-shadow: 0px 0px 1px #2a2725;
    color: #fff;
}
/* }}} END TableSorter */
+3
source share
4 answers

Try using CSS Media Queries , they do exactly what you want :)

+3
source

. document.write onload . , JavaScript .

<script type="text/javascript">
if ((screen.width == 640) && (screen.height == 480))
      {document.write("<link href='style.css' rel='stylesheet' type='text/css'>")}

else if ((screen.width == 800) && (screen.height == 600))
      {document.write("<link href='style.css' rel='stylesheet' type='text/css'>")}

else if ((screen.width == 1024) && (screen.height == 768))
      { document.write("<link href='style.css' rel='stylesheet' type='text/css'>")}

else
      {document.write("<link href='style.css' rel='stylesheet' type='text/css'>")}
}
</script>

:

1) "" JavaScript , JavaScript.

2) language="JavaScript" . type="text/javascript".

3) "" JavaScript

4) , ( ). .

5) : JavaScript . IE, CSS3 Media Queries. . : Fluid CSS

+1

You can NEVER execute document.write after the page loads. You need to call the inline function like this (and this helps if you have other css files)

<html>
<head>
      <title>my title</title>
<SCRIPT LANGUAGE="JavaScript">


<!-- Begin
function redirectCSS() {

if ((screen.width == 640) && (screen.height == 480))
      {document.write("<link href='small.css' rel='stylesheet' type='text/css'>")}

else if ((screen.width == 800) && (screen.height == 600))
      {document.write("<link href='medium.css' rel='stylesheet' type='text/css'>")}

else if ((screen.width == 1024) && (screen.height == 768))
      { document.write("<link href='large.css' rel='stylesheet' type='text/css'>")}

else
      {document.write("<link href='style.css' rel='stylesheet' type='text/css'>")}
}
redirectCSS()
// End -->
</script>      

</head>
<body >

<h1>Use the appropriate stylesheet to display this content</h1>

</body>
</div>
</html>

I personally would do this if I had to do this:

<html>
<head>
      <title>my title</title>
<link href='style.css' rel='stylesheet' type='text/css' />
<script type="text/javascript"><!-- Begin
var css = "";
if (screen.width < 800) css='small.css';
else if (screen.width < 1024)  css='medium.css';
else css='large.css';
document.write("<link href='"+css+"' rel='stylesheet' type='text/css' />");
// End -->
</script>      

</head>
<body >

<h1>Use the appropriate stylesheet to display this content</h1>

</body>
</div>
</html>
0
source

Not sure if it works well, in some cases you will always have a problem with your layouts. Standard declaration for css:

link rel="stylesheet" type="text/css" href="css/style.css"

link rel="stylesheet" media="screen and (max-width: 700px)" href="css/narrow.css"

link rel="stylesheet" media="screen and (min-width: 701px) and (max-width: 900px)"
        href="css/medium.css"

link rel="stylesheet" media="screen and (min-width: 901px)" href="css/wide.css"

The browser will change the view even if you resize it.

0
source

Source: https://habr.com/ru/post/1788724/

More articles:


All Articles