码迷,mamicode.com
首页 > 其他好文 > 详细

响应式尺寸

时间:2019-12-07 16:40:18      阅读:113      评论:0      收藏:0      [点我收藏+]

标签:ice   lan   pix   iphone8   iphone   port   dia   响应式   cap   

兼容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)

响应式尺寸

标签:ice   lan   pix   iphone8   iphone   port   dia   响应式   cap   

原文地址:https://www.cnblogs.com/rockyjs/p/12001876.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!