Last modified on January 11th, 2016 at 5:21 PM

5:21 PM Last modified at 5:21 PM on January 11, 2016

 Author: Admin Profile admin


💬Media Queries (TASK clipboard dump)

Last updated on January 11th, 2016 at 05:21 pm



Media Query Structure Example (in CSS)

/** Minimum width of 1115 pixels. => */

@media screen and (min-width: 1115px) {

.site {

margin: 0 auto;

min-width: 1115px;

max-width: 2960px;

/** max-width: 68.571428571rem;*/

overflow: auto;/* <=hidden; */


.site {

width: 42.34rem;             


.site-content {

float: left;

/** width: 97.104166667%;*/


#main {

float: left;

max-width: 265.104166667%;    


.site-content {

width: 34.571428571rem!important;



What I’ve found recommended on how to Link a media query inside an external stylesheet written in CSS

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

Max Width

The following CSS will apply if the viewing area is smaller than 600px.

/** Maximum width of 600 pixels. */
@media screen and (max-width: 600px) {
.class {
background: #ccc;

Min Width

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

/** Minimum width of 900 pixels. */
@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.

/** Minimum width of 600 pixels and maximum width of 900 pixels. */
@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;

Media Query For iPhone 4

The following stylesheet is specifically for iPhone 4 (credits: Thomas Maier). This looks like something I would put into the <head> section of the current document.

<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). Again, something to set aside into the <head> tag.

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

What about Internet Explorer? Media Queries for Internet Explorer

Unfortunately, media query is not supported in Internet Explorer 8 or older (As I’ve read). Thru reading articles I’ve seen stated You can use Javascript to hack around. Below are some solutions offered from my perusings:


(Visited 81 times, 1 visits today)

One Reply to “Media Queries (TASK clipboard dump)”

Leave a Reply

Your email address will not be published. Required fields are marked *

Loading Facebook Comments ...
Loading Disqus Comments ...