219 lines
3.2 KiB
CSS
219 lines
3.2 KiB
CSS
@media print {
|
|
.class {
|
|
color: blue;
|
|
}
|
|
.class .sub {
|
|
width: 42;
|
|
}
|
|
.top,
|
|
header > h1 {
|
|
color: #444444;
|
|
}
|
|
}
|
|
@media screen {
|
|
body {
|
|
max-width: 480;
|
|
}
|
|
}
|
|
@media all and (device-aspect-ratio: 16 / 9) {
|
|
body {
|
|
max-width: 800px;
|
|
}
|
|
}
|
|
@media all and (orientation: portrait) {
|
|
aside {
|
|
float: none;
|
|
}
|
|
}
|
|
@media handheld and (min-width: 42), screen and (min-width: 20em) {
|
|
body {
|
|
max-width: 480px;
|
|
}
|
|
}
|
|
@media print {
|
|
body {
|
|
padding: 20px;
|
|
}
|
|
body header {
|
|
background-color: red;
|
|
}
|
|
}
|
|
@media print and (orientation: landscape) {
|
|
body {
|
|
margin-left: 20px;
|
|
}
|
|
}
|
|
@media screen {
|
|
.sidebar {
|
|
width: 300px;
|
|
}
|
|
}
|
|
@media screen and (orientation: landscape) {
|
|
.sidebar {
|
|
width: 500px;
|
|
}
|
|
}
|
|
@media a and b {
|
|
.first .second .third {
|
|
width: 300px;
|
|
}
|
|
.first .second .fourth {
|
|
width: 3;
|
|
}
|
|
}
|
|
@media a and b and c {
|
|
.first .second .third {
|
|
width: 500px;
|
|
}
|
|
}
|
|
@media a, b and c {
|
|
body {
|
|
width: 95%;
|
|
}
|
|
}
|
|
@media a and x, b and c and x, a and y, b and c and y {
|
|
body {
|
|
width: 100%;
|
|
}
|
|
}
|
|
.a {
|
|
background: black;
|
|
}
|
|
@media handheld {
|
|
.a {
|
|
background: white;
|
|
}
|
|
}
|
|
@media handheld and (max-width: 100px) {
|
|
.a {
|
|
background: red;
|
|
}
|
|
}
|
|
.b {
|
|
background: black;
|
|
}
|
|
@media handheld {
|
|
.b {
|
|
background: white;
|
|
}
|
|
}
|
|
@media handheld and (max-width: 200px) {
|
|
.b {
|
|
background: red;
|
|
}
|
|
}
|
|
@media only screen and (max-width: 200px) {
|
|
body {
|
|
width: 480px;
|
|
}
|
|
}
|
|
@media print {
|
|
@page :left {
|
|
margin: 0.5cm;
|
|
}
|
|
@page :right {
|
|
margin: 0.5cm;
|
|
}
|
|
@page Test:first {
|
|
margin: 1cm;
|
|
}
|
|
@page :first {
|
|
size: 8.5in 11in;
|
|
@top-left {
|
|
margin: 1cm;
|
|
}
|
|
@top-left-corner {
|
|
margin: 1cm;
|
|
}
|
|
@top-center {
|
|
margin: 1cm;
|
|
}
|
|
@top-right {
|
|
margin: 1cm;
|
|
}
|
|
@top-right-corner {
|
|
margin: 1cm;
|
|
}
|
|
@bottom-left {
|
|
margin: 1cm;
|
|
}
|
|
@bottom-left-corner {
|
|
margin: 1cm;
|
|
}
|
|
@bottom-center {
|
|
margin: 1cm;
|
|
}
|
|
@bottom-right {
|
|
margin: 1cm;
|
|
}
|
|
@bottom-right-corner {
|
|
margin: 1cm;
|
|
}
|
|
@left-top {
|
|
margin: 1cm;
|
|
}
|
|
@left-middle {
|
|
margin: 1cm;
|
|
}
|
|
@left-bottom {
|
|
margin: 1cm;
|
|
}
|
|
@right-top {
|
|
margin: 1cm;
|
|
}
|
|
@right-middle {
|
|
content: "Page " counter(page);
|
|
}
|
|
@right-bottom {
|
|
margin: 1cm;
|
|
}
|
|
}
|
|
}
|
|
@media (-webkit-min-device-pixel-ratio: 2), (min--moz-device-pixel-ratio: 2), (-o-min-device-pixel-ratio: 2/1), (min-resolution: 2dppx), (min-resolution: 128dpcm) {
|
|
.b {
|
|
background: red;
|
|
}
|
|
}
|
|
body {
|
|
background: red;
|
|
}
|
|
@media (max-width: 500px) {
|
|
body {
|
|
background: green;
|
|
}
|
|
}
|
|
@media (max-width: 1000px) {
|
|
body {
|
|
background: red;
|
|
background: blue;
|
|
}
|
|
}
|
|
@media (max-width: 1000px) and (max-width: 500px) {
|
|
body {
|
|
background: green;
|
|
}
|
|
}
|
|
@media (max-width: 1200px) {
|
|
/* a comment */
|
|
}
|
|
@media (max-width: 1200px) and (max-width: 900px) {
|
|
body {
|
|
font-size: 11px;
|
|
}
|
|
}
|
|
@media (min-width: 480px) {
|
|
.nav-justified > li {
|
|
display: table-cell;
|
|
}
|
|
}
|
|
@media (min-width: 768px) and (min-width: 480px) {
|
|
.menu > li {
|
|
display: table-cell;
|
|
}
|
|
}
|
|
@media all and tv {
|
|
.all-and-tv-variables {
|
|
var: all-and-tv;
|
|
}
|
|
}
|