@media screen sizes

[divinedesigns1]

does anyone know the correct @media query usages, i was trying to use max-width so it can have the different screens for the devices, buttt it was messing with the other query, should i use min-width instead?

 

next, do anyone know the screen sides for devices? or a link to them? been looking but didnt get much luck

[Ingolme]

Choose whether you want to go mobile-first or desktop-first.

 

If you are going desktop-first then code all your CSS for a desktop website. If you're going mobile-first, code your CSS exclusively for small screens.

 

After you have done making your design you start adding media queries.

 

If you're going desktop-first, then resize the window until your site breaks. Make a media query with max-width set to the width at which the page broke and use CSS to rearrange things. Then continue resizing the window until the page breaks again, then add another media query. Media queries should go at the end of the stylesheet and in order from highest resolution to lowest.

 

If you're going mobile first, start with a small screen, about 320 pixels wide, and go increasing the size until the page looks like it's too wide, then you can use media queries with the min-width property to rearrange things and stack things horizontally. Media queries should go in order from smallest resolution to highest resolution.

[divinedesigns1]

Choose whether you want to go mobile-first or desktop-first.

 

If you are going desktop-first then code all your CSS for a desktop website. If you're going mobile-first, code your CSS exclusively for small screens.

 

After you have done making your design you start adding media queries.

 

If you're going desktop-first, then resize the window until your site breaks. Make a media query with max-width set to the width at which the page broke and use CSS to rearrange things. Then continue resizing the window until the page breaks again, then add another media query. Media queries should go at the end of the stylesheet and in order from highest resolution to lowest.

 

If you're going mobile first, start with a small screen, about 320 pixels wide, and go increasing the size until the page looks like it's too wide, then you can use media queries with the min-width property to rearrange things and stack things horizontally. Media queries should go in order from smallest resolution to highest resolution.

thanks