Question

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

在某些中间情况下，我会同时使用它们，只是因为它更容易。下一个链接是我构建的示例：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：

当您要根据设备的常规类型（例如打印与屏幕）修改网站或应用程序时，媒体查询很有用

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

请记住，没有“使用视口或媒体查询”。使用媒体查询，您可以区分媒体类型-不仅是媒体的尺寸。例如，当您使用媒体print时，可能要删除颜色。另外（不能替代），您可以使用视口单位来指定尺寸。

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

HTML视口与媒体查询

1 个答案: