Android和Iphone-现代css媒体查询

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Android和Iphone-现代css媒体查询相关的知识，希望对你有一定的参考价值。

Extended css media queries for modern mobile screens
  1. /* Desktops and laptops ----------- */
  2.     @media only screen
  3.     and (min-width : 1224px) {
  4.     /* Styles */
  5.     }
  6.  
  7.     /* Large screens ----------- */
  8.     @media only screen
  9.     and (min-width : 1824px) {
  10.     /* Styles */
  11.     }
  12.  
  13.     /* old Smartphones (portrait and landscape) ----------- */
  14.     @media only screen
  15.     and (min-device-width : 320px)
  16.     and (max-device-width : 480px) {
  17.     /* Styles */
  18.     }
  19.  
  20.     /* old Smartphones (landscape) ----------- */
  21.     @media only screen
  22.     and (min-width : 321px) {
  23.     /* Styles */
  24.     }
  25.  
  26.     /* old Smartphones (portrait) ----------- */
  27.     @media only screen
  28.     and (max-width : 320px) {
  29.     /* Styles */
  30.     }
  31.  
  32.     /* iPhone 4 ----------- */
  33.     @media
  34.     only screen and (-webkit-min-device-pixel-ratio : 1.5),
  35.     only screen and (min-device-pixel-ratio : 1.5) {
  36.     /* Styles */
  37.     }
  38.  
  39.     /* iPads (portrait and landscape) ----------- */
  40.     @media only screen
  41.     and (min-device-width : 768px)
  42.     and (max-device-width : 1024px) {
  43.     /* Styles */
  44.     }
  45.  
  46.     /* iPads (landscape) ----------- */
  47.     @media only screen
  48.     and (min-device-width : 768px)
  49.     and (max-device-width : 1024px)
  50.     and (orientation : landscape) {
  51.     /* Styles */
  52.     }
  53.  
  54.     /* iPads (portrait) ----------- */
  55.     @media only screen
  56.     and (min-device-width : 768px)
  57.     and (max-device-width : 1024px)
  58.     and (orientation : portrait) {
  59.     /* Styles */
  60.     }
  61.  
  62.     /* android Tablet (portrait and landscape) ----------- */
  63.     @media only screen
  64.     and (min-device-width : 800px)
  65.     and (max-device-width : 1280px) {
  66.     /* Styles */
  67.     }
  68.  
  69.     /* Android Tablet (landscape) ----------- */
  70.     @media only screen
  71.     and (min-device-width : 800px)
  72.     and (max-device-width : 1280px)
  73.     and (orientation : landscape) {
  74.     /* Styles */
  75.     }
  76.  
  77.     /* Android Tablet (portrait) ----------- */
  78.     @media only screen
  79.     and (min-device-width : 800px)
  80.     and (max-device-width : 1280px)
  81.     and (orientation : portrait) {
  82.     /* Styles */
  83.     }
  84.  
  85.     /* Desire + Galaxy S2 (portrait and landscape) ----------- */
  86.     @media only screen
  87.     and (min-device-width : 480px)
  88.     and (max-device-width : 800px) {
  89.     /* Styles */
  90.     }
  91.  
  92.     /* Desire + Galaxy S2 (landscape) ----------- */
  93.     @media only screen
  94.     and (min-device-width : 480px)
  95.     and (max-device-width : 800px)
  96.     and (orientation : landscape) {
  97.     /* Styles */
  98.     }
  99.  
  100.     /* Desire + Galaxy S2 (portrait) ----------- */
  101.     @media only screen
  102.     and (min-device-width : 480px)
  103.     and (max-device-width : 800px)
  104.     and (orientation : portrait) {
  105.     /* Styles */
  106.     }

以上是关于Android和Iphone-现代css媒体查询的主要内容，如果未能解决你的问题，请参考以下文章

css iPhone 6 Plus和iPad Air 2媒体查询（Retina HD显示屏）。也适用于类似的Android设备。

css iPhone 6 Plus和iPad Air 2媒体查询（Retina HD显示屏）。也适用于类似的Android设备。

iPhone 5 CSS 媒体查询

css iPhone只有媒体查询。仅适用于iphone。

css 媒体查询：手机 - iPhone

iPhone6的CSS3媒体查询