Адаптивные стили на InstantVideo - образец стиля

[code=php]@media only screen and (max-width: 1160px) {

.sort li {
display: block;
float: left;
margin: 1.2%;
padding: 0px;
overflow: hidden;
position: relative;
width: 32%;
line-height: 1.1em;
list-style: outside none none;
background: none repeat scroll 0% 0% #FFF !important;
transition: all 0.9s ease 0s;
max-width: 252px;
min-width: 176px;
}
}
@media only screen and (max-width: 1040px) {

.sort li {
display: block;
float: left;
margin: 1.2%;
padding: 0px;
overflow: hidden;
position: relative;
width: 32%;
line-height: 1.1em;
list-style: outside none none;
background: none repeat scroll 0% 0% #FFF !important;
transition: all 0.9s ease 0s;
max-width: 218px;
min-width: 176px;
}
}
@media only screen and (max-width: 961px) {

.sort li {
display: block;
float: left;
margin: 1.2%;
padding: 0px;
overflow: hidden;
position: relative;
width: 30%;
line-height: 1.1em;
list-style: outside none none;
background: none repeat scroll 0% 0% #FFF !important;
transition: all 0.9s ease 0s;
max-width: 218px;
min-width: 165px;
}
}
@media only screen and (max-width: 801px) {

.sort li {
display: block;
float: left;
margin: 2.2%;
padding: 0px;
overflow: hidden;
position: relative;
width: 47%;
line-height: 1.1em;
list-style: outside none none;
background: none repeat scroll 0% 0% #FFF !important;
transition: all 0.9s ease 0s;
max-width: 255px;
min-width: 165px;
}
.photo_descr {
background-color: #FFF;
/* border: #E6EAEC solid 1px; */
padding: 8px 3px;
margin: 0px 0 12px 0;
clear: both;
position: relative;
font-size: 0.8em;
line-height: 1.1em;
}
.sort_list li {
max-width: 443px;
min-width: 191px;
width: 47.6%;
float: left;
height: auto;
margin: 1.1%;
padding: 5px;
position: relative;
line-height: 12px;
transition: all 0.7s ease 0s;
background: none repeat scroll 0% 0% #FFF;
list-style: outside none none;
box-shadow: 0px 0px 3px #C7C7C7;
}
}

@media only screen and (max-width: 767px) {
.sort li {
display: block;
float: left;
margin: 1.2%;
padding: 0px;
overflow: hidden;
position: relative;
width: 47%;
line-height: 1.1em;
list-style: outside none none;
background: none repeat scroll 0% 0% #FFF !important;
transition: all 0.9s ease 0s;
max-width: 174px;
min-width: 165px;
}
.sort li h5 {
overflow: hidden;
padding: 5px 5px 6px 5px;
font-size: 0.7em;
font-weight: normal;
line-height: 1.1em;
clear: both;
position: absolute;
bottom: 0px;
background: #FFF;
width: 100%;
height: auto;
margin-bottom: 0px;
box-sizing: border-box;
bottom: 0px;
background: rgba(0, 0, 0, 0.75);
margin: 0px;
}
.sort_list li {
max-width: 443px;
min-width: 191px;
width: 47.6%;
float: left;
height: auto;
margin: 1.1%;
padding: 5px;
position: relative;
line-height: 12px;
transition: all 0.7s ease 0s;
background: none repeat scroll 0% 0% #FFF;
list-style: outside none none;
box-shadow: 0px 0px 3px #C7C7C7;
}
.sort_list li h5 {
overflow: hidden;
margin: 0px;
padding: 1px 3px 5px 6px;
line-height: 1.1em;
text-decoration: none !important;
height: auto;
font-weight: normal;
bottom: 0px;
font-size: .8em;
}
.sort_list li .list_description {
font-size: 7pt;
overflow: hidden;
padding: 2px 2px 2px 10px;
line-height: 11px;
color: #6A6A6A;
bottom: 2px;
}
}

@media only screen and (max-width: 500px) {
.sort li {
display: block;
float: left;
margin: 1.2%;
padding: 0px;
overflow: hidden;
position: relative;
width: 47%;
line-height: 1.1em;
list-style: outside none none;
background: none repeat scroll 0% 0% #FFF !important;
transition: all 0.9s ease 0s;
max-width: 190px;
min-width: 147px;
}
.sort_list li {
max-width: 443px;
min-width: 261px;
width: 97.6%;
float: left;
height: auto;
margin: 1.1%;
padding: 5px;
position: relative;
line-height: 12px;
transition: all 0.7s ease 0s;
background: none repeat scroll 0% 0% #FFF;
list-style: outside none none;
box-shadow: 0px 0px 3px #C7C7C7;
}
.sort_list li .list_description {
font-size: 7pt;
overflow: hidden;
padding: 2px 2px 2px 10px;
line-height: 11px;
color: #6A6A6A;
bottom: 2px;
}
.sort li h5 {
overflow: hidden;
padding: 5px 5px 6px 5px;
font-size: 0.7em;
font-weight: normal;
line-height: 1.1em;
clear: both;
position: absolute;
bottom: 0px;
background: #FFF;
width: 100%;
height: auto;
margin-bottom: 0px;
box-sizing: border-box;
bottom: 0px;
background: rgba(0, 0, 0, 0.75);
margin: 0px;
}
.sort li .thumb {
background: rgba(0, 0, 0, 0);
display: block;
height: 140px !important;
overflow: hidden;
width: 122% !important;
float: left;
position: relative;
text-decoration: none !important;
/* border: 2px solid #333; */
box-sizing: border-box;
}
.sort_list li h5 {
overflow: hidden;
margin: 0px;
padding: 1px 3px 5px 6px;
line-height: 1.1em;
text-decoration: none !important;
height: auto;
font-weight: normal;
bottom: 0px;
font-size: .7em;
}
}
@media only screen and (max-width: 361px) {

.sort li {
display: block;
float: left;
margin: 2.2%;
padding: 0px;
overflow: hidden;
position: relative;
width: 47%;
line-height: 1.1em;
list-style: outside none none;
background: none repeat scroll 0% 0% #FFF !important;
transition: all 0.9s ease 0s;
max-width: 282px;
min-width: 265px;
}
.sort_list li {
max-width: 443px;
min-width: 261px;
width: 97.6%;
float: left;
height: auto;
margin: 1.1%;
padding: 5px;
position: relative;
line-height: 12px;
transition: all 0.7s ease 0s;
background: none repeat scroll 0% 0% #FFF;
list-style: outside none none;
box-shadow: 0px 0px 3px #C7C7C7;
}
.sort_list li h5 {
overflow: hidden;
margin: 0px;
padding: 1px 3px 5px 6px;
line-height: 1.1em;
text-decoration: none !important;
height: auto;
font-weight: normal;
bottom: 0px;
font-size: .7em;
}
.sort_list li .list_description {
font-size: 7pt;
overflow: hidden;
padding: 2px 2px 2px 10px;
line-height: 11px;
color: #6A6A6A;
bottom: 2px;
}
}[/code]