CSS3 Tutorial: Common Media queries fragments of the responsive framework

Article Introduction: breakpoints in responsive rely on CSS3 media queries to decide. Media ipads from media queries and Ipones and queries, which have been CSS3 media queries templates, created CSS3 using the EM unit, have been introduced in this regard.

Responsive Design is more and more popular in modern web design, but the students do not understand its real design concept, often regard responsive as an adaptive layout. Of course, a lot of students are also trying to write responsive case, but how to take its breakpoint left and right entangled, how to set a few breakpoints? And where do we start?

Breakpoints in responsive rely on CSS3 media queries to decide. Media ipads from Media Queries and Ipones and Queries , which have been CSS3 media Queries templates , created CSS3 using the EM unit , have been introduced in this regard. Today, a number of common media queries clips have been sorted out based on some responsive frameworks for your reference:

CSS3 Media Queries fragment

This is divided into three main categories: The mobile end, the PC side, and some common response framework media queries fragments.

Mobile End Media Queries fragment

IPhone5

@media screen and (DEVICE-ASPECT-RATIO:40/71) {} or: @media screen and (device-width:320px) and (device-height:568px) a nd (-webkit-device-pixel-ratio:2) {}	 

IPhone 5 in Portrait & Landscape

@media only screens and (min-device-width:320px) and (max-device-width:568px) {//CSS Style}	 

IPhone 5 in landscape

@media only screens and (min-device-width:320px) and (max-device-width:568px) and (Orientation:landscape) {//CSS sty Le}	 

IPhone 5 in Portrait

@media only screens and (min-device-width:320px) and (max-device-width:568px) and (orientation:portrait) {//CSS Styl E	 

IPone4

@media only screens and (-webkit-min-device-pixel-ratio:1.5), only screen and (min-device-pixel-ratio:1.5) {}	 

IPhone 3G

@media screen and (device-width:320px) and (device-height:480px) and (-webkit-device-pixel-ratio:1) {}	 

Iphone

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

Blackberry Torch

@media screen and (max-device-width:480px) {}	 

Samsung S3

@media only screen and (-webkit-device-pixel-ratio:2) {}	 

Google Nexus 7

@media screen and (device-width:600px) and (device-height:905px) and (-webkit-min-device-pixel-ratio:1.331) and (-webki t-max-device-pixel-ratio:1.332) {}	 

Samsung Galaxy S3

@media only screen and (-webkit-device-pixel-ratio:2) {}	 

Samsung Galaxy S2

@media screen and (device-width:320px) and (device-height:533px) and (-webkit-device-pixel-ratio:1.5) {}	 

Galaxy Tab 10.1

/*landscape*/@media (max-device-width:1280px) and (Orientation:landscape) {}  /*portrait*/@media ( max-device-width:800px) and (orientation:portrait) {}	 

IPad in Portrait & Landscape

@media only screens and (min-device-width:768px) and (max-device-width:1024px) {//CSS Styles}	 

IPad in Landscape

@media only screens and (min-device-width:768px) and (max-device-width:1024px) and (Orientation:landscape) {//CSS St Yles}	 

IPad in Portrait

@media only screens and (min-device-width:768px) and (max-device-width:1024px) and (orientation:portrait) {//CSS sty Les}	 

Retina IPad in Portrait & Landscape

@media only screens and (min-device-width:768px) and (max-device-width:1024px) and (-webkit-min-device-pixel-ratio:2) { CSS Styles}	 

Retina IPad in Landscape

@media only screens and (min-device-width:768px) and (max-device-width:1024px) and (Orientation:landscape) and (-WEBK It-min-device-pixel-ratio:2) {//CSS Styles}	 

Retina IPad in Portrait

@media only screens and (min-device-width:768px) and (max-device-width:1024px) and (orientation:portrait) and (-webki T-min-device-pixel-ratio:2) {//CSS Styles}	 

IPad Mini in Portrait & Landscape

@media only screens and (min-device-width:768px) and (max-device-width:1024px) and (-webkit-min-device-pixel-ratio:1) { CSS Style}	 

IPad Mini in Landscape

@media only screens and (min-device-width:768px) and (max-device-width:1024px) and (Orientation:landscape) and (-WEBK IT-MIN-DEVICE-PIXEL-RATIO:1) {//CSS Style}	 

IPad Mini in Portrait

@media only screens and (min-device-width:768px) and (max-device-width:1024px) and (orientation:portrait) and (-webki T-MIN-DEVICE-PIXEL-RATIO:1) {//CSS Style}	 

Desktop side

320px

@media screen and (max-width:320px) {}	 

640px

@media screen and (max-width:640px) {}	 

800px

@media screen and (max-width:800px) {}	 

1024px

@media screen and (max-width:1024px) {}	 

1028px

@media screen and (max-width:1028px) {}	 

In addition to the common media queries fragment above, the following Web site also provides a few other clips:

Frame Media Queries Fragment

Boilerplate

/*url:http://html5boilerplate.com/*//* Smartphones (Portrait and Landscape)-----------/*/@media only screens and (min-w idth:320px) and (max-width:480px) {/* Styles/}/* Smartphones (Landscape)-----------/* * @media only screens and (m IN-WIDTH:321PX) {/* Styles/}/* Smartphones (Portrait)-----------/* * * @media only screens and (max-width:320px) {/  * Styles */}/* IPads (Portrait and Landscape)-----------/* * @media only screens and (min-width:768px) and (max-width: 1024PX) {/* Styles/}/* IPads (Landscape)-----------/*/@media only screens and (min-width:768px) and (max-width: 1024PX) and (Orientation:landscape) {/* Styles/}/* IPads (Portrait)-----------/* * @media only screens and (Min-widt h:768px) and (max-width:1024px) and (orientation:portrait) {/* Styles/}/* Desktops and laptops-----------* * Media only screen and (min-width:1224px) {/* Styles/}/* Large screens-----------/* * @media only screens and (Min-wi DTH:1824PX) {/* StyleS/*//* IPhone 4-----------/@media only screen and (-webkit-min-device-pixel-ratio:1.5), Min-devi	  ce-pixel-ratio:1.5) {/* Styles * *}

Bootstrap's Media Queries

/*url:http://twitter.github.com/bootstrap*/	 /* Large Desktop */@media (min-width:1200px) {...}   /* Portrait tablet to Landscape and desktop */@media (min-width:768px) and (max-width:979px) {...}   /* Landscape Phone to portrait tablet */@media (MAX-WIDTH:767PX) {...}   /* Landscape phones and Down */@media (max-width:480px) {...}	 

Foundation's Media Queries

/*url:http://foundation.zurb.com/*//	 * We Use this media query to the Add styles to all device that supports media queries * * @media only screen {}/  * Used to alter styles for screens at least 768px wide. This is where the grid changes. */@media only screen and (min-width:768px) {}/  * Used to alter styles for screens at least 1280px wide. */@media on Ly screen and (min-width:1280px) {}/  * Used to alter styles for screens at least 1440px wide. */@media only screen a nd (min-width:1440px) {}/  * Apply styles to screens in landscape orientation */@media only screens and (orientation: Landscape) {}  /* Apply styles to screens in portrait orientation */@media only screen and (orientation:portrait) {}	 

Skeleton's Media Queries

/*url:http://www.getskeleton.com*/	 /* Smaller than standard 960 (devices and browsers) */@media only screens and (max- WIDTH:959PX) {}  //* Tablet portrait size to standard 960 (devices and browsers)/@media only screens and (min-width: 768px) and (max-width:959px) {}/  * All Mobile sizes (Devices and browser) */@media only screens and (max-width:767px {}/  * Mobile Landscape Size to Tablet Portrait (Devices and Browsers) */@media only screens and (min-width:480px) a  nd (MAX-WIDTH:767PX) {}/  * Mobile portrait size to Mobile landscape size (Devices and browsers) */@media only and (max-width:479px) {}	 

Frameless's Media Queries

/*url:http://framelessgrid.com/*/@media screen and (max-width:16.875em) {} @media screen and (min-width:32.5em) and (max -width:37.4375em), screen and (	 min-width:45em) and (max-width:56.9375em), screen and	 (min-width:77.5em) and (m ax-width:102.4375em), screen and	 (min-width:135em) {} @media screen and (min-width:102.5em) and (max-width:117.9375 EM), screen and	 (min-width:150em) {} @media screens and (min-width:15em) {} @media screen and (min-width:30em) {} @medi A screen and (min-width:37.5em) {} @media screens and (Min-width:57em) {} @media screen and (Min-width:57em) and (Max-widt h:117.9375em) {} @media screen and (Min-width:118em) {}	 

Susy's Media Queries

/*url:http://susy.oddbird.net/*/@media (min-width:29em) {}  @media (min-width:30em) and (max-width:60em) {}  @  Media (min-width:119em) {}  @media (min-width:33.75em) and (max-width:67.5em) {}  @media (min-width:33.75em) and (max-width:67.5em) {}	 

Less Framework 4

/*url:http://lessframework.com/*/@media only Screens and	 (min-width:768px) and (max-width:991px) {}/  *		Mobile layout:320px (20em).		*/@media only screen and (max-width:767px) {}  /*wide Mobile layout:480px (30em) * * */@media only screen and (min-width : 480px) and (max-width:767px) {}	 

Media Queries for Golden Grid system

/*url:http://goldengridsystem.com/*//* @media screen and (min-width:640px) */@media screen and (min-width:40em) {}
  
   /* @media screen and (min-width:720px) */@media screen and (min-width:45em) {}/  * @media screen and (min-width:88 8PX) */@media screen and (min-width:55.5em) {}/  * @media screen and (min-width:984px)/@media screen and (Min-wid  th:61.5em) {}  /* @media screen and (min-width:1200px) */@media screen and (min-width:75em) {}/  * @media screen and (min-width:1392px) */@media screen and (Min-width:87em) {}/  * @media screen and (min-width:1680px) */@media Screen and (min-width:105em) {}/  * @media screen and (min-width:1872px) */@media screen and (min-width:117em) {}
   /* @media screen and (min-width:2080px) */@media screen and (min-width:130em) {}	 
  

Media Queries of Fluid baseline

/*url:http://fluidbaselinegrid.com/*//* Mobile portrait */@media only screens and (min-width:320px) {}/  * mobile LAN Dscape/@media only screen and (min-width:480px) {}/  * SMALL TABLET */@media only screen and (min-width:600px) {}  /* Tablet/netbook/@media only screen and (min-width:768px) {}/  * landscape tablet/netbook/laptop//@media on Ly screen and (min-width:1024px) {} @media only screens and  (min-width:1280px) {}/*  widescreen/* Increased B Ody size for legibility */@media only screen and (min-width:1400px) {}	 

320andUP

/*url:http://stuffandnonsense.co.uk/projects/320andup*/@media only screen and (min-width:480px) {/   * *  * @media only screen and (min-width:600px) {/* */} @media only screens and  (min-width:768px) {/   * 768*/} @media only screen and  (min-width:992px) {/   * 992*/} @media only screens and  (min-width:1382px) {/   * 13 I/   }  @media only screens and (-webkit-min-device-pixel-ratio:1.5), only the screen and  ( min--moz-device-pixel-ratio:1.5), only screen and  (min-device-pixel-ratio:1.5) {/   * 2x*/}	 

Gridless

/* url:http://thatcoolguy.github.com/gridless-boilerplate/  /@media only screen and (min-width:480px) {/ 	* Wide Mobile (480px+) styles go here/} @media only Screens and  (min-width:768px) {  	/* Tablets/netbooks (768px+ Styles go/} @media only Screens and  (min-width:1024px) {/  	* Desktops (1024px+) styles go here/*	 

Totanthemes

/*url:http://titanthemes.com/*/  /* Smaller than standard 960 (devices and browsers) */@media only screens and (Max-wid TH:959PX) {}  //* Tablet portrait size to standard 960 (devices and browsers)/@media only screens and (min-width:768 px) and (max-width:989px) {}/  * All Mobile sizes (Devices and browser) */@media only screens and (MAX-WIDTH:767PX) { }  /* Mobile landscape Size to Tablet Portrait (Devices and Browsers) */@media only screens and (min-width:480px) and (MAX-WIDTH:767PX) {}  /* Mobile portrait size to mobile landscape size (Devices and browsers) */@media only screens and (max-width:479px ) {}	 

Responsive Grid System

/*url:http://responsive.gs/*/	  @media (max-width:480px) {}    @media (min-width:480px) and (max-width:768px) {}< c8/> @media (min-width:768px) {}    @media (min-width:1024px) {}    @media (min-width:1200px) {}	 

This article is a collection of media queries in a variety of devices under the code snippets, hope that these fragments will help you better understand the responsive breakpoint settings. If you have a better plan, we would like to share it in the comments.

Updated April 19, 2014 Media query breakpoint settings based on window width

If you set the body font to 100%. It has a simple calculation formula: 100% = 16px = 1em = 14pt

/*viewport = 1920px*/@media screen and (max-width:120em) {}/*viewport = 1680px*/@media screen and (max-width:105em) { }/*viewport = 1400px*/@media screen and (max-width:87.5em) {}/*viewport = 1200px*/@media screen and (max-width:75 EM) {}/*viewport = 1024px*/@media screen and (Max-width:64em) {}/*viewport = 960px*/@media screen and (max-width:6 0em) {}/*viewport = 800px*/@media screen and (max-width:50em) {}/*viewport = 768px*/@media screen and (max-width : 48em) {}/*viewport = 600px*/@media screen and (max-width:37.5em) {}/*viewport = 480px*/@media screen and (max-w idth:30em) {}/*viewport = 320px*/@media screen and (max-width:20em) {}/*viewport = 240px*/@media screen and (max- WIDTH:15EM) {}/* high Resolution/retina Display Media Queries * */*pixel density 3*/@media (-webkit-min-device-pixel -ratio:3), (min-resolution:192dpi) {}/*pixel density 2*/@media (-webkit-min-device-pixel-ratio:2), (min-resolution: 192dpi) {}/*pixel density 1.5*/@media (-webkit-min-device-pixel-ratio:1.5), (min-resolution:124.8dpi) {}/*pixel density 1.25*/@media (- webkit-min-device-pixel-ratio:1.25), (min-resolution:120dpi) {}/* printed Style Media Queries *//*print Resolution dpi*/@media print and (min-resolution:300dpi) {}/*print Resolution 144 dpi*/@media print and min-resolution:144 DPI) {}/*print resolution dpi*/@media Print and (min-resolution:96dpi) {}/*print resolution @media dpi*/  T and (resolution:72dpi) {}