Question

我遇到媒体查询问题。我将第一个设置为770px，以便在不将侧边栏放在主要内容下方的情况下重新调整大小。

然后我将第二个媒体查询设置为740（它是450，但我改为740为iPad Mini），认为这会在主要内容下面发送侧边栏。（意思是如果垂直放置iPad Mini，它看起来就像在iPhone上一样）。

这适用于我的iPhone，但在iPad mini上，它可以在垂直查看时保持770px设置（非横向模式）。

我做错了什么？假设770适用于横向模式，我认为740的最大宽度足够高。

以下是网站：http://www.insidemarketblog.com

这是代码 HTML：

div class="container">
  <div class="columns">
    <div class="content">
      <div id="post-1" class="post_box grt top" itemtype="http://schema.org/Article" itemscope="">
       <div id="comments">
      <div class="prev_next"> </div>
    </div>
  <div class="sidebar" style="height: 560px;">
</div>

CSS：

@media all and (max-width: 740px) {
    .container, .landing .container {
        width: auto;
        /*max-width: 720px;*/
        /*max-width: $w_content;*/
        max-width: 100%;
    }
    .header {
        border-top: 1px solid $color1;
    }
    .landing .header {
        border-top: 0;
    }
    .columns > .content {
        /*float: left;*/
        float: none;
        /*width: 445px;*/
        width: 100%;
        border: 0;
    }
    .columns > .sidebar {
        /*float: right;*/
        float: none;
        /*width: 275px;*/
        width: 100%;
        border-top: 3px double $color1;
    }
    .menu a, .menu_control {
        padding: 1em $x_half;
        background-color: #C24F43;
    }
    .header, .columns > .sidebar, .post_box, .prev_next, .comments_intro, .comment, .comment_nav, #commentform, .comment_form_title, .footer {
        padding-right: $x_half;
        /*padding-left: $x_half;*/
    }
    .menu .sub-menu, .children .comment {
        padding-left: $x_half;
    }
    .comments_closed, .login_alert {
        margin-right: $x_half;
        margin-left: $x_half;
    }
    .comment_form_title {
        margin-left: -$x_half;
        margin-right: -$x_half;
    }
    .right, .alignright, img[align="right"], .left, .alignleft, img[align="left"] {
        float: none;
    }
    .grt .right, .grt .left, .post_box .alignright, .post_box .alignleft, .grt blockquote.right, .grt blockquote.left {
        margin-right: 0;
        margin-left: 0;
    }
    .post_author:after {
        content: '\a';
        height: 0;
        white-space: pre;
        display: block;
    }
    .grt blockquote.right, .grt blockquote.left, #commentform .input_text, .sidebar .search-form .input_text, .sidebar .thesis_email_form .input_text {
        width: 100%;
    }
    .post_box blockquote {
        margin-left: 0;
    }
    .comment_date {
        display: none;
    }
}

Answer 1

尝试此媒体查询。

/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-width : 320px)
and (max-width : 480px) {
/* Styles */
}

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

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

/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-width : 768px)
and (max-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen
and (min-width : 768px)
and (max-width : 1024px)
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen
and (min-width : 768px)
and (max-width : 1024px)
and (orientation : portrait) {
/* Styles */
}

/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen
and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}

在非横向模式下使用iPad Mini的CSS响应问题（垂直）

1 个答案: