What is definition of "viewport" on CSS? [closed]

Question

I want to do responsive design for my website. I am confused about adding @media and @import in CSS.

What is the definition of "viewport" in CSS? How to measure the viewpoint of smartphones and iPad or iPhone?

Answer 1

Viewport is browser area visible to user or you can say window visible to user.

If you want to target media queries, go through mydevice.io. For mobiles and tables use device width to write the media query.

But I will prefer to use write media queries using either min-width or max-width. Use breakpoints.

@import is to import the css

@media is to write media queries not only for responsive but you can write print media queries and lot more

Answer 2

This is a detailed explanation of what you wanted to know. The Viewport

If you are using chrome then follow the following steps to get the viewport of any device

Press F12 > then click on toggle device mode (its on the top right corner of the window that will appear after pressing F12) > from the drop down menu select the desired device then you can get your viewport's width and height