移动端检测横屏及几个图片设置

1、javaScript检测横屏

window.addEventListener("resize", ()=>{
if(window.orientation === 180|| window.orientation === 0) {
// 正常方向或屏幕旋转180度
        console.log('竖屏');
};
if(window.orientation === 90|| window.orientation === -90){
// 屏幕顺时钟旋转90度或屏幕逆时针旋转90度
        console.log(‘横屏');
}
});

2、css检测横屏

@media screen and (orientation: portrait) {
/*竖屏...*/
}
@media screen and (orientation: landscape) {
/*横屏...*/
}

3、media查询

使用media查询判断不同的设备像素比来显示不同精度的图片：（只适用于背景图）

.avatar{
            background-image: url(conardLi_1x.png);
}
@media only screen and(-webkit-min-device-pixel-ratio:2){
.avatar{
                background-image: url(conardLi_2x.png);
}
}
@media only screen and(-webkit-min-device-pixel-ratio:3){
.avatar{
                background-image: url(conardLi_3x.png);
}
}

4、image-set

.avatar {
    background-image: -webkit-image-
set
( 
"conardLi_1x.png"
1x
, 
"conardLi_2x.png"
2x
);
}

5、srcset

使用img标签的srcset属性，浏览器会自动更具像素密度匹配最佳显示图片：

 <imgsrc="conardLi_1x.png" srcset=" conardLi_2x.png 2x, conardLi_3x.png 3x">