How to use particular CSS styles based on screen size device

Question

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

User · Answer

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

User · Answer

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

User · Answer

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  lt  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

User · Answer

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

User · Answer

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

[css] How to use particular CSS styles based on screen size / device

Examples related to css

Examples related to twitter-bootstrap

Examples related to twitter-bootstrap-3