Media Queries

Developer
Sky
Size
2,045 Kb
Views
4,048
  1. Media Queries Previews
  2. Media Queries HTML Codes
  3. Media Queries CSS Codes
  4. Media Queries JS Codes

How do I make an media queries?

What is a media queries? How do you make a media queries? This script and codes were developed by Sky on 29 January 2023, Sunday.

Media Queries Previews
IQ Test

Media Queries - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Media Queries</title> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container"> <div class="row text-center width"> <div class="col d-sm-none">no min-width specified</div> <div class="col d-none d-sm-block d-md-none">min-width: 576px</div> <div class="col d-none d-md-block d-lg-none">min-width: 768px</div> <div class="col d-none d-lg-block d-xl-none">min-width: 992px</div> <div class="col d-none d-xl-block">min-width: 1200px</div> </div> <div class="row text-center"> <div class="col-12">&lt;-- Resize Your Browser --&gt;</div> </div> <div class="row text-center"> <div class="col-12" id="current-width"></div> </div>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Media Queries - Script Codes CSS Codes

html { height: 100vh;
}
body { background-color: red; color: white; -webkit-transition: all .3s linear; transition: all .3s linear;
}
@media (min-width: 576px) { body { color: #222; background-color: orange; }
}
@media (min-width: 768px) { body { background-color: yellow; }
}
@media (min-width: 992px) { body { color: white; background-color: blue; }
}
@media (min-width: 1200px) { body { background-color: green; }
}
.width { margin-top: 20vh; font-size: 24px; font-weight: bold;
}

Media Queries - Script Codes JS Codes

const updateWidth = () => document.getElementById('current-width').textContent = window.innerWidth + 'px';
window.onload = updateWidth;
window.onresize = updateWidth;
Media Queries - Script Codes
Media Queries - Script Codes
Home Page Home
Developer Sky
Username skycoder
Uploaded January 29, 2023
Rating 3
Size 2,045 Kb
Views 4,048
Do you need developer help for Media Queries?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Sky (skycoder) Script Codes
Name
Search box that submits when you hit Enter
Portfolio - Work In Progress
Random Quote Machine
Colors and Sounds
Show the Local Weather - and a local background image
Calculator
A Pen by Sky
Bootstrap 3 Grid Example
Feather Icons
FCC Leaderboard - vanilla JS
Create amazing sales emails with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!