Dumb question about using max-width in media queries

1

I know that in order to make the website “truly” responsive, you need to include media queries in your html file.
I have seen some youtube toturial about it, and obviously you need to set a max-width, if the screen width is below your max width, you will create a different set of rules when it comes to the styling of the website.

However , the question I wanna ask is this: I have seen people using google chrome’s dev tool to see the exact length of their website. But I am using a 1440p monitor. They are using a 1080p monitor… One third of their screen width is like 500px, on the screen I am using right now, 1/3 of my screen is about 900 px. Then I am confused… How am I gonna determine the max-width I wanna use in media query???

2

Hi @zhouxiang19910319

When you are on chrome dev tools, click on the top left where there is a mobile phone icon. This enables your screen dimensions. You can click on the mobile phones, tablets and responsive to whatever dimensions you are building for.

Also, when you add media queries, in device mode, it will show in highlighted bars where your media queries get called.

Hope this clears things out and there are no dumb questions :slight_smile:

3 Likes
3

Thanks for the tips!! Huge help!

:heart:

4

Here are some good links I’ve used in the past to help with media queries

  1. Using media queries (MDN)
  2. Media Queries for Standard Devices (css-tricks.com)
  3. Responsive Web Design - Media Queries (w3schools.com)
2 Likes
5

Wow. Thanks! I will look into it ! I found some tutorials too on youtube!