css 判断手机是否横屏

CSS 判断手机是否横屏

@media screen and (orientation: portrait) {
/* css style for portrait orientation screen */}
@media screen and (orientation: landscape) {
/* css style for landscape orientation screen */}

CSS 可以通过"orientation"来判断屏幕的方向，值分为"portrait"和"landscape"，分别代表竖屏和横屏。根据屏幕的方向，可以为不同方向的屏幕设置不同的样式。例如，为了让在竖屏时显示的内容更加清晰，可以给元素添加如下样式：

@media screen and (orientation: portrait) {
.container {
    width: 100%;
    font-size: 16px;
}
}

当屏幕方向为竖屏时，".container"元素的宽度设置为100%，字体大小设置为16px。而当屏幕方向为横屏时，则可以为".container"元素设置另外一组样式：

@media screen and (orientation: landscape) {
.container {
    width: 50%;
    font-size: 20px;
}
}
    

当屏幕方向为横屏时，".container"元素的宽度设置为50%，字体大小设置为20px。通过CSS的"orientation"属性，我们可以根据屏幕的方向来为不同方向的屏幕设置不同的样式，从而优化不同方向的显示效果。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！