media querries for tablets

1/* ----------- iPad 1, 2, Mini and Air ----------- */
2
3/* Portrait and Landscape */
4@media only screen 
5  and (min-device-width: 768px) 
6  and (max-device-width: 1024px) 
7  and (-webkit-min-device-pixel-ratio: 1) {
8
9}
10
11/* Portrait */
12@media only screen 
13  and (min-device-width: 768px) 
14  and (max-device-width: 1024px) 
15  and (orientation: portrait) 
16  and (-webkit-min-device-pixel-ratio: 1) {
17
18}
19
20/* Landscape */
21@media only screen 
22  and (min-device-width: 768px) 
23  and (max-device-width: 1024px) 
24  and (orientation: landscape) 
25  and (-webkit-min-device-pixel-ratio: 1) {
26
27}
28
29/* ----------- iPad 3, 4 and Pro 9.7" ----------- */
30
31/* Portrait and Landscape */
32@media only screen 
33  and (min-device-width: 768px) 
34  and (max-device-width: 1024px) 
35  and (-webkit-min-device-pixel-ratio: 2) {
36
37}
38
39/* Portrait */
40@media only screen 
41  and (min-device-width: 768px) 
42  and (max-device-width: 1024px) 
43  and (orientation: portrait) 
44  and (-webkit-min-device-pixel-ratio: 2) {
45
46}
47
48/* Landscape */
49@media only screen 
50  and (min-device-width: 768px) 
51  and (max-device-width: 1024px) 
52  and (orientation: landscape) 
53  and (-webkit-min-device-pixel-ratio: 2) {
54
55}
56
57/* ----------- iPad Pro 10.5" ----------- */
58
59/* Portrait and Landscape */
60@media only screen 
61  and (min-device-width: 834px) 
62  and (max-device-width: 1112px)
63  and (-webkit-min-device-pixel-ratio: 2) {
64
65}
66
67/* Portrait */
68/* Declare the same value for min- and max-width to avoid colliding with desktops */
69/* Source: https://medium.com/connect-the-dots/css-media-queries-for-ipad-pro-8cad10e17106*/
70@media only screen 
71  and (min-device-width: 834px) 
72  and (max-device-width: 834px) 
73  and (orientation: portrait) 
74  and (-webkit-min-device-pixel-ratio: 2) {
75
76}
77
78/* Landscape */
79/* Declare the same value for min- and max-width to avoid colliding with desktops */
80/* Source: https://medium.com/connect-the-dots/css-media-queries-for-ipad-pro-8cad10e17106*/
81@media only screen 
82  and (min-device-width: 1112px) 
83  and (max-device-width: 1112px) 
84  and (orientation: landscape) 
85  and (-webkit-min-device-pixel-ratio: 2) {
86
87}
88
89/* ----------- iPad Pro 12.9" ----------- */
90
91/* Portrait and Landscape */
92@media only screen 
93  and (min-device-width: 1024px) 
94  and (max-device-width: 1366px)
95  and (-webkit-min-device-pixel-ratio: 2) {
96
97}
98
99/* Portrait */
100/* Declare the same value for min- and max-width to avoid colliding with desktops */
101/* Source: https://medium.com/connect-the-dots/css-media-queries-for-ipad-pro-8cad10e17106*/
102@media only screen 
103  and (min-device-width: 1024px) 
104  and (max-device-width: 1024px) 
105  and (orientation: portrait) 
106  and (-webkit-min-device-pixel-ratio: 2) {
107
108}
109
110/* Landscape */
111/* Declare the same value for min- and max-width to avoid colliding with desktops */
112/* Source: https://medium.com/connect-the-dots/css-media-queries-for-ipad-pro-8cad10e17106*/
113@media only screen 
114  and (min-device-width: 1366px) 
115  and (max-device-width: 1366px) 
116  and (orientation: landscape) 
117  and (-webkit-min-device-pixel-ratio: 2) {
118
119}