Link to home
Create AccountLog in
Avatar of MOSTAGHASSI
MOSTAGHASSIFlag for United States of America

asked on

Questions regarding responsive site

Hello;

I want to redesign a site for responsive and have 2 questions:

1-What is the standard size (min-max) for mobile,tablet,and desktop?please write the @media query for each one,my mean is only determine min and max for each device that cover also the
landscape
and
portrait
for mobile.

2-For a website with medium size  (php+mysql) that we want be responsive is it better that for each device we create one css file so 3 css files for website or one css file is ok that we put all 3 @media queries in that?

Thanks
Avatar of Eric C
Eric C
Flag of United States of America image

Consider using/learning Bootstrap or Foundation. These responsive frameworks come with all of the media quieries/break points. Because they've been around for a while and are (very) popular, they seem to have adopted a 'standard'.

Here are the breakpoints that Bootstrap uses:
< 768   extra small
>= 768  small
>= 992 medium
>= 1200 large

http://getbootstrap.com/css/  shows the media queries.
And yes, you can put them all into one style sheet.

You can of course change these if you have a specific application.
Avatar of MOSTAGHASSI

ASKER

Thanks,yes i know about Bootstrap or Foundation but i prefer to have my own design and use from some components of Bootstrap or Foundation like 'navigation'.

I want put breakpoints in  media query for 3 devices(mobile-tablet-desktop) in css file,please write the correct media query for these 3 devices.

For example for mobile (this is an example ,please writ the right and common amount in pixel :
@media ( max-width:580px){
}
There are two schools of thought when it comes to responsive design
   - mobile-first (recommended)
   - desktop-first

Here are some breakpoints you can start with, using the mobile-first approach:


/*==========  Mobile First Method  ==========*/

/* Custom, example, smallest minimum breakpoint */ 
@media only screen and (min-width : 320px) {
    
}

/* Extra Small Devices, Phones */ 
@media only screen and (min-width : 480px) {
    
}

/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {
    
}

/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {
    
}

/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {
    
}

Open in new window

Yesterday i had a question in this regard that "must we design first for mobile or desktop?" but because nobody answer it i thought that it is a potty question and then i deleted that Q!!.

But it is important as you said,so i have some question regarding your codes:

-The order of @media{} in css file is important for  mobile-first (recommended) or desktop-first?

-Is it possible that we combine the codes so we have one @media{} for each device?
Because i think in my case it is no different between 320px and 480px(for mobile) ,but like that site be good in these ranges,so putting @media{max-width=480px}  for mobile cover all size below also? or we must set separately for 320px and 480px?
ASKER CERTIFIED SOLUTION
Avatar of Eric C
Eric C
Flag of United States of America image

Link to home
membership
Create an account to see this answer
Signing up is free. No credit card required.
Create Account
Thank you very much.