如何使我的背景图像具有响应性，以便它在 iphone 和 android 上正确显示答案

【问题标题】：How do I make my background-image responsive so that it displays properly on iphones and android如何使我的背景图像具有响应性，以便它在 iphone 和 android 上正确显示
【发布时间】：2015-09-25 04:35:20
【问题描述】：

这是我的 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>

【问题讨论】：

标签： html css iphone responsive-design

【解决方案1】：

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

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

最常用于响应式网页设计的 CSS 是 min-width、max-width、min-height 和 max-height。

希望对您有所帮助:)

【讨论】：