Html 放大使整个屏幕模糊

我的网站有一个页眉，当用户放大我的网站时，它的页眉也会放大，可能会模糊整个屏幕。 其他一切都很顺利。我的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%; }

您可以这样做：

#header {
  position: fixed
}

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