psd to html 1920X1080

Question

I have file .psd with sizes 1920X1080. I need to make responsive website that will look good for small and big screens. I have made from this psd html with pixel perfect technic. I just don't understand how to make from it design for smaller screens. Please advise.

Answer 1

Using CCS3 media queries! Example for Desktop first:

// Your code for Desktop devices

@media only screen and (max-width: 768px) {
  // Here your code for mobile
}

or for Mobile First

// Your code for Mobile devices

@media only screen and (min-width: 768px) {
  // Here your code for tablet
}

@media only screen and (min-width: 992px) {
  // Here your code for Small Desktop
}

Different rules:

@media screen and (max-width: 992px) and (max-height: 700px) {
      // Code
}

or:

@media screen and (max-width: 992px) and (min-height: 400px) {
      // Code
}

These are only some example. You must study media queries.