From figma to pixel perfect

Question

I have a figma design which I am to convert to a html and css template. There is only a dimension of 1440px for the design with. On which screen size should I start coding? Should I start on width 1440px and scale down/up to other screen size or start from mobile then scale up to other screen size?

What are the best practices to ensure responsiveness on different screen size?

Answer 1

The simplest way is to start with a larger screen size you need to take care of.

Here is a simple set of media-query CSS to get you started:

/* for 1200px or over */
.example {
}
/* 1199~992px */
@media screen and (max-width: 1199px) {
  .example {
  }
}
/* 991~768px */
@media screen and (max-width: 991px) {
  .example {
  }
}
/* 767~480px */
@media screen and (max-width: 767px) {
  .example {
  }
}
/* below 479px */
@media screen and (max-width: 479px) {
  .example {
  }
}

Answer 2

Start from the mobile device as it will be easier for you to implement the product If you start on mobile, you can easily implement elements and components on larger devices