201509280825_《css3——media query整理2》
生活随笔
收集整理的這篇文章主要介紹了
201509280825_《css3——media query整理2》
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
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)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 软件工程启程篇章:C#和四则运算生成与运
- 下一篇: C语言第11课