css - 随页面宽度调整的可滚动 DIV

Question

我有一个想要滚动的 DIV，但问题是我正在使用 position: fixed; 并且 DIV 不会与页面的其余部分一起调整它的位置；因此在小分辨率上消失。任何建议都会很棒。

这是当前的 DIV：

<div style="
display: block; 
top: 200px; 
left: 1500px; 
width: 130px; 
position: fixed; 
border: 1px solid rgb(136, 136, 136); 
padding: 10px; 
text-align: center; 
font-weight: bold; 
color: rgb(255, 255, 255); 
background-color:#FFFFFF;
">

Answer 1

而不是使用像素的顶部和左侧属性使用百分比。例如：top:20%而不是top:1200px. 在较小的分辨率下，您的左上角值会使您的 div 离开屏幕。试试这个

display: block; 
top: xx%; 
left: nn%; 
width: mm%; 
position: fixed; 
border: 1px solid rgb(136, 136, 136); 
padding: 10px; 
text-align: center; 
font-weight: bold; 
color: rgb(255, 255, 255); 
background-color:#FFFFFF;

根据您的潜水大小调整您的百分比值。附注如果您的目标是移动设备，您也可以使用媒体查询，例如。

@media all and (max-width: 699px) and (min-width: 520px), (min-width: 1151px) {
  #myDivId{
   width: 100px; /* or width:10%; */
  }
}