Media queries templates for Apple's ipads and iphones

Article Introduction: media Queries of ipads and Ipones.

CSS3 Media Queries is a powerful medium query feature, and his presence using our site can show different styles with different devices. Following the advent of the responsive design, Media queries is getting more and more close to the front-end staff.

I am not in addition, following this fashion popular wind, from contact to learning, immediately to the application of this attribute has a basic understanding and practical experience. To facilitate the use of media Queries,webjx.com A copy of the CSS3 Media Queries template through Internet collection. With more and more applications on the mobile end, especially the increase of Apple's product model, the front-end staff to the media queries the use of a bit of trouble. To solve this problem, the Internet has collected relevant information, specifically for Apple's ipads and iphones media queries template, hope that these templates can help you reduce the time to find online.

IPad Media Queries

1, ipad Media Queries (all versions, including the ipad mini)

ipads from the first generation to the present, a total of five dynasties, that is, IPAD1~IPAD5, and the mini IPad. And each generation of ipads has a corresponding CSS Media Queries. This code allows you to be more perfect in the code under ipads.

IPad (Landscape and portrait)

@media only screen and  (min-device-width:768px) and  (max-device-width:1024px)  {    

IPad (Landscape)

@media only Screens and (  min-device-width:768px) and (  max-device-width:1024px) and (  Orientation:landscap E) {    

IPad (Portrait)

@media only Screens and (  min-device-width:768px) and (  max-device-width:1024px) and (  ORIENTATION:PORTR AIT) {//    * Style written here * *  

2, IPad3 and IPAD4

IPad3 and IPad4 have Retina screen technology, and if you want to use @2x images for the Retina screen to distinguish the display from the normal screen, use the following media Queries will make it easy for you to achieve.

Retina IPad (Portrait and Landscape)

@media only Screens and (  min-device-width:768px) and (  max-device-width:1024px) and (- Webkit-min-device-pixel-ratio:2) {    

Retina IPad (Landscape)

@media only Screens and (  min-device-width:768px) and (  max-device-width:1024px) and (  Orientation:landscap e) and (-webkit-min-device-pixel-ratio:2) {    

Retina IPad (Portrait)

@media only Screens and (  min-device-width:768px) and (  max-device-width:1024px) and (  Orientation:portra It) and (-webkit-min-device-pixel-ratio:2) {/    * style written here * *  

3, ipad 1 and ipad 2 Media Queries

The above is satisfied with the high version, you may be more than the pursuit of detail, want to let your web in the lower version of the ipad can also show the perfect, then the following sections of code can help you.

ipad 1 has ipad 2 (portrait and Landscape)

@media only Screens and (  min-device-width:768px) and (  max-device-width:1024px) and (  - Webkit-min-device-pixel-ratio:1) {    

ipad 1 with ipad 2 (Landscape)

@media only Screens and (  min-device-width:768px) and (  max-device-width:1024px) and (  Orientation:landscap e) and (-webkit-min-device-pixel-ratio:1)  {    

ipad 1 with ipad 2 (portrait)

@media only Screens and (  min-device-width:768px) and (  max-device-width:1024px) and (  ORIENTATION:PORTR AIT) and  (-webkit-min-device-pixel-ratio:1) {//    * Style written here * *  

IPad Mini Media Queries

Using media queries can also help us differentiate between the ipad and the ipad Mini, specifically looking at the following code

IPad Mini (portrait and Landscape)

@media only Screens and (  min-device-width:768px) and (  max-device-width:1024px) and (- Webkit-min-device-pixel-ratio:1)  {    

IPad Mini (Landscape)

@media only Screens and (  min-device-width:768px) and (  max-device-width:1024px) and (  Orientation:landscap e) and (-webkit-min-device-pixel-ratio:1)  {    

IPad Mini Resolution

@media only Screens and (  min-device-width:768px) and (  max-device-width:1024px) and (  ORIENTATION:PORTR AIT) and (-webkit-min-device-pixel-ratio:1)  {//    * Style written here * *  

IPad Mini (Portrait)

Screen width = 768px (CSS Pixels) screens Height = 1024px (CSS Pixels) screen  width = 768px (Actual Pixels) screen Hei Ght = 1024px (Actual Pixels)  

IPhone Media Queries

1, iPhone 5 Media Queries

IPhone 5 (Portrait and Landscape)

@media only screen and  (min-device-width:320px) and  (max-device-width:568px) {    

IPhone 5 (Landscape)

@media only Screens and (  min-device-width:320px) and (  max-device-width:568px) and (  Orientation:landscape ) {    

IPhone 5 (Portrait)

@media only Screens and (  min-device-width:320px) and (  max-device-width:568px) and (  Orientation:portra IT) {    

2, IPhone 2G, 3G, 4, 4S Media Queries

IPhone 2g-4s (Portrait and Landscape)

@media only screen and  (min-device-width:320px) and  (max-device-width:480px) {    

IPhone 2g-4s (Landscape)

@media only Screens and (  min-device-width:320px) and (  max-device-width:480px) and (  Orientation:landscape ) {    

IPhone 2g-4s (Portrait)

@media only Screens and (  min-device-width:320px) and (  max-device-width:480px) and (  orientation:portrait) {/    * style write here * *  

IPhone 5 Resolution

Screen width = 320px (CSS Pixels) screens Height = 568px (CSS Pixels) screen  width = 640px (Actual Pixels) screen Heig HT = 1136PX (Actual Pixels)  

IPhone 4/4s Resolution

Screen width = 320px (CSS Pixels) screens Height = 480px (CSS Pixels) screen  width = 640px (Actual Pixels) screen Heig HT = 960px (Actual Pixels)  

IPhone 2G/3G/3GS Resolution

Screen width = 320px (CSS Pixels) screens Height = 480px (CSS Pixels) screen  width = 320px (Actual Pixels) screen Heigh t = 480px (Actual Pixels)  

Media Queries is mainly targeted at Apple's ipad and iphone devices, and the use of PX as a unit of calculation, you can also convert the PX code above to EM, in detail to see the use of EM units to create CSS3 media Queries .

Special statement: The code presented in this article is collected and sorted by @stephentgilbert , and you can click CSS Media Queries for IPads & iPhones in detail