Файл example1.html
<link rel="stylesheet" href="example1.css">
<body>
<div class='computer_div'>
Hello Computer!
</div>
<div class='phone_div'>
Buy Phone!
</div>
</body>
Файл example1.css
/* for desktop */
@media only screen and (min-device-width : 640px) {
.computer_div {display: inline-block;}
.phone_div {display: none;}
}
/* for phone */
@media only screen and (max-device-width : 640px) {
.computer_div {display: none;}
.phone_div {display: inline-block;}
}
Откройте эту ссылку:
пример1
Если откроем на компьютере то увидим: Hello Computer!
Файл example2.html
<link rel="stylesheet" href="example2.css">
<body>
<font class='my_text'>
Hello!
</font>
</body>
Файл example2.css
/* for desktop */
@media only screen and (min-device-width : 640px) {
.my_text {color:blue;}
}
/* for phone */
@media only screen and (max-device-width : 640px) {
.my_text {color:green;}
}
Your feedback ... Comments ...