һ
 ¼ע

QQ¼

ֻһٿʼ

ƼĶ

+

[CSS] һЩʵõCSS Media QueryƬ

[]
12652 websjy 2013-4-3 09:20:04
| ʾȫ¥
1F

ϵ½עᣬύѣø๦ܣϴزIJޣ

Ҫ ¼ ſػ鿴ûʺţ¼ע  

x
ƶʱ豸ĻСͷֱʵij֣ΪWebǰһЩսվWebӦʾڸֲͬ豸أDzӦʽƣҳ豸ĻԶӦ

0.jpg


CSS3ijӦʽWebƱü򵥣CSS3ṩǿmedia queriesԲͬòͬʽڲ޸ҳݵ£Ϊͬ豸ṩͬʽЧ

һЩCSS media queriesƬΣԼĿУҳĻӦ

iPhone5

Css
  1. @media screen and (device-aspect-ratio: 40/71) {
  2. }
  3. or
  4. @media screen and (device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2){
  5. }
ƴ
Blackberry Torch

Css
  1.     @media screen and (max-device-width: 480px) {   
  2.     }  
ƴ
Samsung S3

Css
  1. @media only screen and (-webkit-device-pixel-ratio: 2) {  
  2. }
ƴ
Google Nexus 7

Css
  1. @media screen and (device-width: 600px) and (device-height: 905px) and (-webkit-min-device-pixel-ratio: 1.331) and (-webkit-max-device-pixel-ratio: 1.332) {  
  2. }
ƴ
iPad Mini

Css
  1. @media screen and (device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 1) {  
  2. }
ƴ
iPad 3


Css
  1. @media (max-device-width: 1024px) and (orientation: landscape) {   
  2. }
ƴ

Css
  1. @media (max-device-width: 768px) and (orientation: portrait) {   
  2. }
ƴ
Galaxy Tab 10.1


Css
  1. @media (max-device-width: 1280px) and (orientation: landscape) {   
  2. }
ƴ

Css
  1. @media (max-device-width: 800px) and (orientation: portrait) {   
  2. }
ƴ



Դ΢http://weibo.com/techued Դ΢Źںţweb-tech
ʹõ ٱ ظ
 ¥| websjy 2013-4-3 09:21:01
| ʾȫ¥
2F
CSS

Boilerplate CSS Media Queries
  1. /* Smartphones (portrait and landscape) ----------- */
  2. @media only screen
  3. and (min-width : 320px)
  4. and (max-width : 480px) {
  5. /* Styles */
  6. }
  7. /* Smartphones (landscape) ----------- */
  8. @media only screen
  9. and (min-width : 321px) {
  10. /* Styles */
  11. }
  12. /* Smartphones (portrait) ----------- */
  13. @media only screen
  14. and (max-width : 320px) {
  15. /* Styles */
  16. }
  17. /* iPads (portrait and landscape) ----------- */
  18. @media only screen
  19. and (min-width : 768px)
  20. and (max-width : 1024px) {
  21. /* Styles */
  22. }
  23. /* iPads (landscape) ----------- */
  24. @media only screen
  25. and (min-width : 768px)
  26. and (max-width : 1024px)
  27. and (orientation : landscape) {
  28. /* Styles */
  29. }
  30. /* iPads (portrait) ----------- */
  31. @media only screen
  32. and (min-width : 768px)
  33. and (max-width : 1024px)
  34. and (orientation : portrait) {
  35. /* Styles */
  36. }
  37. /* Desktops and laptops ----------- */
  38. @media only screen
  39. and (min-width : 1224px) {
  40. /* Styles */
  41. }
  42. /* Large screens ----------- */
  43. @media only screen
  44. and (min-width : 1824px) {
  45. /* Styles */
  46. }
  47. /* iPhone 4 ----------- */
  48. @media
  49. only screen and (-webkit-min-device-pixel-ratio : 1.5),
  50. only screen and (min-device-pixel-ratio : 1.5) {
  51. /* Styles */
  52. }
ƴ
Դ΢http://weibo.com/techued Դ΢Źںţweb-tech
ʹõ ٱ ظ ֧
 ¥| websjy 2013-4-3 09:24:11
| ʾȫ¥
3F
iOS Media Queries Boilerplate
iPad In Portrait & Landscape
  1. @media only screen
  2. and (min-device-width : 768px)
  3. and (max-device-width : 1024px)
  4. {
  5. // CSS Styles
  6. }
ƴ

iPad In Landscape
  1. @media only screen
  2. and (min-device-width : 768px)
  3. and (max-device-width : 1024px)
  4. and (orientation : landscape)
  5. {
  6. // CSS Styles
  7. }
ƴ

iPad In Portrait
  1. @media only screen
  2. and (min-device-width : 768px)
  3. and (max-device-width : 1024px)
  4. and (orientation : portrait)
  5. {
  6. // CSS Styles
  7. }
ƴ

Retina Display iPadsTo target iPad 3 and 4 you need to check for the device pixel ratio.
Retina iPad In Portrait & Landscape
  1. @media only screen
  2. and (min-device-width : 768px)
  3. and (max-device-width : 1024px)
  4. and (-webkit-min-device-pixel-ratio: 2)
  5. {
  6. // CSS Styles
  7. }
ƴ

Retina iPad in landscape
  1. @media only screen
  2. and (min-device-width : 768px)
  3. and (max-device-width : 1024px)
  4. and (orientation : landscape)
  5. and (-webkit-min-device-pixel-ratio: 2)
  6. {
  7. // CSS Styles
  8. }
ƴ

Retina iPad in portrait
  1. @media only screen
  2. and (min-device-width : 768px)
  3. and (max-device-width : 1024px)
  4. and (orientation : portrait)
  5. and (-webkit-min-device-pixel-ratio: 2)
  6. {
  7. // CSS Styles
  8. }
ƴ

iPad 1 & 2 Media QueriesIf you want to target iPads 1 and 2 then you need to check for devices with a lower pixel ratio.
iPad 1 & 2 In Portrait & Landscape
  1. @media only screen
  2. and (min-device-width : 768px)
  3. and (max-device-width : 1024px)
  4. and (-webkit-min-device-pixel-ratio: 1)
  5. {
  6. // CSS Style
  7. }
ƴ

iPad 1 & 2 In Landscape
  1. @media only screen
  2. and (min-device-width : 768px)
  3. and (max-device-width : 1024px)
  4. and (orientation : landscape)
  5. and (-webkit-min-device-pixel-ratio: 1)
  6. {
  7. // CSS Style
  8. }
ƴ

iPad 1 & 2 In Portrait
  1. @media only screen
  2. and (min-device-width : 768px)
  3. and (max-device-width : 1024px)
  4. and (orientation : portrait)
  5. and (-webkit-min-device-pixel-ratio: 1) {
  6. // CSS Style
  7. }
ƴ

iPad Mini Media QueriesThe iPad Mini has the same resolution and pixel ratio as the iPad 1 & 2.
iPad Mini In Portrait & Landscape
  1. @media only screen
  2. and (min-device-width : 768px)
  3. and (max-device-width : 1024px)
  4. and (-webkit-min-device-pixel-ratio: 1)
  5. {
  6. // CSS Style
  7. }
ƴ

iPad Mini In Landscape
  1. @media only screen
  2. and (min-device-width : 768px)
  3. and (max-device-width : 1024px)
  4. and (orientation : landscape)
  5. and (-webkit-min-device-pixel-ratio: 1)
  6. {
  7. // CSS Style
  8. }
ƴ

iPad Mini In Portrait
  1. @media only screen
  2. and (min-device-width : 768px)
  3. and (max-device-width : 1024px)
  4. and (orientation : portrait)
  5. and (-webkit-min-device-pixel-ratio: 1) {
  6. // CSS Style
  7. }
ƴ

iPhone 5 In Portrait & Landscape
  1. @media only screen
  2. and (min-device-width : 320px)
  3. and (max-device-width : 568px)
  4. {
  5. // CSS Style
  6. }
ƴ

iPhone 5 In Landscape
  1. @media only screen
  2. and (min-device-width : 320px)
  3. and (max-device-width : 568px)
  4. and (orientation : landscape)
  5. {
  6. // CSS Style
  7. }
ƴ

iPhone 5 In Portrait
  1. @media only screen
  2. and (min-device-width : 320px)
  3. and (max-device-width : 568px)
  4. and (orientation : portrait)
  5. {
  6. // CSS Style
  7. }
ƴ

iPhone 2G-4S In Portrait & Landscape
  1. @media only screen
  2. and (min-device-width : 320px)
  3. and (max-device-width : 480px)
  4. {
  5. // CSS Style
  6. }
ƴ

iPhone 2G-4S In Landscape
  1. @media only screen
  2. and (min-device-width : 320px)
  3. and (max-device-width : 480px)
  4. and (orientation : landscape)
  5. {
  6. // CSS Style
  7. }
ƴ

iPhone 2G-4S In Portrait
  1. @media only screen
  2. and (min-device-width : 320px)
  3. and (max-device-width : 480px)
  4. and (orientation : portrait)
  5. {
  6. // CSS Style
  7. }
ƴ

Դ΢http://weibo.com/techued Դ΢Źںţweb-tech
ʹõ ٱ ظ ֧
б

ֹ

̳¡ͼƬѷϴվԭתԻ,µİȨԭ
վַİȨ֪ͨǵĹԱ,Ա(Email:admin@websjy.com)ʱȡȨɾ
ܾκκʽڱ̳л񹲺͹ִ!

QQ| 42011102000510|Archiver|ֻ|Դ ( ICP14013341-1

GMT+8, 2018-12-11 22:41

Powered by Discuz! X3.2

ԴԴվ  ԴAPPӦ֮

ٻظ ض б