如何根据屏幕尺寸/设备使用特定的 CSS 样式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21075983/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to use particular CSS styles based on screen size / device
提问by Zelid
Bootstrap 3 has nice CSS classes in responsive utilities that allow me to hide or show some blocks depending upon the screen resolution http://getbootstrap.com/css/#responsive-utilities-classes
Bootstrap 3 在响应式实用程序中有很好的 CSS 类，允许我根据屏幕分辨率隐藏或显示一些块 http://getbootstrap.com/css/#responsive-utilities-classes
I have some style rules in a CSS file that I want to be applied or not based on screen resolution.
我想根据屏幕分辨率应用或不应用 CSS 文件中的一些样式规则。
How can I do it?
我该怎么做？
I'm going to minimize all my CSS files into the one on production deployment, but this could be avoided if there are no other solutions than having separate CSS files for different screen resolutions.
我将在生产部署中将所有 CSS 文件最小化，但如果除了针对不同屏幕分辨率使用单独的 CSS 文件之外没有其他解决方案，则可以避免这种情况。
回答by Ranveer
Use @mediaqueries. They serve this exact purpose. Here's an example how they work:
使用@media查询。他们服务于这个确切的目的。以下是它们如何工作的示例：
@media (max-width: 800px) {
/* CSS that should be displayed if width is equal to or less than 800px goes here */
}
This would work only on devices whose width is equal to or less than 800px.
这仅适用于宽度等于或小于 800 像素的设备。
Read up more about media queries on the Mozilla Developer Network.
在Mozilla 开发人员网络上阅读有关媒体查询的更多信息。
回答by C.P.O
Detection is automatic. You must specify what css can be used for each screen resolution:
检测是自动的。您必须指定每个屏幕分辨率可以使用什么 css：
/* for all screens, use 14px font size */
body {
font-size: 14px;
}
/* responsive, form small screens, use 13px font size */
@media (max-width: 479px) {
body {
font-size: 13px;
}
}
回答by Heras
I created a little javascript tool to style elements on screen size without using media queries or recompiling bootstrap css:
我创建了一个小的 javascript 工具来在屏幕尺寸上设置元素的样式，而不使用媒体查询或重新编译引导 css：
https://github.com/Heras/Responsive-Breakpoints
https://github.com/Heras/Responsive-Breakpoints
Just add class responsive-breakpointsto any element, and it will automagically add xs sm md lg xlclasses to those elements.
只需responsive-breakpoints为任何元素添加类，它就会自动xs sm md lg xl为这些元素添加类。
回答by Sugam Parajuli
@media queries serve this purpose. Here's an example:
@media 查询服务于这个目的。下面是一个例子：
@media only screen and (max-width: 991px) and (min-width: 769px){
/* CSS that should be displayed if width is equal to or less than 991px and larger
than 768px goes here */
}
@media only screen and (max-width: 991px){
/* CSS that should be displayed if width is equal to or less than 991px goes here */
}
回答by Michael Koelewijn
Why not use @media-queries? These are designed for that exact purpose. You can also do this with jQuery, but that's a last resort in my book.
为什么不使用@media-queries？这些都是为此目的而设计的。您也可以使用 jQuery 执行此操作，但这是我书中的最后手段。
var s = document.createElement("script");
//Check if viewport is smaller than 768 pixels
if(window.innerWidth < 768) {
s.type = "text/javascript";
s.src = "http://www.example.com/public/assets/css1";
}else { //Else we have a larger screen
s.type = "text/javascript";
s.src = "http://www.example.com/public/assets/css2";
}
$(function(){
$("head").append(s); //Inject stylesheet
})
