页面较小时使背景更大

Question

当您制作较小的网页（例如在平板电脑或手机上）时，背景会延伸。那么文本仍然和以前一样在同一区域？

Answer 1

您可以使您想要仅在特定屏幕尺寸上应用任何CSS样式。

<style>
  @media screen (min-width:400px){
   div {background-position:center} //This style will be applied only to screen larger than 400px
  }
</style>

为每个设备创建所需的CSS，并按照您需要的右侧@media将其包围。

更多信息：

• CSS media rule on W3Schools

• 您可以通过重新启动窗口或使用Chrome Inspector Device Emulation

在没有真实设备的情况下对其进行测试

Answer 2

我猜你在找：

background-size: contain;

  

包含

     

一个关键字，可以尽可能地缩放图像并保持图像宽高比（图像不会被压扁）。图像在容器内是letterboxed。 当图像和容器具有不同的尺寸时，空白区域（左/右上/下）用背景颜色填充。图像自动居中，除非被其他属性覆盖作为背景位置。