Css. Mediaqueries

to display on different devices

WHEN CONNECT CSS FILES

<link href="css/small.css" rel="stylesheet" media="(max-width:480px)">
<link href="css/large.css" rel="stylesheet" media="(min-width:769px)">
<link href="css/medium.css" rel="stylesheet" media="(min-width:481px) and
(max-width:768px)">

// import to internal ot external tables
@import url(css/small.css) (max-width:320px);

or like this

@import url(css/base.css); /* нет медиазапроса, применять ко всем */
@import url(css/medium.css) (min-width:481px) and (max-width:768);
@import url(css/small.css) (max-width: 480px);

IN CSS FILES

@media (max-width: 480px) {
body {

...
}
.style1 {

...
}
}

or other example

@media (min-width: 481px) and (max-width:768px) {
body {

}
}

@media (max-width:480px) {
body {

}
}