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

Are there any ways for CSS values respond to the window width other than @media screen?

本文关键字：方法 任何 响应窗口 @media 是否 屏幕 CSS      更新时间：2023-09-26

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

想法

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

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

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

这样，您将始终在窗口中具有相同的比率。当然，要做到这一点，您必须定义一个全宽的positiom:relative容器。

你可以为此使用视口单位

小提琴(调整窗口大小(

div {
  border: 2px solid tomato;
  margin-top: 5vw;
}
<div>Test</div>

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
如果要

根据父元素的宽度缩放图像大小，请使用以下技巧：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>
相关文章：