I have a file master.css
where I define general styles and two more files called movilices.css
and screen.css
that define specific styles for each device, how can I load these files according to the device used using Bootstrap?
Bootstrap works with device sizes with initials md, xs, etc., the idea is to load the CSS according to these same rules, I know you can do this with classes in div
s and HTML elements.
Through the "media" attribute of the "link" element you can do it: It uses the same syntax as media queries, in fact it is one of the ways to use them.
You should not differentiate the load of the .css according to the device since it exists for this
media queries
Within the same css you can define how to apply the style according to the change of resolution of the device.
Responsive Web Design - Media Queries
Use of CSS3 Media Queries: Media query and responsive Design.
In this way the css is always loaded, but if you need to specialize some style according to the size of the slider you define a
@media