Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Questions regarding responsive site

Posted on 2016-07-28
6
Medium Priority
?
98 Views
Last Modified: 2016-07-29
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
0
Comment
Question by:MOSTAGHASSI
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 3
6 Comments
 
LVL 5

Expert Comment

by:Eric C
ID: 41734571
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.
0
 

Author Comment

by:MOSTAGHASSI
ID: 41734751
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){
}
0
 
LVL 5

Expert Comment

by:Eric C
ID: 41734822
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

0
Understanding Web Applications

Without even knowing it, most of us are using web applications on a daily basis. Gmail and Yahoo email, Twitter, Facebook, and eBay are used by most of us daily—and they are web applications. We often confuse these web applications tools for websites.  So, what is the difference?

 

Author Comment

by:MOSTAGHASSI
ID: 41734921
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?
0
 
LVL 5

Accepted Solution

by:
Eric C earned 2000 total points
ID: 41734966
the order of the breakpoints is important, as is the designator (min-width) ... you're cascading through the style sheet.

A desktop-first approach is coded the opposite way (so to speak). In comparison to the previous code block, here it is again, but for desktop-first:

/*==========  Non-Mobile First Method  ==========*/

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

}

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

}

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

}

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

}

/* Custom */ 
@media only screen and (max-width : 320px) {
        
}

Open in new window


See the difference?

Whether or not you adapt the mobile-first approach should be dependent on the website or web application you are building. For example, if you are writing a website for internal use at an accounting firm and you know 90% of the time it will be viewed on a large screen, then you might want to design a separate mobile app (another story altogether!) or a mobile version of the site (I am not a fan of this), or just put emphasis on the desktop experience and maybe strip down the mobile experience. In this case, maybe the desktop-first approach is best.

I don't know of a way to "combine" the code into one. (The entire purpose of media queries is so that you can change your styles on the fly, according to the screen size that the device falls under. For example, on a small screen you might want to style small, in-line links as buttons, so it's easier to press with your finger). But the code block I gave you is just an example, If you don't want one of those breakpoints, just remove it. The trick is to ensure that every screen size (in pixels) will fall into ONE of the media queries.

So for example, if you don't need special styling between 320 and 767 pixels, just remove the query at 480px. There's no rule that says you MUST use different styling at specific sizes.
0
 

Author Closing Comment

by:MOSTAGHASSI
ID: 41735056
Thank you very much.
0

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Does your audience prefer people in photos or no people? How can you best highlight what you’re selling? What are your competitors doing, and what can you do that is different and unique from them?  Continue reading to learn how to make your images …
Although a lot of people devote their energy toward marketing for specific industries, there are some basic principles that can be applied to any sector imaginable. We’ll look at four steps to take and examine how those steps were put into action fo…
This tutorial walks through the best practices in adding a local business to Google Maps including how to properly search for duplicates, marker placement, and inputing business details. Login to your Google Account, then search for "Google Mapmaker…
The viewer will learn how to count occurrences of each item in an array.
Suggested Courses

721 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question