Question

我想知道CSS值是否有更好更有效的方式来响应窗口的宽度？例如，当窗口较大时，大图像位于右上角，但是当您缩小页面时，大图像会随着窗口左下角的移动而变小。另一种看待它的方法是：1000px宽屏幕= top:0;因此，它将以某种方式设置，以便每1px屏幕尺寸减小，将{1}的值添加到{{1} }。它有点像REM和排版。

思想/想法？如果可能的话，我也在寻找一个只有CSS的解决方案。

Answer 1

您始终可以使用percent宽度值。例如，如果您希望它将大照片缩放到它与浏览器底部的距离，您可以使用以下内容：

#photo{
    bottom:60%;
    width:50%;
}

这样，您的窗口中的比率始终相同。当然，为了实现这一点，你必须定义一个全宽的positiom:relative容器。

Answer 2

您可以将视口单元用于此

FIDDLE （调整窗口大小）

＆＃13;

div {
  border: 2px solid tomato;
  margin-top: 5vw;
}

＆＃13;

<div>Test</div>

＆＃13;

Answer 3

如果您想根据父元素的宽度缩放图像大小，请使用此技巧： http://www.mademyday.de/css-height-equals-width-with-pure-css.html

这样，图像将按比例缩放到父元素的宽度。

关于图像位置，很难理解你想用

实现的目标

当窗口很大时右上角，但随着你向下缩小页面，大图像开始移动底部时变小左角。

您无法根据父元素的宽度来更改top值，但您可以使用相同的padding技巧来定位图像。下面的简单示例。 padding-bottom值取决于父元素的宽度。

        #outer
        {
            position: absolute;
            bottom: 0;
            right: 0;
            padding-bottom: 50%;
            border: 1px dashed red;
        }

        #inner
        {
            width: 30px;
            height: 30px;
            border: 1px dashed blue;
        }

    </style>


    <div id="outer">
      <div id="inner"></div>
    </div>

Answer 4

may be this can help:

document.getElementById("img").style.width = window.innerWidth*3/4;// 60% of window
console.log(window.innerWidth*3/4,window.innerWidth);
document.getElementById("img").style.bottom = window.innerWidth/2;// 50% of window

除了@media屏幕之外，CSS值是否有任何方法可以响应窗口宽度？

4 个答案:

FIDDLE （调整窗口大小）