Select Media query based on design is not based on mobile devices

Article Introduction: a media query based on design.

At the outset, we had used media queries from specific mobile devices on our site and served us, because we just needed an emergency response design solution to suit the iphone and the screen-like smartphones. "

But as a lot of mobile devices are constantly being marketed, it's time to reconsider using common response design breakpoints in our design. Why, then? Because the original method of reuse is not high. We also have to change the reasons why we need to change the original method and why we have to set our response design breakpoints at these special points.

I'll start the discussion around "design-based media queries" (compared to our common media queries based on mobile devices). This kind of response web design method can make our website technology not obsolete and as far as possible to maintain the device platform independent.

Why our media inquiries need to be changed

The media inquiries we are using are generally based on the screen resolution of the current popular mobile devices.

First, as the web design community begins to focus on responsive web design, popular mobile devices are counting iphones and Android smartphones.

Well, there's not much to talk about. Media queries on mobile devices are conceptually like this:

/* iPhone 和 其它智能手机 (portrait) */
			@media screen and (max-device-width: 320px) {  }  /* iPhone and other  其它智能手机 (landscape) */
			@media screen and (max-device-width: 480px) {  
 
Just as technology is constantly being updated, especially with the growing tablet and retina displays, it means that the screen size and screen resolution are expanding. So we are going to enhance and expand our media inquiries for these new mobile devices.
 
To be compatible with a new batch of products, the media query will look like this:
 
/* iPhone and other smartphones (portrait) */
			@media screen and (max-device-width: 320px) {  }  /* iPhone and other smartphones (landscape) */
			@media screen and (max-device-width: 480px) {  }  /* iPad and other tablets (portrait) */
			@media screen and (max-device-width: 768px) {  }  /* iPad and other tablets (landscape) */
			@media screen and (max-device-width: 1024px) {  }  /* iPhone 5 (portrait) */
			@media screen and (max-device-width: 568px) and (orientation: portrait) {  }  /* iPhone 5 (landscape) */
			@media screen and (max-device-width: 568px) and (orientation: landscape) {  
 
The Samsung Galaxy phone is really popular now, so we should also include it in the list of media inquiries we need to collect:
 
/* Samsung Galaxy (portrait) */
			@media screen and (max-width: 385px) {  }  /* Samsung Galaxy (landscape) */
			@media screen and (max-width: 690px) {  }  /* iPhone and other smartphones (portrait) */
			@media screen and (max-device-width: 320px) {  }  /* iPhone and other smartphones (landscape) */
			@media screen and (max-device-width: 480px) {  }  /* iPad and other tablets (portrait) */
			@media screen and (max-device-width: 768px) {  }  /* iPad and other tablets (landscape) */
			@media screen and (max-device-width: 1024px) {  }  /* iPhone 5 (portrait) */
			@media screen and (max-device-width: 568px) and (orientation: portrait) {  }  /* iPhone 5 (landscape) */
			@media screen and (max-device-width: 568px) and (orientation: landscape) {  
 
So, what about Amazon's ebook reader kindle? Or the ipad Mini?
 
Don't worry, there are a series of media inquiries ready for the Kindle (or other mobile device), and a series of media inquiries for Apple-specific products, such as the IPad Mini, IPhone 2G, and so on. This helps us to expand our collection of media queries.
 
To show you all these reasons is to show how this kind of response web design approach does not work well.
 
Designing a site in this way contradicts an important principle of web design, so we need to work on the goal that there should be no obvious difference between a PC Web page and a mobile Web page. Ideally, there should be only one common Web page.
 
Based on a small number of specific mobile devices to set up our media inquiries, we are effectively creating not only simply separate mobile Web pages, but should be the iphone page, Android Web page, BlackBerry page and so on.
 
This approach to responsive web design can lead us to a place where the decisions we make unintentionally create designs based on these mobile devices. The situation is so strikingly similar in the browser wars.
 
Instead of getting a list of the size of the Android screen or a responsive design breakpoint that is now popular, we should really ask another question:
 
What kind of breakpoint should I choose for this particular design?
 
If our web design wants to become obsolete, perhaps, more importantly, Web pages need to be generic-our media inquiries are based on our web design rather than the current mobile device.
 

Why old breakpoints don't work 
 with a practical example, let's see how setting up a media query based on a particular mobile device will not work. 
 
 In order to have a responsive web design, my company's website--compass designs, originally was created with 3-range media query: 
 
/* iPad (  Portrait) */@media screen and (max-width:760px) {}/* Smartphones (Landscape)/@media screen and Max-width: 480px) {}/* Smartphones (Portrait)/@media screen and (max-width:320px) {}  
 
 In the early years, when most people use IPH One 4 or similar screen (320x480px), or the ipad (760x1024px), these media queries are defined. So, on these mobile devices, these web pages are very well designed to work. The page layout on the 
 
 Desktop is fairly standard, and a horizontal navigation menu with a navigation bar is on the right side of the page content. 
 
 
 
 However, this layout does not appear to be normal on a tablet computer. The layout of the navigation bar menu changes all of its contents to fit the tablet's available space: 
 
 
 
 And the layout is different on the smartphone display, this time with a linked navigation menu, moved to the bottom of the page: 
 
 

My response design doesn't work! 
 The number of mobile devices accessing it has increased very rapidly since the site was designed. 
 
 For example: 
 
  
   
 
   
    
 iPhone 5 is 568 px Widescreen mode 
 
   
    
 Many Android smartphones are large-screen (such as Samsung Galaxy, resolution is 380 x685px) 
 
   
     when my site was originally designed, smaller tablets have been released, with tablets having a 7-inch screen rather than a 10-inch screen (although some, such as the mini ipad, can still run if they have the same pixel size as the larger scale of the same series)  
   
  
   
 
 Let's take a look at this site displayed on the iphone 5. Because the iphone 5 is more widescreen than 480px, the smartphone is using a layout designed for the tablet, which will be displayed as a broken navigation menu: 
 
 
 
 This example, I would like to express is that it is not feasible to use mobile devices as a response to guide our web design. 
 
 As the number of mobile devices continues to increase, it is not possible to predict on which device our design will be displayed. And it is impossible to predict what new devices will enter the market, or to do so, no matter what our web design will face. 
 
 What we need to do is to determine at some point in our web design that we should stop running the way we designed it, and then set our response breakpoint there. 
 

Design based media query in action 
 New media queries on my site are based on two guidelines: 
 
 
   
 
  
    
 content layouts need to accommodate any mobile device width, so content is easier to read. 
 
  
    
 on touch screens and mobile devices: navigation menu items need to be large enough so that users can easily place them. The 
 
 
   
 
 Desktop layout contains a Full-screen navigation menu. This layout encounters a 1005px widescreen, at which point some navigation menu items begin to flow out to the bottom, as follows: 
 
 
 
 Because this particular web design breaks the layout just in the 1005px widescreen, I decided to set a breakpoint there because of the number and length of navigation menu items: 
 
/* breakpoint #1 for medium-sized screens */@media screen and (max-width: 1005px) {}  
 
 Note My style notes and two guidelines, and I have deleted any references to any particular mobile device. 
 
 From the above 1005px widescreen, constantly reduce the screen width, the layout will be destroyed at 745px, you can see the effect of the screenshot as follows: 
 
 
 
 So I set another breakpoint in 745px: 
 
/* breakpoint #2 for small-sized screens */@media screen and (max-width:74 5px) {}  
 
 Layout is now displayed in 745px: 
 
 
 
 The site now has a series of breakpoints that are completely unrelated to mobile devices, and ensures that the designs will be adapted to any mobile device in the best way possible. 
 
 Core idea: We should choose which media queries are based on design, not on specific mobile devices. 
 

Leads to a common web
Based on the idea of the design of the media query is very simple, take the concept of the Web design project can be adjusted in your browser which layout of the point of destruction, and then as my example, set the media query at that point.
Our current use of "standard" media queries can easily ignore the rapidly growing number of mobile devices and do not match the size of products produced by Apple, Samsung, Sony and other device manufacturers. Building a Web site based on a specific device media query, which is outdated and relevant to the device.
If we want to continue to adhere to the best of the Web, we will continually create a generic web--web that is not driven and guided by a particular mobile device, or Web browser, or a company--and then all we have to do is stay away from media queries for specific mobile devices.

Extended Reading
  
   
 
   
    
Responsive Web design isn't the Future
 
   
    
Understanding the Elements of responsive Web design
 
   
    
Are current WEB design Trends pushing Us back to 1999?
 
   
    
Responsive
 
  
   
Translator's Sign Language: The entire translation is carried out according to the original line, and in the process of translation slightly individual understanding of the technology. If the translation has the wrong place, but also please peer friends pointing. Thank you!
If you want to reprint, please indicate the source:
Original English: http://sixrevisions.com/web_design/design-based-media-queries/
Chinese translation: http://www.w3cplus.com/css3/design-based-media-queries.html