Magento Question posted in
The official documentation can be found here.

how retina display is concerned with my css and psd's – Magento

I am bit confused in asking this question because i have read all the articles available but still was not able to find something helpful. The problem is I have a psd design in the 2880 px width . Now to convert it to the html and css. I design the page in 2880px width. In the end i find this is not something which i should use. Because on the small screens everything was too big. In the design guidlines for the psds there was written:

This PSD is designed for retina display

How can i use the best practice to achieve this. I have to design it to the 2880 or in the 1440.

P.S : I am very new to the css thing and the challenge is i did not have to use bootstrap this is a simple customization in magento theme.

Tags:

2

Answers


  1. 0

    You have to consider the pixel ratio of screens in mobile side. Remember not all have the same pixel ratio. This will be a good read.

    what exactly is device pixel ratio?

    Mostly small mobile devices have 1.X ratio that cuts off images’ original crispness based on that ratio. Like if your image has 2880px width it will become 1440px or so depends on pixel ratio. You can check the pixel ratio of a device here: https://mydevice.io/devices/

    Once you will know the pixel ratio of the screen then you can control which image needs to be loaded using this CSS for example.

    @media only screen and (min-device-pixel-ratio: 2) {
    .yourClass{ background-image: url('low-resolution.jpeg'); }
}

@media only screen and (min-device-pixel-ratio: 3) {
    .yourClass{ background-image: url('high-resolution.jpeg'); }

    }

    Login or Signup to reply.
  2. 0

    For high-resolution screens like retina you may use media queries to provide alternative sprites and images for better results or just let it upscale by its pixel ratio. useful stuff to read https://www.leemunroe.com/designing-for-high-resolution-retina-displays/

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search