For simple webpages, my general rule is to utilize viewport units as they provide a lot of flexibility to the website. However, when dealing with complex webpages, I usually opt for media queries.
In some cases, especially intermediate ones, I find it beneficial to combine both viewport units and media queries for easier management. You can check out an example I created at this link: https://codepen.io/santimirandarp/pen/jjboKN. Below is a snippet of the CSS code:
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;}
}
Question
I'm unsure if my approach is correct. When should one use viewport units instead of media queries? Can you provide guidance on the best approach?