Responsive site, how to test and set @media?

Asked

Viewed 333 times

-2

Well, nowadays every professional website should be responsive, and I doubt that. Initially, is there any offline tool to simulate this? For example: simulate access to multiple resolutions, etc? I remember seeing a video about something similar in the Opera browser, but I didn’t find such a feature.

Another question is in CSS: Which statements @media do I need to have a fully responsive website on all devices? I currently only use the @media for 768px or less than standard.

Anyway, this question is for tips on responsive design.

I hope they do not vote against it because, in my view, it is not a vague question.

css responsive-layout
  • 2

    Chrome has a mobile device simulator. Press F12 on your keyboard if you’re Windows to enter Chrome Developer Mode. Then click the mobile device icon that appears in the Console header that opens.

  • 1

    A responsive website can be done in many ways. I particularly use the Mobile First technique. In which I make the site first for small devices and go up the resolution. Yes, using the @media. I suggest you search for Mobile First.

  • 1

    The npm module ripple-Emulator is an excellent option to emulate your site on various devices with different resolutions.

  • Thanks everyone, now yes the sites are getting responsive, I’m using this technique Mobile First, I just changed a little the queries @Media of it

1 answer

5


About simulating the responsive website the modern browsers already have a specific tool for this. Follow screenshot of how to access this feature.

Abrir simulador de device no Chrome

Clicking on this icon will open several options to emulate different Vices, whether it will be in Landscape or Portrait, user agent,nsimular the internet connection etc.

Opções do simulador.

Firefox is the same as Chrome.

Now about media queries in css we have several ways to do, just like we have thousands of combinations of checks like for example, whether it’s screen or print, whether the device will be in landscape or portrait mode etc. You can search in various search sources like firefox MDN explains that part very well.

  • Thanks, I tested here and I have a problem, when selecting a Mobile screen it does not update the layout, it is in the layout of devices with large screens

  • 1

    You may be missing the goal for responsive. Try adding this code snippet at the head of your website <meta name="viewport" content="width=device-width, initial-scale=1">

Browser other questions tagged css responsive-layout

You are not signed in. Login or sign up in order to post.