·您当前的位置:首页 > 技术教程 > Html5技术 >

[html5]移动设备适配尺寸(多终端适配)

时间:2017-11-28 22:38酷播
当下,不同分辨率,不同尺寸的移动设备越来越多,自适应也成了最热门的话题,下面就是整理到的一些主流手机的匹配尺寸

当下,不同分辨率,不同尺寸的移动设备越来越多,自适应也成了最热门的话题,下面就是图趣网整理到的一些主流手机的匹配尺寸:

@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){ }

热门文章推荐

请稍候...

保利威视云平台-轻松实现点播直播视频应用

酷播云数据统计分析跨平台播放器