响应式尺寸
Posted rockyjs
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了响应式尺寸相关的知识，希望对你有一定的参考价值。
兼容iphone4/4s：
@media (device-height:480px) and (-webkit-min-device-pixel-ratio:2){ }
兼容iphone5 ：
@media (device-height:568px) and (-webkit-min-device-pixel-ratio:2){ }
兼容iphone6，iphone7，iphone8s ：
@media (device-height:667px) and (-webkit-min-device-pixel-ratio:2){ }
兼容iphone6 Plus,iphone7 Plus,iphone8 Plus：
@media (device-height:736px) and (-webkit-min-device-pixel-ratio:2){ }
兼容iphoneX：
@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3){ }
兼容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)
以上是关于响应式尺寸的主要内容，如果未能解决你的问题，请参考以下文章