Need help with media and min-device-width

HTML & CSS
1

Hi, :slight_smile:

Need some help with css…

My website will have 2css…
<link rel=“stylesheet” media=“only screen and (min-device-width: 1270px) and (min-device-height: 1020px)” href=“style1020.css” />
<link rel=“stylesheet” media=“only screen and (min-device-width: 1600px) and (min-device-width: 1200px)” href=“style1200.css” />

When i use 1920*1080 resolution website uses style1200.css . In my opinion it shouldnt use it! Why and how to fix it.

2

Maybe a typo? :eyebrow:

<link rel="stylesheet" media="only screen and ([COLOR="#FF0000"]min[/COLOR]-device-width: 1270px) and ([COLOR="#FF0000"]min[/COLOR]-device-height: 1020px)" href="style1020.css" />
<link rel="stylesheet" media="only screen and ([COLOR="#FF0000"]min[/COLOR]-device-width: 1600px) and ([COLOR="#FF0000"]min[/COLOR]-device-width: 1200px)" href="style1200.css" />

The larger ones need to be max-device-width.

But also, if all your styles are served via @media, be aware that IE8 and under will get no styles.

3

Make sure you use the meta viewport tag and its probably best to check layout width rather than device width. More info here.

Rather than being fixated on device sizes it would be better to set breakpoints at the size that your design actually needs it. In a fluid site you only need to cater for when the layout can’t shrink any more or expands too much. Intermediate widths can be catered for by the fluid nature of the site. Fixed width sites though may need to be more specific which is why fluid/elastic is better for a responsive design.