CSS Media Queries

As-salamu Alaykum!

Bujrum, Willkommen, Welcome, Dobrodošli...

CSS Media Queries

Naziv Kategorije Tips and Guides
Naslov Teme CSS Media Queries
Pokretač Teme Boots
Početni datum
Odgovora 2
Pregleda 91
Reakcije 0
Zadnji Autor Boots

Boots

Wiki Editor
Urednik Foruma
Moderator
Regist
11-03-2024
Poruka
5,166
Reakcije
289
Bodovi
218
Let us look at some more examples of using media queries.

Media queries are a popular technique for delivering a tailored style sheet to different devices. To demonstrate a simple example, we can change the background color for different devices:

here is demo and code

CSS:
CSS:

/* Set the background color of body to tan */
body {
  background-color: tan;
}

/* On screens that are 992px or less, set the background color to blue */
@media screen and (max-width: 992px) {
  body {
    background-color: blue;
  }
}

/* On screens that are 600px or less, set the background color to olive */
@media screen and (max-width: 600px) {
  body {
    background-color: olive;
  }
}
 
CSS:
/* The navbar container */
.topnav {
  overflow: hidden;
  background-color: #333;
}

/* Navbar links */
.topnav a {
  float: left;
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* On screens that are 600px wide or less, make the menu links stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .topnav a {
    float: none;
    width: 100%;
  }
}
 
Umrah Banner
Screenshot
 

Prilozi

  • 75.1 KB Pregleda: 18

Brza Prijava

Morate biti član da biste učestvovali na forumu

Registracija

Kreirajte svoj nalog

Prijava

Prijavite se ovdje

Islamska Pitanja

Pročitajte Još

Developers used JavaScript and PHP to create several well-known websites, including Facebook (now also uses Hack, a PHP Dialect), Wikipedia, WordPress...
Odgovora
5
Pregleda
64
Using WordPress is one of the most popular ways to create a website. Whether you are a business looking to advertise, or a blogger looking to establish...
Odgovora
0
Pregleda
57
How to Increase WordPress Memory Limit? Here’s a scenario for you. You’re adding cool content and media to your website to make it more captivating and...
Odgovora
8
Pregleda
231
Best WordPress Countdown Timer – When working on WordPress websites, we have the opportunity to use many interesting and useful plugins, including...
Odgovora
1
Pregleda
120

Best Teme

Donate
Top Bottom