css用@media适配不同尺寸的手机

最新推荐文章于 2025-10-29 13:59:55 发布

原创最新推荐文章于 2025-10-29 13:59:55 发布 · 4.9k 阅读

6 ·

CC 4.0 BY-SA版权

JavaScript 专栏收录该内容

59 篇文章

订阅专栏

本文深入讲解CSS媒体查询的语法及应用，包括针对不同设备尺寸的响应式设计策略，如iPhone、魅族、Mate7等常见手机配置。通过具体示例展示如何使用媒体特性如设备高度、宽度和像素比，实现跨设备兼容。

css语法为

@media mediatype and|not|only (media feature) {
    CSS-Code;
}

一些常用的手机配置

@media (device-height:568px) and (-webkit-min-device-pixel-ratio:2){/* 兼容iphone5 */} 
@media only screen and (max-device-width :480px){ } 
@media only screen and (min-device-width :481px){ } 

/*6*/ 
@media (min-device-width : 375px) and (max-device-width : 667px) and (-webkit-min-device-pixel-ratio : 2){ } 

/*6+*/ 
@media (min-device-width : 414px) and (max-device-width : 736px) and (-webkit-min-device-pixel-ratio : 3){ } 

/*魅族*/ 
@media only screen and (min-device-width :1080px) and (-webkit-min-device-pixel-ratio : 2.5){ } 

/*mate7*/ 
@media only screen and (min-device-width :1080px) and (-webkit-min-device-pixel-ratio : 3){ } 

/*4 4s*/ 
@media only screen and (device-height :480px) and (-webkit-device-pixel-ratio:2){ }

screen

用于电脑屏幕，平板电脑，智能手机等。

all

用于所有设备

如果把screen改为all将用于所有设备