css媒体查询适配iphoneX,iPhone5，HUAWEI P40，ipad

/*
1.max-device-width是设备整个显示区域的宽度，例如，真实的设备屏幕宽度。
2.max-width是目标显示区域的宽度，例如，浏览器宽度。
3.它是设备上物理像素和设备独立像素( device-independent pixels (dips) )的比例，即 devicePixelRatio = 屏幕物理像素/设备独立像素
*//* 判断ipad */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px){header{height: 140px;background: rgba(255, 255, 255, 1);}.Header-content {display: none;}.Header-content-mobile {display: block;}
}
/* 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){/* style */
}
/* 判断iphone5 *//* 横屏竖屏判断方法与ipad一样 */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px){header{height: 140px;background: rgba(255, 255, 255, 1);}.Header-content {display: none;}.Header-content-mobile {display: block;}/* style */
}
/* iPhoneX、iPhoneXS*/
@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {}/* iPhoneXR iPhone11*/
@media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) {}/* iPhone11Pro*/
@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {}/* iPhoneXSMax*/
@media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) {}/* HUAWEI P40*/
@media only screen and (device-width: 360px) and (device-height: 780px) and (-webkit-device-pixel-ratio: 3) {}/* HUAWEI HONOR V30*/
@media only screen and (device-width: 360px) and (device-height: 800px) and (-webkit-device-pixel-ratio: 3) {}

css媒体查询适配iphoneX,iPhone5，HUAWEI P40，ipad相关推荐

IOS margin失效问题,以及CSS媒体查询区分iPhone 6、 iPhone8、iPhone8 Plus和iPhoneX
CSS媒体查询区分iPhone 6. iPhone8.iPhone8 Plus和iPhoneX /*iPhone6和iPhone8*/ @media only screen and (device-w ...
html 苹果xr媒体查询,iPhoneX 媒体查询适配的方法教程
iPhone X尺寸 5.8 英寸 5.65 x 2.79 x 0.30 英寸 iPhone X分辨率 1125 x 2436 每英寸PX~458 像素屏幕尺寸 Apple iPhone X的屏幕为 ...
媒体查询适配代码适配IOS等各类机型
媒体查询适配代码,适配IOS等各类机型,可按需取用 /*屏幕分辨率比大于2*/ @media screen and (min-aspect-ratio: 200/100) { } /*屏幕分辨率比大于 ...
rem结合媒体查询适配的vue项目（PC端和移动端共用一套代码）
一.前言上周四接到了一个简单的纯前端网页的项目,我用了三天时间已经开发并且部署完毕(为了实现快速简易部署,使用了gitee pages进行部署,这篇文章记录我使用gitee pages部署的详细过程 ...
使用chatgpt工具实现媒体查询适配各大厂商手机
本文目的: 使用chatgpt工具实现媒体查询适配各大厂商手机,根据不同的尺寸显示不同颜色的文字实验过程: 1.先查询各大手机厂商存在哪些手机尺寸机型华为手机有多种型号和尺寸,以下是其中一些主要的 ...
媒体查询适配不同分辨率应用
媒体查询适配不同分辨率应用 <meta charset="UTF-8" /> <meta name="renderer" content=&q ...
css媒体查询（手机、平板、PC）
List item css媒体查询 PC端按屏幕尺寸整理? 通过上面的电脑屏蔽及尺寸的例表上我们得到了几个宽度 1024 1280 1366 1440 1680 1920 超小屏幕手机 (<7 ...
响应式开发中合理选定CSS媒体查询分割点
本文响应式开发中合理选定CSS媒体查询分割点翻译自David Gilbertson的The-100%-Correct-Way-To-Do-CSS-breakpoints一文.本文唔看上去有些拗口,不过 ...
使用CSS 媒体查询功能满足不同屏幕分辨率要求
http://www.adobe.com/cn/devnet/dreamweaver/articles/dw_html5_pt3.html 这是探索Dreamweaver CS5.5的HTML5和CS ...

css媒体查询适配iphoneX,iPhone5，HUAWEI P40，ipad

css媒体查询适配iphoneX,iPhone5，HUAWEI P40，ipad相关推荐

最新文章

热门文章