CODEWITHSUNDEEP
htmlcssfrontendfigmapixel-perfect
Adenuga Adesanya
Adenuga Adesanya

Reputation: 11

From figma to pixel perfect

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?

Upvotes: -1

Views: 623

Answers (2)

Milad Davari
Milad Davari

Reputation: 1

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

Upvotes: 0

Anthony
Anthony

Reputation: 133

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 {
  }
}

Upvotes: 0

Related Questions