Differences between HTML viewports and media queries

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?

Answer №1

According to MDN:

Media queries come in handy when you need to adjust your website or application based on the general type of device being used (such as print vs. screen)

In contrast, the viewport's main function is to adapt to the screen's dimensions, such as width and height.

It's important to note that it's not a matter of 'using viewport or media queries'. Media queries allow you to target different types of media, not just their size. For instance, if you're targeting media for printing, you might want to remove colors. Moreover, instead of choosing one over the other, you can also use viewport units to specify dimensions.

Considering that you are utilizing both media queries and viewport units, I would say that your approach is correct. However, there isn't necessarily a clear right or wrong way to do this.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Utilizing the `theme` property in makeStyles with Material-UI

I am currently working on passing down an muiTheme to a component through the use of ThemeProvider, and I also want to apply it to the children components. Furthermore, I aim to utilize the theme's properties in both components by creating a classes o ...

Setting up Node.js

I'm currently in the process of configuring my Node.js to execute my HTML code. I have Bootstrap and Express Js set up as well. However, when I launch Node.js, it doesn't seem to be loading the CSS properly. Can someone provide insight into what ...

A pop-up window for selecting a file within an <a> tag

Is there a way to create an Open File dialog box on a link within my webpage? I attempted <input name="uploadedfile" type="file"> However, it only functions as a button and does not allow for the selection of multiple files. I would like somethin ...

The grid-column-end attribute is creating a gap in the layout

For the task at hand, my goal is to showcase the final 3 elements of a container in a horizontal alignment. In this setup, the first two items are allotted fixed space while the third element expands to fill the remaining columns. To accomplish this layou ...

What is the best way to form a string from a chunk of text that includes the """ symbol within it?

I have come across a block of HTML code that contains form action elements and multiple occurrences of quotation marks. Is there a method to convert the entire block into a string? public string methodName() { return @ " text goes here.. blah blah ...

Customizing Material UI InputProps with HTML attributes: A step-by-step guide

When using react-number-format with Material UI Textfield, I'm attempting to set a maximum value of 100 for my field. Numbers above 100 should not be allowed. How can this be achieved using the HTML attribute: min? import InputAdornment from "@ma ...

Determining the position coordinates of an element in relation to the viewport using JavaScript, regardless of its relative positioning

I am currently developing a vueJs web application and I'm in need of determining the position of an element within my web app relative to the viewport itself, rather than its parent elements. I'm curious if there exists a function or property tha ...

What is causing the QJsonValue(undefined) to be returned?

After sending a request to the API for bid price, I am receiving an undefined QJsonValue and unable to display it later. Can anyone help me pinpoint where I might be going wrong? { QApplication a(argc, argv); MainWindow w; w.show(); QNetwor ...

Expansive Offspring Division stretching to the Entire Vertical Length of its Guardian Division

I'm attempting to achieve full coverage of the parent div section by my child div section. Take a look at the Example URL (specifically where the Canadian Flag Stand Up Paddle Boarders are located) towards the bottom: Essentially, when I set the widt ...

Embed a style sheet in the PHP email sending function

Is there a way to integrate an entire stylesheet into an email using PHP's mail() function in order to maintain proper styling? I have a large CSS file designed specifically for CKEditor that needs to be included to ensure the email displays correctly ...

Troubleshooting problems with footer size in wkhtmltopdf

I am facing an issue while trying to convert an HTML file to a PDF format. Specifically, when attempting to include a footer, the size rendered in the PDF does not match the one specified in the CSS. The designated size for the footer should be exactly 15 ...

Are HTML custom data attributes being included in Google's indexing?

Currently, I am in the process of developing a portfolio module that relies on AJAX, pushState, and hash bangs. Since I am targeting browsers with JavaScript enabled, my main concern lies in the limited capability of HTML custom data attributes for SEO. T ...

Issue with jQuery .hover() not functioning as expected

The issue I'm encountering is just as described in the title. The code functions correctly on all divs except for one! $(".complete-wrapper-1").hide(); var panelHH = $(".file-select-wrapper").innerHeight; $(".files-button").hover(function(){ $(" ...

Directives for conditions if Internet Explorer is greater than or equal to 9, or if it is not

Embarking on a new project, I find myself in the unfortunate position of having to support IE7 & IE9. However, my goal is to eventually phase out IE7 support smoothly. Ideally, I aim to utilize the latest versions of libraries wherever possible. < ...

I am looking to showcase a text directly from the properties file using the thymeleaf template engine

I have two files named message_ar.properties and messages_fr.properties for internationalization purposes. Within my HTML file, I am attempting to show the correct label for a confirm message. To accomplish this, I am utilizing Thymeleaf as my template e ...

Implementing a video background within a dynamic two-column layout, accompanied by text within a separate column

While viewing on a large screen with Bootstrap 5, everything looks good: https://i.sstatic.net/Vm6bH.png However, when I resize the screen, the text in the first column overflows onto the sections below instead of adjusting properly. https://i.sstatic.n ...

Transfer a GET parameter from the URL to a .js file, then pass it from the .js file to a

Hey there, I'm currently using a JavaScript file to populate my HTML page with dynamic data. The JS file makes a call to a PHP file, which then fetches information from my SQL database and echoes it as json_encode to populate the HTML page. The issue ...

Learn how to display HTML content in trNgGrid using the $sce.trustAsHtml method

I am currently working with a table that has search options implemented using trNgGrid.js. The data for this table comes from a Sharepoint list where one of the columns contains HTML content that I need to display. To achieve this, I attempted using $sce. ...

Utilizing Javascript Conditional for Substitution

Currently, I have a JavaScript function that replaces all links with registration messages: <script> function replaceLinks() { var links = document.querySelectorAll('.restore a:link'); for (var i = 0; i < links.length; i++) { ...

establishing irregular edges for the div container

Looking to create a class that can transform an element into a specific shape using CSS. Not entirely sure if this is achievable with pure CSS alone, but applying a class to the image element will morph it into the desired shape as shown below. <style ...