适配移动端大全

Posted mxg1996

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了适配移动端大全相关的知识,希望对你有一定的参考价值。

/* 兼容iphone5 */

@media (device-height:568px) and (-webkit-min-device-pixel-ratio:2){}

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

@media screen and (min-width: 320px) and (max-width: 480px) { }

/* 平板之类的宽度 1024 以下设备 */
@media only screen and (min-width: 321px) and (max-width: 1024px) {

}

/* PC客户端或大屏幕设备: 1028px 至更大 */
@media only screen and (min-width: 1029px) {

}

/* 竖屏 */
@media screen and (orientation:portrait) and (max-width: 720px) {对应样式}

/* 横屏 */
@media screen and (orientation:landscape){对应样式}

iPhone5s 504*320

以上是关于适配移动端大全的主要内容,如果未能解决你的问题,请参考以下文章

Vue 项目中的移动端适配方案

移动端适配-px转成rem

移动端Web页面适配方案(整理版)

移动端H5页面适配问题研究

移动端页面适配方案及原理

移动端页面适配方案及原理