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%; */
  }
}