Question

我想为每台设备显示两个不同的背景图片，有代码，但它无法正常工作......

哪里有错误？

＆＃13;

<!-- Status bar overlay for full screen mode (PhoneGap) -->
    <div class="statusbar-overlay"></div>
    <!-- Views -->
    <div class="views">
        <!-- Your main view, should have "view-main" class -->
        <div class="view view-main">
            <!-- Pages container, because we use fixed-through navbar and toolbar, it has additional appropriate classes-->
            <div class="pages navbar-through toolbar-through">
                <!-- Page, "data-page" contains page name -->
                <div data-page="index" class="page">
                    <!-- Scrollable page content -->
                    <div class="page-content login-screen-content">
                        <div class="login-screen-title"><img src="img/logo.png" width="130px" height="130px"></div>
                        <div class="login-screen-title">Welcome to<br>J Chat</div>
                        <p class="tour-content" style="text-align: center">Login below to get started!</p>
                        <form>
                        <div class="list-block">
                            <ul>
                                <li class="item-content">
                                    <div class="item-inner">
                                        <div class="item-title label">Email</div>
                                        <div class="input-inner">
                                            <input type="text" name="email" placeholder="E-Mail">
                                        </div>
                                    </div>
                                </li>
                                <li class="item-content">
                                    <div class="item-inner">
                                        <div class="item-title label">Password</div>
                                        <div class="input-inner">
                                            <input type="password" name="password" placeholder="Password">
                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </div>

                        <div class="list-block">
                            <ul>
                                <li>
                                    <a href="home.html" class="button button-intro login ripple">Login</a>
                                </li>
                            </ul>
                        </div>

                        <!-- Link to another page -->
                        <div class="list-block" style="margin-top: 1em;">
                            <p class="tour-content">
                                Don't have an account yet?<br>
                                <a href="signup.html">Click here</a> to sign up!
                            </p>
                        </div>

                    </form>


                </div>
              </div>
            </div>

          </div>
        </div>

＆＃13;

Answer 1

检查第一张图片的路径。我的图像可以正常工作。

我同意Dan Weber，代码可以简化：

＆＃13;

body {
  margin: 0;
  background-color: #ff0000;
  background-image: url('http://glebkema.ru/images/2015_09_20_iphone_155_x400.jpg');
  background-repeat: no-repeat;
  background-position: top left;
  background-size: 100% auto;
}

@media (min-width: 721px) {
  body {
    background-color: #303441;
    background-image: url('http://glebkema.ru/images/2015_09_26_iphone_198_x400.jpg');
  }
}

＆＃13;

Answer 2

好奇，为什么要混合最小宽度和最大宽度？

通常，首先定位桌面然后再定位到移动设备时使用max-width。

min-width用于首先定位移动设备并逐步升级到桌面。

http://www.the-haystack.com/2015/12/23/choosing-between-min-and-max-width/

我已经改变了确切的屏幕尺寸，因为在调整大小时1px更难以获得差异，但是相同的概念。以全页模式运行。

因此，默认情况下，低于720（移动优先）的所有内容都会获得第一张图像。当屏幕点击720时，它会改变，然后再次在820和更高。

body {
    margin: 0;
    background-image: url('http://www.dreamstime.com/static/free2/257779.jpg');
    background-color: #FFF;
    background-repeat: no-repeat;
    background-position: top left;
    background-size: 100% auto;
}

@media (min-width: 720px) {
    body {
        background-color: #ff0000;
        background-image: url('http://pic.1fotonin.com//data/wallpapers/7/WDF_562760.jpg');
    }
}

@media (min-width: 820px) {
    body {
        background-color: #303441;
        background-image: url('http://images.all-free-download.com/images/wallpapers_large/old_farm_wallpaper_landscape_nature_wallpaper_1439.jpg');
    }
}

这是一个很好的youtube视频，解释了最小宽度和最大宽度之间的差异。 https://www.youtube.com/watch?v=Gi3INcPOvo8

Bootstrap - 针对不同断点的不同图像背景......哪里有错误？

2 个答案: