Static QR Page Challenge Solution

Community feedback

• 

  Shivangam Soni•1,030

  @ShivangamSoniPosted over 1 year ago

  What are some best practices when using @media for different displays?

  • When it comes to best practices, most people like to go for Mobile-First Approach. Where the initial CSS Styling is done for Mobile UI & then you use media-query to change the UI for Larger Screens.
  • Secondly, the way in which you should use media-query is that once at lest one UI Styling is done (Desktop or Mobile). You use Browser Dev tool to adjust the screen size, & observe the Size at which the UI starts to break (Overflow, Font looks too large, etc.).
  • Right now if we look at your solution, you are changing the Styles at 1440px, even though around 740-800px there is enough screen left around that you can adjust the size & make the Card a bit larger.

  For text size is it more common to use px values or use relative units such as em/rem?

  • It's more common & best practice to use em & rem.
  • Using Relative units, we get the advantage that we can adjust the font in one shot using media-query & root instead of setting it for every element separately

  @media screen and (min-width: 1040px)
  { 
    html {
      fontsize: 0.75rem;
    } 
  }
  

  • You'll notice that even for readjusting the Font, I've used rem the reason is that it provides advantage in terms of User Experience. If some user sets a different default font-size using their browser setting using rem we will be basically respecting that & building on top of it. whereas if you were to set px values, the user's preferences are of no use.

  Marked as helpful

  1
• 

  Danish Mushtaq•310

  @Danish49Posted over 1 year ago

  using pixels is not a best practice dear, rather use rem or em units. when using media queries always decrease the font size of HTML when moving from a large screen to a smaller screen.

  @media(max-width:1024px){ html{ fontsize:62.5%; } }

  @media(max-width:768px){ html{ fontsize:55%; } }

  @media(max-width:549px){ html{ fontsize:50%; } }

  This way the root font size will get decreased when the viewport hits these breakpoints, the breakpoints i used in above code are for example only.

  Marked as helpful

  1