divinedesigns1 Posted June 30, 2015 Share Posted June 30, 2015 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 Link to comment Share on other sites More sharing options...
Ingolme Posted June 30, 2015 Share Posted June 30, 2015 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. Link to comment Share on other sites More sharing options...
divinedesigns1 Posted June 30, 2015 Author Share Posted June 30, 2015 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 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now