How to target a specific screen size using @media media query?

Question

I am new to responsive design, I am toying with twitter bootstrap responsive.css now. And I am encountering some trouble with my project.

The trouble is, my left column

Answer 1

One extra and interesting feaure is that you can also use-media queries in the media attribute of the tag.

With this, the browser will download all CSS resources, regardless of the media attribute. The difference is that if the media-query of the media attribute is evaluated to false then that .css file and his content will not be render-blocking.

Therefore, it is recommended to use the media attribute in the tag since it guarantees a better user experience.

Here you can read a Google article about this issue https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-blocking-css

Some tools that will help you to automate the separation of your css code in different files according to your media-querys

Webpack https://www.npmjs.com/package/media-query-plugin https://www.npmjs.com/package/media-query-splitting-plugin

PostCSS https://www.npmjs.com/package/postcss-extract-media-query