How to master responsive Web design

Are you still struggling to make your site responsive? I know beginners can surf the web (I’ve done this before) to make the site responsive, but all they get is an explanation of small concepts.

In this article, I’ll talk about everything you can learn about responsive web design.

Know responsive design and adaptive design

responsive

  • Dynamic changes in the look and feel of the site.
  • Depends on the screen size and orientation of the device.

Strong adaptability

  • Adaptive design uses a few fixed layouts and then selects the best layout for the current screen size.

Use relative units

Start using relative units instead of absolute units.

Absolute units => do not use {cm, mm, in, PC, px, pt}

Relative units => use {em, rem, lh, vw, vh}

Divide the design into breakpoints

Breakpoints are predefined measurement areas that let you rearrange your Web layout based on the size of your browser or device.

Boot response breakpoint

  • Small devices =@media (min-width:576px) {... }
  • Medium equipment =@media (min-width:768px) {... }
  • Large equipment =@media (min-width:992px) {... }
  • Extra large equipment =@media (min-width:1200px) {... }

Understand maxima and minima

Know when to use Max and min values.

  • It works when the device width is greater than or equal to 1024px.
@media (min-width: 1024px) {h1 {
      font-size: 1rem; }}Copy the code

It works when the device is less than or equal to 1024px

@media (max-width: 1024px) {h1 {
      font-size: 0.5 rem; }}Copy the code

Use nested objects

A nested object or container is an object inside another object.

It allows you to control nested elements rather than having to control each element all the time.

<div class="parent">
   <span class="nested-element-1">Read</span>
   <p class="nested-element-1">RAHULISM></p>
   <p class="nested-element-1">Articles</p>
</div>

<! -- STYLE -->
<style>   
  .parent span {
    color: black;
  }
  .parent p {
    color: blue;
  }
</style>  
Copy the code

Mobile or PC is preferred

When is “PC first” appropriate

  • When PC sales are high
  • Rich user interface
  • Focus on complex and enhanced visuals
  • Sites with productivity tools or business-related services
  • Highly refined user experience

When is “mobile first” appropriate

  • Simple and minimalist site
  • The user experience is optimized for mobile devices
  • Entertainment, news, or other mobile categories.

Understand Web VS System fonts

Every font or font loaded on your site will be sent to the server with a request and then returned.

  • The system font is the default font and can be loaded quickly
  • Web fonts reduce load time for users browsing your site

Some secure Web fonts are provided correctly

Georgia, Times New Roman/Times, Arial / Helvetica, Comic Sans, Lucida Sans Unicode, Tahoma / Geneva, Courier New.

Bitmap vs Vector images

Bitmap images are stored as a series of tiny dots called pixels,

A vector image is a work of art made up of points, lines and curves based on mathematical equations rather than monochromatic square pixels.

Which one? Vector images: More scalable than Bitmap images, increasing the size of graphics without pixelation and better quality.

Author public number: la la la want biu what point

Pay attention to support it, I will continue to update the free fun H5 small game code, Java small game code, fun, practical projects and software

Finally, don’t forget ❤ or 📑 support the author