Javascript 如何预防：Don'；不要通过更改屏幕分辨率来调整容器div中的任何内容的大小
也许你能帮我。具体来说，我希望文本始终位于相同的容器位置，具体取决于屏幕分辨率。有什么解决办法吗？我需要一个JS函数吗？我不知道要搜索什么来修复这个Javascript 如何预防：Don'；不要通过更改屏幕分辨率来调整容器div中的任何内容的大小,javascript,html,css,Javascript,Html,Css,也许你能帮我。具体来说，我希望文本始终位于相同的容器位置，具体取决于屏幕分辨率。有什么解决办法吗？我需要一个JS函数吗？我不知道要搜索什么来修复这个 .标识栏{ 边框：1px实心； 显示器：flex； 证明内容：中心； 对齐项目：居中； 身高：100%； } 溴{ 线高：10%； } .集装箱{ 边框：1px实心； 宽度：90%； 身高：90%； 最小宽度：960像素； 显示：块； 左边距：自动； 右边距：自动； 最高：50%； } img{ 最大宽度：100%； 最大高度：100%； }
.标识栏{
边框：1px实心；
显示器：flex；
证明内容：中心；
对齐项目：居中；
身高：100%；
}
溴{
线高：10%；
}
.集装箱{
边框：1px实心；
宽度：90%；
身高：90%；
最小宽度：960像素；
显示：块；
左边距：自动；
右边距：自动；
最高：50%；
}
img{
最大宽度：100%；
最大高度：100%；
}
#文本{
z指数：100；
位置：绝对位置；
最高：29.5%；
左：11%；
字体大小：115%；
字体系列：Arial、Helvetica、无衬线字体；
}
.分隔器{
宽度：2%；
高度：自动；
显示：内联块；
}
$（文档）.ready（函数（）{
//调用变量以了解窗口的宽度
var screenWidth=$（窗口）.width（）；
$（'container'）.css（'width'，screenWidth+'px'）；
});
20.5
解决方案可能非常简单。您使用%s定位文本框的方法是正确的 我们绝对尽我们所能，在图像宽度和高度的百分比方面。这样，响应是自动的 不需要使用Javascript。测量图像的宽度和高度、3个文本框的左下距离以及文本框的宽度和高度，并将测量值放入CSS变量中。CSS可以根据需要计算正确的顶部、底部、宽度和高度百分比。你用什么单位来进行测量并不重要，只要它们都使用相同的单位 这个片段提供了一些度量来说明这个想法。您可能需要重新测量所有内容以获得更好的准确性 需要考虑的一个突出问题是字体大小。这需要响应，而不是在px等中定义。它设置为1vw img的最小宽度要求已被删除，以便在较小的设备上可以看到整个图像（用户可以随时缩放）。如果恢复最小值，则必须进一步考虑字体大小，以阻止其减小，而不是与img大小相关
* {
保证金：0；
填充：0；
}
.标识栏{
边框：1px实心；
显示器：flex；
证明内容：中心；
对齐项目：居中；
身高：100%；
}
溴{
线高：10%；
}
.集装箱{
边框：1px实心；
宽度：90%；
高度：自动；
/*最小宽度：960像素*/
显示：块；
左边距：自动；
右边距：自动；
位置：相对位置；
框大小：边框框；
--w:1354；
--h:665；
--x:106；
--boxw:113；
--框H:20；
--yvib:230；
--ytemp:294；
--y速度：354；
}
img{
宽度：100%；
高度：自动；
}
#振动{
--y:var（--yvib）；
}
#临时工{
--y:var（--ytemp）；
}
#速度{
--y:var（--yspeed）；
}
.text{
z指数：100；
位置：绝对位置；
文本对齐：居中；
填充：2px；
字体大小：1vw；
宽度：计算值（（var（--boxw）/var（--w））*100%）；
高度：计算值（（var（--boxh）/var（--h））*100%）；
字体系列：Arial、Helvetica、无衬线字体；
顶部：calc（（var（--y）/var（--h））*100%）；
左：计算（（var（--x）/var（--w））*100%）；
颜色：红色；
}
.分隔器{
宽度：2%；
高度：自动；
显示：内联块；
}
20.5
100
50
<style>
.logoBar {
border: 1px solid;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
br {
line-height: 10%;
}
.container{
border: 1px solid;
width: 90%;
height:90%;
min-width: 960px;
display:block;
margin-left: auto;
margin-right: auto;
top: 50%;
}
img {
max-width: 100%;
max-height: 100%;
}
#text {
z-index: 100;
position: absolute;
top: 29.5%;
left: 11%;
font-size: 115%;
font-family: Arial, Helvetica, sans-serif;
}
.divider{
width: 2%;
height: auto;
display: inline-block;
}
</style>
<body>
<script>
$(document).ready(function() {
//Call a variable to know the width of the window
var screenWidth = $(window).width();
$('container').css('width', screenWidth + 'px');
});
</script>
<div class="logoBar">
<img src="picture1.png" style="height: 15%; width: 15%">
<div class="divider"></div>
<img src="Log-05.png" style="height: 15%; width: 15%">
</div>
<br></br>
<div class="container">
<center><img src="Picture.png"></center>
<p id="text">20.5</p>
</div>
</body>