1

我正在使用引导程序来构建客户的网站，但在尝试在移动设备上定位横向和纵向以便为两个视口添加一些特定样式时，我遇到了困难。如何针对移动样式定位纵向和横向？我需要在 320px 断点处添加特定样式，在 480px 断点处添加某些样式。对于我当前的媒体查询，这不起作用目前在我的样式表中，我有以下内容：

/* portrait phones */
@media only screen and (max-width: 320px) and (orientation:portrait) {
    /* Styles */
}

/* landscape phones */
@media only screen and (min-width: 321px) and (orientation:landscape) {
/* Styles */
    }

如果我将样式放入风景中，但是我认为它们不会被采纳。每次我进行更改然后刷新我的 Iphone 时，我都看不到任何区别。我想也许我的媒体查询是错误的？如果有更好的方法来定位移动状态，我将不胜感激。

4

2 回答 2

2

尝试使用：

@media (orientation: portrait) and (max-width: 400px) {Fooobar}

@media (orientation: landscape) and (max-width: 400px) {foobar}
于 2019-03-09T13:46:34.257 回答
1

我最终通过向我的 321px 媒体查询添加最大宽度来解决这个问题，并且能够同时定位横向和纵向移动方向。我还在我的标题中发现：initial-scale=1这似乎是导致问题的原因，在删除它之后，我能够定位我需要的移动断点。

/*Portrait phones */
@media (max-width:320px){}

/* Landscape phones and down */
@media (min-width: 321px) and (max-width: 480px) {}
于 2016-12-23T11:39:47.350 回答