-1

I want to design a responsive webview for my application based on ionic 2. But in CSS we use PX unit that I think this not consider something like resolution. Is anyway for design based on something like this?

Mohsen
  • 1,415
  • 1
  • 13
  • 26
  • 1
    Take a look at this question: [What exactly is device pixel ratio?](https://stackoverflow.com/questions/8785643/what-exactly-is-device-pixel-ratio). Maybe the answers are helpful. – insertusernamehere Sep 10 '17 at 10:39
  • Also check `device-width` vs `width` in media queries. – connexo Sep 10 '17 at 10:52

1 Answers1

0

By using @media queries within your CSS, you can find the "px" measurement of devices accessing your pages. For each query, CSS can be modified to be displayed differently. Please see attached W3Schools link for explanation of its uses.

https://www.w3schools.com/css/css_rwd_mediaqueries.asp

The following github repository provides a template of media queries of which can be used to allow for many device types and resolutions.

https://gist.github.com/marcobarbosa/798569

For example:

@media only screen 
and (min-width : 321px) {
/* Insert styles here */
}

If the resolution width (in px) is at a minimum of 321px, the styles within will be used.

Click the following link and resize the result frame. This gives an example of media query use.

https://www.w3schools.com/css/tryit.asp?filename=tryresponsive_mediaquery

Ballard
  • 869
  • 11
  • 25
  • I think `resolution = px / size` and I guess you think `resolution = px` ! for example if I have a 4k lcd on device probably I have many pixel on it! – Mohsen Sep 10 '17 at 10:30
  • If you have a device with 1080 resolution, it is therefore 1080px in width – Ballard Sep 10 '17 at 10:34
  • 3840 pixels = 4k etc. – Ballard Sep 10 '17 at 10:34
  • Oops! So how can I recognize difference between tablet and a 4k smart phone with media query? – Mohsen Sep 10 '17 at 10:36
  • if you look at the github template in my answer, you will see that there are several @media queries. if the resolution of a device = 321px, it will use the css within. If the resolution of a device = 3840px it will use that css instead. – Ballard Sep 10 '17 at 10:37