如何使分隔符响应/在不同的屏幕大小上自动调整大小

Question

在我的网页中，我使用了本网站的一些分隔符： http://www.dcodes.net/2/docs/divider.html

并且看起来都不错，但是当我从垂直位置的手机访问页面时，分隔线不会自动调整大小（太长）， 所以我的问题是：

如何让它们响应，在不同的屏幕尺寸上自动调整大小？

Answer 1

他们没有调整大小，因为他们提供的样式表在width: 600px规则上定义了.dc_divider1。这个规则适用于台式机，但在大多数移动设备上600px太多了。

如果您向.dc_divider规则添加其他属性以限制宽度，它将在移动设备上正常显示。要添加的规则是max-width: 100%;规则。每当移动设备尝试渲染背景图像时，max-width规则将阻止其比移动屏幕更宽。

示例：

.dc_divider1 {
    background:url(../images/dc_divider1.png) no-repeat scroll center transparent;
    height:35px;
    margin:0px auto;
    padding:6px;
    width:600px;

    max-width: 100%;
}

Answer 2

在移动设备上（或任何比分割器更薄的屏幕宽度）：

.child {
  margin-left: -50%;
}
.parent {
  overflow: hidden;
}

概念证明：https://jsfiddle.net/ctsmxs98/2/

Answer 3

尝试CSS vh和vw，如＆＃34; max-width：95vw;＆＃34;