如何使背景图像具有响应性，以便在iphones和android上正确显示

Question

这就是我的css中的背景。图片非常适合这样，我不想在普通浏览器中更改位置或大小或任何东西。我只希望当在手机设备或平板电脑上查看时，图像可以自动调整大小。

.intro {
    display: table;
    width: 100%;
    height: auto;
    padding: 100px 0;
    text-align: center;
    color: #fff;
    background: url(../img/mee.JPG) no-repeat bottom center scroll;
    background-color: #000;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
    background-position: 0px 1px;
}

这是html部分：

 <!-- Intro Header -->
    <header class="intro">
        <div class="intro-body">
            <div class="container">
                <div class="row">
                    <div class="col-md-8 col-md-offset-1">
                        <h1 class="brand-heading">Welcome</h1>
                        </div>
                            <div class="col-md-8 col-md-offset-4">
                        <font size= "6"><marquee behavior="slide" scrollamount ="22"><b>ENGINEER</font></marquee>
                        <font size= "6"><marquee behavior="slide" scrollamount ="20"><b>DEVELOPER</b></font></b></marquee>
                        <font size= "6"><marquee behavior="slide" scrollamount ="18"><b>COFFEE ADDICT</b></font></b></marquee>
                        </div>
                      <div class="buttonn">
                        <a href="#about" class="btn btn-circle page-scroll">
                            <i class="fa fa-angle-double-down animated"></i>

                        </a>
                    </div>
                </div>
            </div>
        </div>
    </header>

Answer 1

您需要为不同的屏幕大小创建额外的css，本质上是使其具有响应性。

这是一个很好的链接，解释了这一点以及如何去做：https://developers.google.com/web/fundamentals/layouts/rwd-fundamentals/use-media-queries?hl=en#a-note-on-min-device-width

最常用于响应式网页设计的CSS是最小宽度、最大宽度、最小高度和最大高度。

希望这对我们有所帮助:)