Reputation: 7215
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
I have some style rules in a CSS file that I want to be applied or not based on screen resolution.
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.
Upvotes: 82
Views: 216662
Reputation: 185
@media queries serve this purpose. Here's an example:
@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 */
}
Upvotes: 10
Reputation: 585
I created a little javascript tool to style elements on screen size without using media queries or recompiling bootstrap css:
https://github.com/Heras/Responsive-Breakpoints
Just add class responsive-breakpoints
to any element, and it will automagically add xs sm md lg xl
classes to those elements.
Demo: https://codepen.io/HerasHackwork/pen/rGGNEK
Upvotes: 1
Reputation: 1281
Detection is automatic. You must specify what css can be used for each screen resolution:
/* 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;
}
}
Upvotes: 25
Reputation: 476
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.
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
})
Upvotes: 0
Reputation: 6871
Use @media
queries. They serve this exact purpose. Here's an example how they work:
@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.
Read up more about media queries on the Mozilla Developer Network.
Upvotes: 131