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

Question

Bootstrap3 has some nice CSS classes in responsive utilities that can hide or show certain blocks depending on the screen resolution http://getbootstrap.com/css/#responsive-utilities-classes I have some in a CSS file Style rules that I want to apply or not apply based on the screen resolution. How do I do this? I will compress all the CSS files into one file for production deployment, but if there is no other solution, just resolve for different screens

P粉668019339 · Answer

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;
    }
}

P粉145543872 · Answer

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.