How to connect all media queries through a separate css file?

D

Dmitry2019-05-19 12:36:25

css

Dmitry, 2019-05-19 12:36:25

Media queries work when I add them to a less file and they are then compiled into styles.css, but I can't include media queries as a separate file. Tried different ways, both through import and different ways of link, but nothing works

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">

  <link rel="stylesheet/less" href="css/styles.less">
  <link rel="stylesheet" href="css/styles.css">
  <link rel="stylesheet" href="css/media.css" media="only screen and (max-width:840px)">
  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,700&display=swap" rel="stylesheet"> <!--roboto-->
  <title>
    Boots4 project
  </title>
</head>
<body>

@media only screen and (max-width:1450px){
  nav a{
    font-size: 18px;
    margin-left:20px;
  }

} /*1450px*/
@media only screen and (max-width:1010px){
  nav a{ 	
    margin-left:15px;
  }

  .search{
    display: none;
  }
  

} /*1010px*/
@media only screen and (max-width:840px){
  .logo{
    font-size: 18px;
  }
  nav a{ 	
    margin-left:10px;
    font-size: 15px;
  }

  .header-main{
    .title{
    font-size: 50px;
    }
    
    .full-btn{
      margin-top:20px;
      width: 150px;
      height: 50px;	
      font-size: 15px;	
    }
    .border-btn{
      margin-top:20px;
      width: 150px;
      height: 50px;
      font-size: 15px;
    }
    }
} /*840px*/
@media only screen and (max-width:490px){
  .header-main{
    .full-btn{
      display: block;
      width: 90%;
    }
    .border-btn{
      display: block;
      width: 90%;
    }
  }
} /*490px*/

Reply

Answer the question

In order to leave comments, you need to log in

2 answer(s)

L

lamer350, 2019-05-19
@idontgetit

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

You have indicated here that the maximum width is 840 , and in media queries you have 1450 - accordingly, this code will not work.
This is the first, and the second - you have an error in css, in fact, after the error, the styles will not be executed everything below.
You used a nesting structure in media queries, which is not allowed for css, this is no less for you.
The execution of styles reached these lines and stopped:

@media only screen and (max-width:840px){
.....
.header-main{
    .title{
    font-size: 50px;
    }
....
...
}

That's why the code itself works if you import it into less, since it compiles it. And separately it will not work because the structure of CSS is broken.

E

Evgeny Zaletsky, 2019-05-19
@JZ_52

<link rel="stylesheet" href="smartphone.css" media="only screen and (min-device-width : 320px) and (max-device-width : 480px)">