The technique of responsive design media queries

Article Introduction: in this article, you will be briefed on some of the things you need to be aware of to develop high-quality media queries.

As we all know, Media queries is a secret weapon to implement responsive design. In this article, you will be briefed on some of the things you need to be aware of to develop high-quality media queries.

Let content determine breakpoints

Most of the time, in the response design, you often see the breakpoint values are: 320px, 480px, 768px and 1024px, and so on.

Do not use the popular equipment size (320px is the iphone device's vertical screen size, 480 is the iphone device horizontal screen size, 768px is the ipad vertical screen size, etc.) to determine the breakpoint. The device's screen (Device landscape) is constantly changing, so using the size of a pop device as a breakpoint, his actual value may not be as meaningful as it might be in a year's time. The web is inherently mobile, so our job is to create the appearance, functionality, and so on any screen, rather than a few simple breakpoints.

The reason I created Ish was to encourage designers to consider the entire resolution, not just the few device sizes that are popular today. Please try "Disco Mode" to give your design a stress test.

So where should you insert breakpoints, you should follow the advice of Stephen Hay:

Start with the small screen-then expand until it looks like shit. Time for a breakpoint!-stephe Hay.

It's so simple.

Extended Reading

• Determining breakpoints in responsive
• Fanfare for the Common breakpoint
• There is No breakpoint
• Choosing device sizes to support for your responsive designs
• The in-between

The layout as an added

The absence of support for media queries are in fact Thefirst media query. -bryan Rieger

As a mobile first response design strategy, it is important for us to have a moving-first style.

So this thing is interesting:

/* 桌面第一风格:避免 */
			.column
			{     float: left;
					width:
									50%;
					}
			@media all and (max-width: 50em) {     .column
			{         float: none;
					width: auto;
					

当我们想只介绍布局的具体规则时，我们需要他们：

				/* 先动先行的风格： FTW */
				@media all and (min-width: 50em) {     .column
				{         float: left;
						width:
										50%;
						} } 

移动先行将导致的结果是更简单，更易于维护你的代码。这种方法还提供了对老的并不支持媒体查询的移动端浏览器的更友好支持。

扩展阅读

• Creating a Mobile-First Responsive Web Design
• Essential considerations for crafting quality media queries

Use primary and secondary breakpoints

It is important to understand that not every design needs to be cleverly integrated into small, medium, and large breakpoints. Of course, sometimes a website is designed to have some dramatic things happen, such as when a column becomes two in three columns. This time, the key point is to hold them at the main breakpoint when there will be this dramatic scene happening.

I use SASS to control my breakpoints, so according to different designs, my main breakpoint variable looks like this:

 

如果您从未接触过Sass的任何知识，个人建议您先抽空了解一些Sass方面的知识，如果你感兴趣，可以点击这里查阅——大漠

 

但在一些设计中，有一些特殊元素之间的值需要调整。这样一来就可以为这些特定的元素添加一个小断点（如Jeremy Keith所说的tweakpoint）。

回到我的Sass中，我在主要断点之间插入了次要断点，类型于：

$bp-small : 24em; $bp-small-2 : 29.75em; $bp-small-3 : 39.8em; $bp-med : 46.8em; $bp-med-2 : 48em; $bp-large : 50em; $bp-large-2 : 54.5em; $bp-xl : 60em; $bp-xl-2 : 67em; 

这种方法是否也适合你呢？

至于如何看待主要断点和次要断点，主要取决于你，但重要的是要利用这两类断点。

扩展阅读

• Tweakpoints
• Pragmatic Responsive Design

Use relative units

I often like to use my back to the chair using my computer, so I often use CMD + to enlarge the website text. When we use a breakpoint using a pixel, the page is placed in a horizontal scroll bar and does not work properly.

/* Avoid pixel-based media queries */
							

Pixels should not be used, we should use relative units for our media queries.

/* use EMS for media queries */@media all and (Min-width:50em) {...} 

首先在样式中，我们都放弃了对像素(px)的使用，在使用em、rem和百分比(%)，那么我们为什么不能将这些相对单位运用到媒体查询中呢？其次，在媒体查询中使用相对单位允许浏览来调整设计基于用户缩放的级别，让用户有一个更愉快、更容易阅读的用户体验。

看，就像老人家的视力！

扩展阅读

• The Ems Have It: Proportional Media Queries FTW
• Tweaking Huffduffer

超越宽度

视窗（Viewport）宽度不是唯一的媒体查询可检测的。有很多媒体特性我们可以检测，包括颜色、颜色指数、纵横比、宽度以及装置设备宽度、高度和设计高度、方位、单色、分辨率、扫描、像素密度等等。

虽然我不知道这么一大堆的东西是什么，但有几个真正有用的功能，可以帮助我们：

• 使用pix-density可以有条件的提供更大的背景图、视网膜图标和高分辨率屏幕；
• 使用height可以检测可用的屏幕高度，并调整相应的样式风格。例如，在这个网站我想根据高度来扩展我的标题类型；
• 使用orientation来检测屏幕是横向还是纵向模式。取向可以用于有条件的禁用固定定位，并释放出屏幕可用空间。

我肯定有很多惊人的用例使用了这些媒体特性，所以看看通过他们，考虑如何利用这些媒体特性用在你的设计中。

扩展阅读

• MDN: CSS media queries
• Vertical Media Queries and Wide Sites
• Using CSS Sprites to optimize your website for Retina Displays

Conditional loading using media queries

The Web page contains some valuable things and some worthless things. For example, your friend shared a link on your page and said, "Look at these cute kitty photos" And what you're eager to find out about the links, what would you expect to see first? In this case, the cute kitten photos are worthless things.

But there may be something else on the page that is worthless. There may be a feature to comment on the cute kitten picture. Maybe some social gadgets share photos of cute kittens. Related pictures How to introduce the cute kitten, you know. And these features added to the value of the page, not too much value. What we want to do is to prioritize the main content while still providing additional content and functionality.

All we can do is put the worthless stuff in our HTML block, and the content will be displayed again when it meets the requirements.

We can use Matchmedia to make things happen. Matchmedia allows JavaScript to use all media queries to improve. He looks like this:

if (window.matchMedia("(min-width: 40em)").matches) {   

当正确的条件存在，我们就加载二级内容。

MatchMedia得到很好的支持以及Polyfill也可以使用。

有条件的加载是其中管委会最强大的工具。它允许我们优先考虑核心的内容和性能，同时仍然提供一个健壮的、全功能的体验环境。

扩展阅读

• An Ajax-Include Pattern for Modular Content
• Conditional Loading for Responsive Designs
• Conditional loading of resources with mediaqueries
• Clean Conditional Loading

不要做得太过火

使用响应式设计，很容易陷入所有媒体查询的魔法和变得有点疯狂。虽然媒体查询非常有趣，但在设计中使用大量的复杂性会让你变得难堪。我们已经不得不花很多时间去处理这些复杂性：设备屏幕，令人眼花缭乱的浏览器和设备，为了让客户和队友使用更加的舒服。我非常喜欢Lyza的建议尽可能少。这绝对是符合我们的利益以及追求简单的页面格局。

就这样，现在就开始动手查询你的媒体查询。

译者手语：整个翻译依照原文线路进行，并在翻译过程略加了个人对技术的理解。如果翻译有不对之处，还烦请同行朋友指点。谢谢！

英文原文：http://bradfrostweb.com/blog/post/7-habits-of-highly-effective-media-queries/

中文译文：http://www.w3cplus.com/css3/7-habits-of-highly-effective-media-queries.html