当前位置: 首页 > Web前端 > CSS

iPhoneX媒体查询适配

时间:2023-03-30 13:31:32 CSS

iPhoneXsize5.8inches5.65x2.79x0.30inchesiPhoneXresolution1125x2436PX~458pixelsperinchscreensizeAppleiPhoneX的屏幕尺寸为5.8英寸,大约是实际设备82.9%。AppleiPhoneX设备的物理尺寸为5.65x2.79x0.30英寸或(143.6x70.9x7.7毫米)。单位显示顺序是“高x宽x厚”屏幕像素密度和CSS像素比率“像素”是任何显示的最小单位/元素。适合一英寸的像素总数称为“屏幕密度”或“像素密度”,以“每英寸像素数”来衡量。PixelDepthLimitDisplaypixelsperinch取决于不同的屏幕尺寸。当每英寸的像素数增加到超过屏幕尺寸限制时,显示分辨率会增加,但以像素为单位的实际设备宽度/高度保持不变。实际设备像素称为设备无关像素或CSS像素比。AppleiPhoneX的像素密度约为458,实际像素密度约为153,因此显示像素密度为3xxhdpi。设备视口显示的屏幕分辨率和像素的总和称为“屏幕分辨率”。而任何设备的实际像素总和称为“视口”。AppleiPhoneX的物理屏幕尺寸为5.8英寸,分辨率约为1125x2436像素,像素密度约为458PPI。AppleiPhoneX的视口尺寸为375x812像素,像素比约为3。CSS媒体查询AppleiPhoneX媒体查询(仅限移动设备)@mediaonlyscreenand(min-width:375px)and(max-width:767px){/*YourStyles...*/}AppleiPhoneXMin-Widthmediaquery@mediaonlyscreenand(min-width:375px){/*YourStyles...*/}AppleiPhoneXMin-Heightmediaquery@mediaonlyscreenand(min-height:812px){/*你的风格。..*/}AppleiPhoneXLandscape媒体查询@mediaonlyscreenand(min-width:812px)and(orientation:landscape){/*YourStyles...*/}AppleiPhoneXPortrait媒体查询@mediaonlyscreenand(min-width:375px)and(orientation:portrait){/*你的风格...*/}AppleiPhoneXRetinamediaquery@mediaonlyscreenand(-webkit-min-device-pixel-ratio:3),只有屏幕和(min--moz-device-pixel-ratio:3),只有屏幕和(-o-min-device-pixel-ratio:3/1),只有屏幕和(min-device-pixel-ratio:3),onlyscreenand(min-resolution:458dpi),onlyscreenand(min-resolution:3dppx){/*这里是Retina样式*/}Retina样式是实际的里设备大多具有基于设备像素比的2x或3x显示器,因此您可以使用通用视网膜媒体查询在所有类型的设备上显示高分辨率内容。Retina2x和Retina3x媒体查询如下:Retina2xmediaquery@mediaonlyscreenand(-webkit-min-device-pixel-ratio:2),onlyscreenand(min--moz-device-pixel-ratio:2),只有屏幕和(-o-min-device-pixel-ratio:2/1),只有屏幕和(min-device-pixel-ratio:2),只有屏幕和(min-resolution:192dpi),只有screenand(min-resolution:2dppx){/*Retinastyleshere*/}Retina3xmediaquery@mediaonlyscreenand(-webkit-min-device-pixel-ratio:3),只有屏幕和(min--moz-device-pixel-ratio:3),只有屏幕和(-o-min-device-pixel-ratio:3/1),只有屏幕和(min-device-pixel-ratio:3),只有屏幕和(min-resolution:384dpi),onlyscreenand(min-resolution:3dppx){/*此处为Retina样式*/}