Всё так. Только сначала лучше указать общие стили, а потом уже @media. Лучше скину свой пример:
| Код |
* {
box-sizing: border-box;
}
body {
max-width: 960px;
min-width: 320px;
width: 90%;
margin: 1em auto;
background-color: #DCDBD9;
color: #2C2C2C;
font: normal 100% Cambria;
}
.files {
margin: 0;
padding: 0;
list-style-type: none;
}
.files a {
display: inline-block;
width: 100%;
padding-left: 20px;
line-height: 1.25em;
}
.files a:hover {
background-color: white;
color: black;
min-width: 50%;
}
.directory a {
background: url("folder_icon.png") transparent left center no-repeat;
}
.file a{
background: url("file_icon.png") transparent left center no-repeat;
}
#menu {
border-radius: 1em;
background-image: -webkit-linear-gradient(top, #474747, #010101);
background-image: -moz-linear-gradient(top, #474747, #010101);
}
#menu>li {
margin: 0.5em 0.5em;
display: inline-block;
}
#menu a {
color: white;
font: normal 75% Verdana, Geneva, sans-serif;
}
#menu li:after {
content: "|";
display: inline-block;
margin-left: 1em;
color: red;
}
#menu li:last-child:after {
display: none;
}
.clear:after {
clear: both;
content: '';
display: block;
}
@media screen and (max-width: 540px) {
body {
font-size: 150%;
margin: 0;
width: 100%;
}
.menu {
width: 100%;
}
.files a {
padding: 0;
line-height: 3.5em;
}
.directory a,
.file a {
background: none;
}
.directory a:before {
content: 'D:';
}
.file a:before {
content: 'F:';
}
}
@media screen and (max-width: 960px) {
.files a {
line-height: 2em;
}
}
|
|
