Media Query for different Device or Screen
from Media Query Builder
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 |
/* (320x480) iPhone (Original, 3G, 3GS) */ @media only screen and (min-device-width: 320px) and (max-device-width: 480px) { /* insert styles here */ } /* (320x480) Smartphone, Portrait */ @media only screen and (device-width: 320px) and (orientation: portrait) { /* insert styles here */ } /* (320x480) Smartphone, Landscape */ @media only screen and (device-width: 480px) and (orientation: landscape) { /* insert styles here */ } /* (480x800) Android */ @media only screen and (min-device-width: 480px) and (max-device-width: 800px) { /* insert styles here */ } /* (640x960) iPhone 4 & 4S */ @media only screen and (min-device-width: 640px) and (max-device-width: 960px) { /* insert styles here */ } /* (720x1280) Galaxy Nexus, WXGA */ @media only screen and (min-device-width: 720px) and (max-device-width: 1280px) { /* insert styles here */ } /* (720x1280) Galaxy Nexus, Landscape */ @media only screen and (min-device-width: 720px) and (max-device-width: 1280px) and (orientation: landscape) { /* insert styles here */ } /* (1024x768) iPad 1 & 2, XGA */ @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) { /* insert styles here */ } /* (768x1024) iPad 1 & 2, Portrait */ @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) { /* insert styles here */ } /* (1024x768) iPad 1 & 2, Landscape */ @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) { /* insert styles here */ } /* (2048x1536) iPad 3 */ @media only screen and (min-device-width: 1536px) and (max-device-width: 2048px) { /* insert styles here */ } /* (1280x720) Galaxy Note 2, WXGA */ @media only screen and (min-device-width: 720px) and (max-device-width: 1280px) { /* insert styles here */ } /* (1366x768) WXGA Display */ @media screen and (max-width: 1366px) { /* insert styles here */ } /* (1280x1024) SXGA Display */ @media screen and (max-width: 1280px) { /* insert styles here */ } /* (1440x900) WXGA+ Display */ @media screen and (max-width: 1440px) { /* insert styles here */ } /* (1680x1050) WSXGA+ Display */ @media screen and (max-width: 1680px) { /* insert styles here */ } /* (1920x1080) Full HD Display */ @media screen and (max-width: 1920px) { /* insert styles here */ } /* (1600x900) HD+ Display */ @media screen and (max-width: 1600px) { /* insert styles here */ } |