Changing css as per screen resolution

Question

My webpage is showing different sized text in different computer resolutions. I need to fix it using CSS.

I have idea about screen-size and how to do it using CSS. I applied that in my webpage but its not affecting the other desktops and laptops, having different screen resolution.

Can anybody help me out to fix this issue and if there is any way out to change CSS based on screen resolution.

Thanks.

Where is your code? What have you tried? [How to ask](http://stackoverflow.com/help/how-to-ask) — hungerstar, Oct 29 '15 at 13:39

Nikolaj Zander · Answer 1 · 2015-10-29T13:46:49.917

0

You should use media-queries like:

@media screen and (min-width: 480px) {
     body {font-size: 12px;}
}

you can use min-width, max-width and also mix these

for full details check out this page: Media Queries CSS

Most common Queries are:

Small devices (tablets, 768px and up): @media (min-width: 768px)

Medium devices (desktops, 992px and up): @media (min-width: 992px)

Large devices (large desktops, 1200px and up): @media (min-width: 1200px)

edited Oct 29 '15 at 13:46

answered Oct 29 '15 at 13:33

Nikolaj Zander

1,270
9
13

My screen resolution is 1600 X 900. So, it means that my screen width is 1600? right? – Agnib Oct 29 '15 at 13:40
The querie uses the size of the browser window. so if you are using your browser in full screen the width should be 1600. – Nikolaj Zander Oct 29 '15 at 13:44

score 0 · Answer 2 · answered Oct 29 '15 at 13:33

0

You should use media Queries like this-

@media (min-width: 700px), handheld and (orientation: landscape) { ... }

Go with the link for more details -

Link

and also don't forget meta tag in head

<meta name="viewport" content="width=device-width, initial-scale=1">

answered Oct 29 '15 at 13:33

Mukul Kant

7,074
5
38
53

My screen resolution is 1600 X 900. So, it means that my screen width is 1600? right? – Agnib Oct 29 '15 at 13:41

Changing css as per screen resolution

2 Answers2