Html file load two different CSS files for desktop and mobile-CodePudding

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.

CodePudding user response：

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

CodePudding user response：

There is misunderstood. I asume you what 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 what 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;