应用css3配对手机上显示屏横纵情况

2021-03-08 14:43 jianzhan

@media是css3中新界定的,作用十分强劲,说白了PC是没法配对横纵屏的,因此orientation只对挪动机器设备见效。

1.头顶部申明

拷贝编码
编码以下:

<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no,maximum-scale=1.0">

加到

拷贝编码
编码以下:

<head></head>

2. media配对显示屏是横屏還是竖屏

拷贝编码
编码以下:

@media all and (orientation : landscape) { </p> <p>/*  这是配对横屏的情况,横屏时的css编码  */
body {
background-color: #ff0000;
}
}
@media all and (orientation : portrait){ </p> <p>/*  这是配对竖屏的情况,竖屏时的css编码  */
body {
background-color: #00ff00;
}
}

3. 运用的地区

(1)手机上WEB网页页面元素內容1般全是根据百分比界定的,便于可以在不一样辨别率机器设备下都能一切正常显示信息,尽管这样,可是挪动机器设备的显示屏辨别率宽度和高宽比相差還是很大,一样的网页页面在显示屏旋转过来时将会百分比界定的元素宽度会变得十分大,这样就会丧失网页页面的美观大方性,这样,假如用orientation配对显示屏的旋转情况,便可以写不一样的css加以操纵网页页面款式。

(2)针对有情况图的挪动WEB网页页面,能够依据orientation配对显示屏显示屏情况,设定不一样的background。

(3)略微有技术性的1点:一些有肯定精准定位元素的WEB网页页面,将某元素精准定位到网页页面底部,当显示屏是竖屏情况时,将会由于网页页面总长度小于显示屏高宽比(可是超过显示屏宽度),这时候将肯定精准定位元素精准定位究竟部是正确的,可是当显示屏旋转变成横屏时,此时由于网页页面內容高宽比超过显示屏高宽比(便是未旋转时显示屏宽度),肯定精准定位元素会遮盖在网页页面內容之上,致使网页页面出現难题,这时候能用orientation配对显示屏情况,调剂css编码。

有关配对显示屏横纵屏情况还可根据JS分辨,js中onorientationchange是window的1个恶性事件,能够根据监视恶性事件配对显示屏横纵屏。