Bootstrap 3在响应式实用程序中有很好的CSS类,允许我根据屏幕分辨率http://getbootstrap.com/css/#responsive-utilities-classes隐藏或显示一些块。
我在CSS文件中有一些样式规则,希望根据屏幕分辨率应用或不应用。
我该怎么做呢?
我打算将我所有的CSS文件最小化到生产部署上的一个CSS文件中,但是如果除了为不同的屏幕分辨率使用单独的CSS文件之外没有其他解决方案,这种情况是可以避免的。
发布于 2014-01-12 22:51:49
使用@media
queries。他们就是为了这个目的。下面是一个它们是如何工作的例子:
@media (max-width: 800px) {
/* CSS that should be displayed if width is equal to or less than 800px goes here */
}
这只适用于宽度等于或小于800px的设备。
阅读有关Mozilla Developer Network上的媒体查询的更多信息。
发布于 2017-08-15 22:36:03
检测是自动的。您必须指定可用于每种屏幕分辨率的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;
}
}
发布于 2019-03-28 16:18:20
@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 */
}
https://stackoverflow.com/questions/21075983
复制相似问题