1、Smartphones (豎板和橫板)

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {/* 你的樣式寫在這里 */}

2、Smartphones (橫板) @media only screen and (min-width : 321px) {/* 你的樣式寫在這里 */}

3、Smartphones (豎板) @media only screen and (max-width : 320px) {/* 你的樣式寫在這里 */}

4、iPad(豎板和橫板) @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {/* 你的樣式寫在這里 */}

5、iPad橫板 @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {/* 你的樣式寫在這里 */}

6、iPad的豎板 @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {/* 你的樣式寫在這里 */}

7、Desktops and laptops @media only screen and (min-width : 1224px) {/* 你的樣式寫在這里 */}

8、Large screens @media only screen and (min-width : 1824px) {/* 你的樣式寫在這里 */}

9、iPone4 @media only screen and (-webkit-min-device-pixel-ratio : 1.5),only screen and (min-device-pixel-ratio : 1.5) {/* 你的樣式寫在這里 */}

10、iPhone4豎板 @media only screen and (-webkit-min-device-pixel-ratio : 1.5) and (orientation:portrait), only screen and (min-device-pixel-ratio : 1.5) and (orientation:portrait){/*你的樣式寫在這里*/ }

11、iPhone4橫板 @media only screen and (-webkit-min-device-pixel-ratio : 1.5) and (orientation:landscape),only screen and (min-device-pixel-ratio : 1.5) and (orientation:landscape){/*你的樣式寫在這里*/}

12、iPad 3 Media Query
@media only screen and (min-device-width: 1536px) and (max-device-width: 2048px) and (-webkit-min-device-pixel-ratio: 2) { /*你的樣式寫在這里*/
} ?

轉(zhuǎn)載于:https://www.cnblogs.com/beesky520/p/4843211.html

總結(jié)

以上是生活随笔為你收集整理的201509280825_《css3——media query整理2》的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。