Trevor Reid
Trevor Reid
Programming language:CSS
2021-05-10 00:54:00
0
Q:

css media

Joud salamah
Joud salamah
Code: CSS
2021-03-11 08:40:15 
/* BOOSTRAP MEDIA BREAKPOINTS */

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {  
  .selector {
  	background-color:#f00;
  }
}
 
/* Medium devices (tablets, 768px and up) The navbar toggle appears at this breakpoint */
@media (min-width: 768px) {  
}
 
/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) { 
}
 
/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {    
}
7
Jack M
Jack M
Code: CSS
2021-03-13 11:46:13 
CSS @media Rule

Example
Change the background color of the <body> element to "lightblue" when the browser window is 600px wide or less:

Syntax
@media only screen and (max-width: 600px) {
  body {
    background-color: lightblue;

    }
}
13
user52356
user52356
Code: CSS
2021-03-13 11:42:10 
@media only screen and (max-width: 600px) {
  body {
    background-color: lightblue;

    }
4
skew41
skew41
Code: CSS
2021-01-16 00:29:08 
<style>
  p {
    font-size: 20px;
  }

  /* Only change code below this line */
@media(max-height: 800px) {
p{font-size:10px
  }
 }
  /* Only change code above this line */
</style>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis tempus massa. Aenean erat nisl, gravida vel vestibulum cursus, interdum sit amet lectus. Sed sit amet quam nibh. Suspendisse quis tincidunt nulla. In hac habitasse platea dictumst. Ut sit amet pretium nisl. Vivamus vel mi sem. Aenean sit amet consectetur sem. Suspendisse pretium, purus et gravida consequat, nunc ligula ultricies diam, at aliquet velit libero a dui.</p>
-2
Alexander
Alexander
Code: CSS
2021-01-16 00:31:48 

<link rel="stylesheet" media="screen and (min-width: 
  900px)" href="widescreen.css">
<link rel="stylesheet" media="screen and (max-width: 
  600px)" href="smallscreen.css">
....
0

Tags

Related

New to Communities?

Join the community