CODEWITHSUNDEEP
htmlcss
Trung Kien Nguyen
Trung Kien Nguyen

Reputation: 5

Html file load two different CSS files for desktop and mobile

I was asked to create a simple website for my assignment. I want the html file to run "mobile.css" when I open the site on mobile and run "desktop.css" when I open the site on mobile.

Upvotes: 0

Views: 1735

Answers (2)

arturas
arturas

Reputation: 1116

There is misunderstood. I assume you want css to work for 'small' aka mobile, and big aka 'desktop'. This is done by css @media queries. This way, most likely we combine these styles in one css file.

e.g. change background for smaller resolution.

@media only screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

If you want to detect if user uses mobile browser, you can detect it by css and conditionally load your css.

e.g.

const isMobile = navigator.userAgentData.mobile;

Upvotes: 2

Boguz
Boguz

Reputation: 1823

The term "mobile" and "desktop" are very relative.

But you could use something like this to import your css files:

<link
   rel="stylesheet"
   href="your-mobile-css.css"
   media="screen and (max-width: 640px)"
/>

(and you could do the same for the desktop file)

The link element accepts a media attribute, which allows you to load the asset conditionally.

You can read more about it here

Another possibility would be for you to have a single css files and then use "media queries" to apply different styles for mobile and desktop devices.

You can read about it here

Upvotes: 2

Related Questions