Habits of Highly Effective Media Queries

Let content determine breakpoints

Don't use popular device dimension such as 320px as iPhone portrait,480px asa iPhone landscape or 768px as iPad portrait to determine the breakpoint.The size of portrait and landscape is always changing during the growth of technology.So our jobs are to create the interface that fit and function on any screen

Treat layout as a enhancement

As part of a mobile-first responsive design strategy, it’s important to author our styles in a mobile-first manner.
instead of the Desktop default style,we should use the following

@media all and (min-width:50em){
  .class {

Use relative units

Avoid use pixel-based media query

@media all and (min-width: 800px) {...}

Instead of using pixel media query we use relative units

@media all and (min-width:50em){...}

We use the relative unit in other styles why not use it in media query.We use relative unit so that the browser can adjust the page more smooth and more accessiable because the broswer treat it as a zoom level operation.

Go beyond width

Viewport width isn’t the only thing media queries can detect. There are a ton of media features we can detect, including color, color index, aspect ratio, device aspect ratio, width, device width, height, device height, orientation, monochrome, resolution, scan, pixel-density and more.

For example,we usually detect device's pixel-density to use various resolution image (but now we use srcset),but the media query is widly supported.We use orientation to detect whether the device is landscape or portrait to apply more flexible layout