Syntax
- This will include styles.css only if the screen width is 600 pixels or less.
<link rel="stylesheet" href="styles.css" media="screen and (max-width: 600px)">
Possible Use-case
<link rel="stylesheet" href="desktop-styles.css" media="screen and (min-width: 1024px)">
<link rel="stylesheet" href="mobile-styles.css" media="screen and (max-width: 600px)">
<link rel="stylesheet" href="mobile.css" media="screen and (min-width:200px)">
<link rel="stylesheet" href="desktop.css" media="screen and (min-width:800px)">
Order matters if you swap positions of links👶 then it wont work since mobile.css always load(true) no matter screen size.
It will help organize your code little bit.
Top comments (0)