Question

我有一个网站，它使用大小为“封面”的背景作为页面顶部。图像应根据屏幕的分辨率进行更改，但某些设备会显示桌面或平板电脑版本的图像。该网站为rookmgmt.ca，我将包含相关的HTML和CSS代码。

编辑：更具体地说，某些设备上的图像太大了。它不是城市天际线，而是仅显示天空的顶部。它适用于我的手机以及我亲自测试过的其他设备，但不适用于所有设备。

HTML

<div class="fixed-background bg-1">
            <div class="container">
                <div class="title">
                    <h1>ROOK PROPERTY<br>
                        MANAGEMENT INC.</h1>
                    <h2>CONDOMINIUM MANAGEMENT</h2>
                </div>
            </div>
        </div>

CSS

.fixed-background {
    height: 800px;
    background-size: cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: center center;
    text-align: center;
    overflow: auto;
}

.fixed-background.bg-1 {
    background-image: url("../images/IMG_6642-2_mobile.jpg");
}

元标记

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" media="screen and (min-width: 320px) and (max-width: 767px)" href="css/styles_mobile.css">
<link rel="stylesheet" type="text/css" media="screen and (min-width: 768px) and (max-width: 1199px)" href="css/styles_tablet.css">
<link rel="stylesheet" type="text/css" media="screen and (min-width:1200px)" href="css/styles_desk.css">

Answer 1

使用百分比代替不同的像素描述

＆＃13;

.fixed-background {
    height: 50%;
    width: 30%;
    background-size: cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: center center;
    text-align: center;
    overflow: auto;
}

.fixed-background.bg-1 {
    background-image: url("../images/IMG_6642-2_mobile.jpg");
}

＆＃13;

封面背景图像在某些移动设备上不正确

1 个答案: