Menu
Community /Pin to ProfileBookmark
@cootheadJun 26.2021 — #Hi there sibert,
there is no need to use [i]JavaScript[/i] when [i]CSS[/i] will easily do the job. ;)
[i]coothead[/i]
Get initial window with
This script changes the color when resizing.
But this script is not fired on load. Just when resized.
How can I do both initial width and when resizing?
Sign in
to post a comment2 Comments(s) ↴
0
@cootheadJun 26.2021 — #Hi there sibert,there is no need to use [i]JavaScript[/i] when [i]CSS[/i] will easily do the job. ;)
<i>
</i><!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<title>CSS background colours</title>
<!--
The internal CSS should be transferred to an external file
<link rel="stylesheet" href="screen.css" media="screen">
-->
<style media="screen">
body {
background-color: #ffc0cb;
font: normal 1em / 1.5em sans-serif;
transition: background-color 1s ease-in-out; <br/>
}
@media (max-width: 75em) {
body{
background-color: #7fffd4;
transition: background-color 1s ease-in-out;
}
}
@media (max-width: 64em) {
body{
background-color: #0f0;
transition: background-color 1s ease-in-out;
}
}
@media (max-width: 50em) {
body{
background-color: #00f;
transition: background-color 1s ease-in-out;
}
}
@media (max-width: 40em) {
body{
background-color: #0ff;
transition: background-color 1s ease-in-out;
}
}
@media (max-width: 25em) {
body{
background-color: #f0f;
transition: background-color 1s ease-in-out;
}
}
@media (max-width: 20em) {
body{
background-color: #ff0;
transition: background-color 1s ease-in-out;
}
}
</style>
</head>
<body>
</body>
</html>
[i]coothead[/i]