Media Queries messing up the site

Navigation
1

Galera, next.

I already have 4 CSS that make the necessary adjustments on my site. (unfortunately I started from the highest to the lowest, since I did not know it was good to have started from the mobile).

Pro my site will require:

  • A css that appears from from 1200px to any screen larger than this;
  • A css that appears below from this 1200px to 1024px (I'll go down)
  • A css that appears below from this 1024px to 883px.

And now I'm creating a new css, which I'll use below this 883px. However, when I put this code in my css, a smaller css joins with a larger css and the two are on the page, messing everything up. How do I use 1 css at a time in each area I have specified? 

<link rel="stylesheet" type="text/css" media="only screen and (max-width: 883px)" href="css/minsmall.css">
<link rel="stylesheet" type="text/css" media="only screen and (max-width: 1023px)" href="css/small.css">
<link rel="stylesheet" type="text/css" media="only screen and (min-width: 1024px)" href="css/medium.css">
<link rel="stylesheet" type="text/css" media="only screen and (min-width: 1200px)" href="css/large.css">

Another question: In one example I saw that the guy used in the media="screen and [...] instead of only screen [...], what's the difference of using only or leaving without the only?"

    
asked by anonymous 14.11.2017 / 18:29

1 answer

1

Run the code below and change the resolution of your page (You can move the width of the window)

Note: It may not work here on the stack. Copy and place the file on your machine. Just try ... 

#btn{
background: #FF0000;
}

@media all and (min-width: 400px) and (max-width: 600px){
  #btn{
    background: #00FF00;
  }
}


@media all and (min-width: 600px) and (max-width: 800px){
  #btn{
    background: #0000FF;
  }
}
<button id="btn">Teste</button>
    
14.11.2017 / 18:40
Replace with VueJS Set up style sheet with PHP