How to detect device and swap the CSS file ? Last Updated : 05 Jun, 2023 Summarize Comments Improve Suggest changes Share Like Article Like Report When creating a webpage, the most important thing is the user experience with the frontend, especially the designing part or CSS. For a smooth experience, a frontend developer needs to make the webpage responsive. As "one size doesn't fit all", a single design will not work on all devices. That's why the "media query" was introduced. Media queries are very helpful when it comes to styling specific parts of the website on the basis of the screen width, height, bits/pixel, and many more.But sometimes writing media queries can be confusing if a lot of them are to be written or if we have to completely change the styling of the webpage for different devices. So, we can use different CSS files for different screen sizes. This can be done by adding media query in the <link rel="stylesheet" href="style.css"> section in the HTML file. Media query can be added to the linking section of CSS like this, given below <link rel="stylesheet" media="media query properties" href="stylesheet.css"> Media type that can be used all (default)Used for all media type devicesprint Used for printersscreenUsed for computer screens, tablets, smart-phones etc.speechUsed for screen readers that "reads" the page out loud Some commonly used media feature for making webpage responsive max-widthSets a maximum width till which CSS properties will be followedmin-widthSets a minimum width till which CSS properties will be followedorientationCan be set to portrait/landscape Note: All features of media query can be used while linking CSS to the HTML. HTML <!-- Filenmae:index.html --> <!DOCTYPE HTML> <html lang="en" dir="ltr"> <head> <title>GFG</title> <!-- main css --> <link rel="stylesheet" href="master.css"> <!-- CSS with media query --> <link rel="stylesheet" media="screen and (max-width: 360px)" href="small-screen.css"> <link rel="stylesheet" media="screen and (min-width: 360px) and (max-width: 550px)" href="large-screen.css"> </head> <body> GeeksForGeeks </body> </html> CSS Files: 1. master.css file CSS /* Filename: master.css */ body { display: flex; align-items: center; font-family: sans-serif; } 2. small-screen.css file CSS // small-screen.css body { color: rgb(29, 176, 5); background-color: white; } 3. large-screen.css file CSS /* Filename:large-screen.css */ body { color: rgb(67, 164, 55); background-color: black; } Output: When the width of the screen is less than 360pxWhen the width of the screen is more than 360px and less than 550pxWhen the width of the screen is larger than 550px Comment More infoAdvertise with us Next Article How to Detect the Device is an Android Device using JavaScript? A ankitzm Follow Improve Article Tags : Web Technologies CSS CSS-Questions Similar Reads How to Detect the Device is an Android Device using JavaScript? Detecting an Android device using JavaScript helps improve web experiences. By checking the user agent string, developers can identify Android devices and apply specific features or styles. This method ensures compatibility and optimizes functionality for different platformsApproachUse the navigator 2 min read How to Detect the Device is an Android Device using JavaScript? Detecting an Android device using JavaScript helps improve web experiences. By checking the user agent string, developers can identify Android devices and apply specific features or styles. This method ensures compatibility and optimizes functionality for different platformsApproachUse the navigator 2 min read How to detect touch screen device using CSS ? In this article, we will learn how to detect touchscreen devices using CSS. In a website, it becomes important to detect the pointing device used by the user. For example, if the user uses a finger as the pointing device (which has less accuracy on the screen due to more screen-finger contact area) 2 min read How to detect a mobile device in jQuery? We can use JavaScript window.matchMedia() method to detect a mobile device based on the CSS media query. This is the best and easiest way to detect mobile devices. Syntax: window.matchMedia(); Example-1: Program run on desktop. html <!DOCTYPE html> <html lang="en"> <head> 1 min read Detect a device is iOS or not using JavaScript In order to detect a device whether it is iOS or not. We're going to Navigator platform and Navigator userAgent property. Navigator userAgent property This property returns the value of the user-agent header which is sent by the browser to the server. Returned value, have information about the name, 2 min read How to check Platform and Device Details in React Native ? React Native is an open-source UI software framework created by Meta Platforms, Inc. It is used to develop applications for Android, Android TV, iOS, macOS, tvOS, Web, Windows, and UWP by enabling developers to use the React framework along with native platform capabilities.In this article, we will 3 min read Like