放大模糊整个屏幕

Question

我的网站有一个 header，当用户在我的网站上放大时，它的 header 也会放大并可能遮住整个屏幕。 所有其他事情都运作良好。我的 css 代码是：

#header {
    position: fixed;
    height: auto;
    width: 100%;
    z-index: 100
}
body {
  padding-left: 11em;
  font-family: Georgia, "Times New Roman",
        Times, serif;
  color: purple;
  background-color: #d8da3d }
 sidebar { 
  width: 190px; 
  position: fixed; 
  margin-left: 410px; 
}
footer { background-color:Black; color: #fff; text-align: center; position:absolute; width:100%; }

Answer 1

你可以这样做：

#header {
  position: fixed
}

@media screen and (max-width: 500px) {
/* applies only if the screen is narrower than 500px */
  #header {
    position: static
  }
}