Fluid/responsive layout at least 940px and at most 1170px with bootstrap

Question

I’m a beginner with Bootstrap and responsive layouts and found a small obstacle in developing a responsive layout using Bootstrap. In the layout of the site, the content was created to be displayed with a maximum of 1170px and at least 940px width, and should be in this range, fluid. In Bootstrap the grid adapts to 724px and 1170px depending on the viewport, and it is at this point that I do not understand. It is possible to determine with the viewport that the layout will be responsive only between 940 and 1170 pixels, being that in less than 940px it behaves as non-responsive and in greater than 1170 it Centralizes the content?

My structure is like this:

...
<meta name="viewport" content="initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" media="screen">
<link type="text/css" href="css/bootstrap-responsive.min.css" rel="stylesheet">
...

In the styles.css:

/* Desktop maiores */
@media (min-width: 1171px) {
    .container-fluid {
        max-width: 1170px;
        margin: 0 auto;
    }
}

The problem is in the viewport? And how it would be right?

Answer 1

You can determine, as in if, else if the behavior for each screen size, as up to x pixel, between x and y and larger than y, this way:

@media screen and (min-width: 1171px) {
      //vai o código
}

@media screen and (min-device-width: 940px) and (max-device-width: 1170px) { 
    //vai o codigo
}

@media only screen and (max-device-width: 939px) {
    //vai o codigo
}