Question

我正在使用图片作为我的操作栏背景。它适用于大多数设备，但对于小屏幕来说有点宽。有没有一种简单的方法可以在操作栏中调整背景图像的大小？

Answer 1

您是否考虑过为移动设备创建媒体查询？

我不确定您是否正在使用媒体查询，但在.css文件中，您（通常在文件的底部）会创建一个媒体查询（您的.css文件会搜索具有特定查询的设备）尺寸）然后在检测到移动设备或更小的设备后更改页面元素（即图像大小或位置）。

@media handheld {
    .actionbar {
        background-image: background_small.jpg;
        background-position: top center;
    }
}

从这里拿走的重要一点是，确保用于移动设备的图像较小或的做法与平板电脑和桌面设备的位置不同。

除了媒体查询之外，您可能需要确保，您已经在检查此人的移动设备是否正在使用您希望其使用的维度（例如，移动设备）没有以完整的桌面布局显示您的网站）。为此，请确保将此行添加到标题标记的底部（如果您使用的是模板，则在主模板页面上）：

<head>
    .... (other code, like stylesheets or jquery/javascript links)
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

希望有所帮助。

调整操作栏背景图像的大小

1 个答案: