Programming language:CSS

@media css

Code: CSS

2021-08-21 06:20:54

@media only screen and (max-width: 1200px){
    /*Tablets [601px -> 1200px]*/
}
@media only screen and (max-width: 600px){
	/*Big smartphones [426px -> 600px]*/
}
@media only screen and (max-width: 425px){
	/*Small smartphones [325px -> 425px]*/
}

zyurnaidi

Code: CSS

2021-03-16 16:32:54

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

aris

Code: CSS

2021-09-12 12:53:43


  /* 
  Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) 
  {...} 

/* Small devices (portrait tablets and large phones, 600px and up) 
  */
@media only screen and (min-width: 600px) {...} 

/* Medium devices (landscape tablets, 768px and up) */

  @media only screen and (min-width: 768px) {...} 

/* Large devices (laptops/desktops, 992px and up) 
  */

  @media only screen and (min-width: 992px) {...} 

/* Extra large devices (large 
  laptops and desktops, 
  1200px and up) */
@media only screen and (min-width: 1200px) {...}

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) {    
}

Tavian Barnes

Code: CSS

2021-03-13 11:45:23

@media (max-width: 989px) and (min-width: 768px) {}

Rufaisa Ismula

Code: CSS

2021-02-16 19:47:24

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

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;

    }
}

user52356

Code: CSS

2021-03-13 11:42:10

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

    }

user87037

Code: CSS

2021-03-11 08:39:20

/* Sur les écrans, quand la largeur de la fenêtre fait au maximum 1280px */
@media screen and (max-width: 1280px)

/* Sur tous types d'écran, quand la largeur de la fenêtre est comprise entre 1024px et 1280px */
@media all and (min-width: 1024px) and (max-width: 1280px)

/* Sur les téléviseurs */
@media tv

/* Sur tous types d'écrans orientés verticalement */
@media all and (orientation: portrait)

nagendar maurya

Code: CSS

2021-03-13 11:46:36

<style type="text/css">
    /* default styles here for older browsers. 
       I tend to go for a 600px - 960px width max but using percentages
    */
    @media only screen and (min-width: 960px) {
        /* styles for browsers larger than 960px; */
    }
    @media only screen and (min-width: 1440px) {
        /* styles for browsers larger than 1440px; */
    }
    @media only screen and (min-width: 2000px) {
        /* for sumo sized (mac) screens */
    }
    @media only screen and (max-device-width: 480px) {
       /* styles for mobile browsers smaller than 480px; (iPhone) */
    }
    @media only screen and (device-width: 768px) {
       /* default iPad screens */
    }
    /* different techniques for iPad screening */
    @media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
      /* For portrait layouts only */
    }

    @media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
      /* For landscape layouts only */
    }
</style>

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

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">
....

New to Communities?

Join the community

@media css

Tags

Related

New to Communities?