pixsy/node_modules/less/test/css/media.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;
}
}