HTML

html content help to improve the coding

Tuesday, 21 October 2014

Media Queries for Standard Devices 

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen 
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
/* Styles */
}

/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen 
and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}
 
 
The following CSS will apply if the viewing area is smaller than 600px. 
 
 
@media screen and (max-width: 600px) {
  .class {
    background: #ccc;
  }
} 
 
If you want to link to a separate stylesheet, put the following line of code in between the <head> tag.
 
<link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css" /> 





Min Width

The following CSS will apply if the viewing area is greater than 900px.




@media screen and (min-width: 900px) {
  .class {
    background: #666;
  }
}



Multiple Media Queries

You can  combine multiple media queries. The following code will apply if the viewing area is between 600px and 900px.




@media screen and (min-width: 600px) and (max-width: 900px) {
  .class {
    background: #333;
  }
}



Device Width

The following code will apply if the max-device-width is 480px (eg. 
iPhone display). Note: max-device-width means the actual resolution of 
the device and max-width means the viewing area resolution.



@media screen and (max-device-width: 480px) {
  .class {
    background: #000;
  }
}



For iPhone 4

The following stylesheet is specifically for iPhone 4 (credits: Thomas Maier).



<link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)" type="text/css" href="iphone4.css" />



For iPad

You can also use media query to detect orientation (portrait or landscapse)  on the iPad (credits: Cloud Four).



<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css"> 
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.c


 



Media Queries for Internet Explorer

Unfortunately, media query is not supported in Internet Explorer 8 or
 older. You can use Javascript to hack around. Below are some solutions:





Sample Sites

You need to view the following sites with a browser that supports 
media queries such as Firefox, Chrome, and Safari. Go to each site and 
see how the layout responds base on the size of your browser winow.




    

  • Large size: 3 columns sidebar
    • 

  • Smaller: 2 columns sidebar (the middle column drops to the left column)
    • 

  • Even smaller: 1 column sidebar (the right column shift up below the logo)
    • 

  • Smallest: no sidebar (logo & right column shift up and the other sidebar columns move below)
    • 



 




 












Posted by



at







































No comments:















Post a Comment
























        

      









Subscribe to:
Post Comments (Atom)