HTML 视口与媒体查询

Question

到目前为止，我的经验法则是对简单的网页使用视口单位，因为它给了网站很大的灵活性；但当网页复杂时，使用媒体查询。

在一些中间情况下，我同时使用两者，只是因为它更容易。下一个 link 是我构建的示例：https://codepen.io/santimirandarp/pen/jjboKN css 文件如下所示：

body{
  background-color:lightblue;
  text-align:center;}
main{

font-size:calc(10px + 0.5vw);
 margin: auto;
width: 80vw;
}
#title{
  color:magenta;
}
span{
color:hsl(110,100%,55%);
font-size:calc(20px + 3vw) ;
}
#description{}
p{font-size:calc(13px + 0.5vw) ;
text-align:justify;
line-height:calc(20px + 0.5vw);
margin-bottom:2vw;
}

#linend{
  color:blue;
  text-align:center;
  font-family:Garamond;
  font-size:1.5em;
  background-color:yellow;
}

@media only screen and (min-width: 1000px) { @media only screen and (min-width: 1000px) { 
  main{width:45%;}

  p {font-size:100%;
  }
  p strong{font-size:100%;
  color:brown;}

  }

问题

这种做法正确吗？何时使用视口单位与媒体查询？你能解释一下正确的方法吗？

Answer 1

截至 MDN：

Media queries are useful when you want to modify your site or app depending on a device's general type (such as print vs. screen)

相比之下，视口的目的是适应屏幕尺寸，如宽度和高度。

那记，没有'use viewport or media queries'。使用媒体查询，您可以区分媒体类型——而不仅仅是它们的维度。例如，当您有媒体 print 时，您可能想要删除颜色。另外（不是替代）您可以使用视口单位来指定尺寸。

由于您同时使用媒体查询和视口单元，我的回答是：是的，您的方法是正确的。不过，我认为这里没有严格的对错之分。

HTML 视口与媒体查询

HTML viewports vs media query

html

css

media-queries