How to choose appropriate CSS styles based on screen size/device

Question

Bootstrap 3 has some nice CSS classes in the responsive utility that can hide or show certain blocks depending on the screen resolutionhttp://getbootstrap.com/css/#responsive-utilities-classes

I have some style rules in a CSS file that I want to apply or not apply based on the screen resolution.

What should I do?

I would compress all the CSS files into one file for production deployment, but if there is no other solution than using separate CSS files for different screen resolutions.

Answer 1

Detection is automatic. You have to specify the css that can be used for each screen resolution:

/* 对于所有屏幕，使用14px字体大小 */
body {  
    font-size: 14px;    
}
/* 响应式，对于小屏幕，使用13px字体大小 */
@media (max-width: 479px) {
    body {
        font-size: 13px;
    }
}

Answer 2

Use @media to query . They fit exactly that need. Here's an example of how they work:

@media (max-width: 800px) {
  /* 在宽度等于或小于 800px 时显示的 CSS 代码放在这里 */
}

This will only work on devices with a width equal to or less than 800px.

Learn more about media queries on the Mozilla Developer Network.