@media媒体查询判断ipad和iPhone各版本

短命女 2022-07-18 08:54 240阅读 0赞

Media Queries这功能是非常强大的，他可以让你定制不同的分辨率和设备，并在不改变内容的情况下，让你制作的web页面在不同的分辨率和设备下都能显示正常，并且不会因此而丢失样式。

/* 判断ipad */
    @media only screen
    and (min-device-width : 768px)
    and (max-device-width : 1024px){
    /* style */
    }
    /* ipad横屏 */
    @media only screen
    and (min-device-width : 768px)
    and (max-device-width : 1024px)
    and (orientation : landscape){
    /* style */
    }
    /* ipad竖屏 */
    @media only screen
    and (min-device-width : 768px)
    and (max-device-width : 1024px)
    and (orientation : portrait){
    /* style */
    }
    /* 判断iphone5 *//* 横屏竖屏判断方法与ipad一样 */
    @media only screen
    and (min-device-width : 320px)
    and (max-device-width : 568px){
    /* style */
    }
    /* 判断iphone4-iphone4s *//* 横屏竖屏判断方法与ipad一样 */
    @media only screen
    and (min-device-width : 320px)
    and (max-device-width : 480px){
    /* style */
    }
    /* iphone5分辨率 */
    screen Width = 320px (css像素)
    screen Height = 568px (css像素)
    screen Width = 640px (实际像素)
    screen Height = 1136px (实际像素)
    Device-pixel-ratio:2
    /* iphone4-iphone4s分辨率 */
    screen Width = 320px (css像素)
    screen Height = 480px (css像素)
    screen Width = 640px (实际像素)
    screen Height = 960px (实际像素)
    Device-pixel-ratio:2

一、最大宽度Max Width

表示：当屏幕大于或等于900px时，将采用big.css样式来渲染Web页面。

二、多个Media Queries使用

表示：当屏幕在600px-900px之间时采用style.css样式来渲染web页面。

三、设备屏幕的输出宽度Device Width

表示：iphone.css样式适用于最大设备宽度为480px，比如说iPhone上的显示，这里的max-device-width所指的是设备的实际分辨率，也就是指可视面积分辨率

四、not关键字

表示：not关键字是用来排除某种制定的媒体类型，换句话来说就是用于排除符合表达式的设备。   
五、only关键字

六、其他

表示：在Media Query中如果没有明确指定Media Type，那么其默认为all

表示：另外还有使用逗号（，）被用来表示并列或者表示或， style.css样式被用在宽度小于或等于480px的手持设备上，或者被用于屏幕宽度大于或等于960px的设备上。