Applying different styles via the media attribute of the link element fails-CodePudding

I was trying to apply a different style for the website on mobiles. So I use a different CSS file and max width, but in one case it does not work. What is the matter? It's the style in the mobile-website.css that does not work. But the others in the same file work fine!

.miannav ul {
  margin-top: 0px;
  margin-left: 17%;
}

and the Desktop style:

.miannav ul {
  list-style-type: none;
  text-align: center;
  display: inline-block;
  padding: 0%;
  margin: 0%;
  margin-top: 11px;
  margin-left: 37%;
  }

 .miannav {
  width: 100%;
  height: 5%;
  text-align: left;
  }

and I link the files like this:

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

CodePudding user response：

You should try to load the desktop-home.css first, and then the mobile-home one, because the last style loaded takes preference.

If a mobile phone it's 600px width, it is true that it's less than 640px, but it's also true that it's less than 1024px.

CodePudding user response：

You can extend the media rule for the desktop CSS.

<link rel="stylesheet" media="screen and (min-width:641px) and (max-width: 1024px)" href="desktop-home.css">