Screen resolution

Question

How can I make my web page compatible to all screen resolutions?

Answer 1

Mike Choy
wOW
great answer!

Answer 2

Resolution:

The resolution CSS @media media feature can be used to apply styles based on the pixel density of the output device.

Syntax

The resolution feature is specified as a <resolution> value representing the pixel density of the output device. It is a range feature, meaning that you can also use the prefixed min-resolution and max-resolution variants to query minimum and maximum values, respectively.

Example

HTML:

<p>This is a test of your device's pixel density.</p>

CSS:

/* Exact resolution */ @media (resolution: 150dpi) { p { color: red; } } /* Minimum resolution */ @media (min-resolution: 72dpi) { p { font-size: 1.5em; } } /* Maximum resolution */ @media (max-resolution: 300dpi) { p { background: yellow; } }

Answer 3

Use viewport units
https://css-tricks.com/fun-viewport-units/

Answer 4

in css use the percent:
example
p{height: 30 %}

because if you do that, the paragraph will be forever the 30% of the page

Answer 5

Thanks.
And if I use percent for the body tag in CSS?

Answer 6

It's working, but when I set the minimum resolution for example too small. My web page will not working on mobile phones.