javascript - 基于移动方向的图像高度

Question

我有一个小型移动图片库的问题。当我将方向更改为纵向时，图像太大而无法显示在屏幕上。

当方向变为纵向时，是否可以使用一些 javascript 使图像适合屏幕？
在横向模式下，一切看起来都很好。

Answer 1

是的，您可以在不使用 JavaScript 的情况下使用CSS3 媒体查询。

@media screen and (max-width: 450px) {
    img {
        width: 30%;
    }
}

http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries

Answer 2

尝试这个：

@media screen and (orientation:portrait) {
    //your css code goes here
}

@media screen and (orientation:landscape) {
    //your css code goes here
}