What is the definition of "viewport" in CSS?

Question

I want to make a responsive design for my site. I am confused about adding @media and @import to CSS.

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

Answer 1

Viewport is the area of ​​the browser visible to the user, or you can say that the window is visible to the user.

If you want to configure targeted media queries, go to mydevice.io . For mobile phones and tables, the width of the device is used to record a media query.

But I would rather use media write requests using either min-width or max-width. Use breakpoints.

@import - import css

@media is not just writing media queries for responsiveness, but you can write print requests and more

Answer 2

If you use Chrome u, you can:

right click -> check -> and switch device mode (Ctrl + Shift + M)

Or press F12.

Then the width and height are displayed, you can also change what you would like to see as.

This site has good information. http://www.w3schools.com/css/css_rwd_mediaqueries.asp

I read in books what is best developed for mobile devices and then changed if a user enters your website. I think it loads faster.

Note

I can not comment, otherwise I would have done it.

Answer 3

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

If you use chrome, follow these steps to get a viewing window for any device.

Press F12>, then click on the device switching mode (it will appear in the upper right corner of the window that appears after pressing F12)> select the desired device in the drop-down menu, then you can get the width and height of your viewing window