html5 游戏 响应式,HTML5 响应式流式列表

CSS

语言：

CSSSCSS

确定

html {

box-sizing: border-box;

}

*,

*:before,

*:after {

box-sizing: inherit;

}

html,

body {

position: relative;

width: 100%;

min-width: 320px;

height: 100%;

min-height: 320px;

font-family: "Roboto", sans-serif;

color: #a1a1a1;

font-size: 24px;

background: #f2f2f2;

}

body {

padding-left: 125px;

}

img {

display: block;

width: 100%;

height: auto;

}

h3 {

font-weight: bold;

color: #404040;

line-height: 1.2rem;

}

h5 {

font-size: 0.5rem;

margin-top: 0.5rem;

}

p {

padding-top: 1rem;

max-width: 100%;

font-size: 16px !important;

line-height: 125%;

}

.view {

position: relative;

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

-webkit-box-orient: vertical;

-webkit-box-direction: normal;

-webkit-flex-direction: column;

-ms-flex-direction: column;

flex-direction: column;

width: 100%;

height: 100%;

margin: 0 auto;

background: #f9f9f9;

}

.view.m {

max-width: 100vh;

}

.view.l {

max-width: 138vh;

}

.view.s {

max-width: 68vh;

}

.view.fs {

max-width: 100vw;

}

.c {

-webkit-align-self: center;

-ms-flex-item-align: center;

align-self: center;

}

.h {

height: auto;

}

.x {

-webkit-box-orient: horizontal;

-webkit-box-direction: normal;

-webkit-flex-direction: row;

-ms-flex-direction: row;

flex-direction: row;

}

.y {

-webkit-box-orient: vertical;

-webkit-box-direction: normal;

-webkit-flex-direction: column;

-ms-flex-direction: column;

flex-direction: column;

}

.z {

-webkit-box-align: stretch;

-webkit-align-items: stretch;

-ms-flex-align: stretch;

align-items: stretch;

}

.w {

-webkit-flex-wrap: wrap;

-ms-flex-wrap: wrap;

flex-wrap: wrap;

}

.g {

-webkit-box-flex: 1;

-webkit-flex-grow: 1;

-ms-flex-positive: 1;

flex-grow: 1;

-webkit-flex-shrink: 0;

-ms-flex-negative: 0;

flex-shrink: 0;

}

.s {

-webkit-box-flex: 0;

-webkit-flex-grow: 0;

-ms-flex-positive: 0;

flex-grow: 0;

-webkit-flex-shrink: 1;

-ms-flex-negative: 1;

flex-shrink: 1;

}

.p {

padding: 1rem;

}

.np {

padding: 0;

}

ul {

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

margin: 1.618rem 0 0 1.618rem;

-webkit-box-align: start;

-webkit-align-items: flex-start;

-ms-flex-align: start;

align-items: flex-start;

}

ul li {

position: relative;

background: #fff;

border: #b8b8b8;

box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.16), 0 2px 5px 0 rgba(0, 0, 0, 0.26);

margin: 0 1.618rem 1.618rem 0;

padding: 1rem;

}

ul li.sq:before {

content: "";

display: block;

padding-bottom: 98%;

}

.xs {

-webkit-box-flex: 4.2358em;

-webkit-flex: 4.2358em;

-ms-flex: 4.2358em;

flex: 4.2358em;

}

.sm {

-webkit-box-flex: 6.85353em;

-webkit-flex: 6.85353em;

-ms-flex: 6.85353em;

flex: 6.85353em;

}

.md {

-webkit-box-flex: 11.08901em;

-webkit-flex: 11.08901em;

-ms-flex: 11.08901em;

flex: 11.08901em;

}

.lg {

-webkit-box-flex: 17.94201em;

-webkit-flex: 17.94201em;

-ms-flex: 17.94201em;

flex: 17.94201em;

}

.xl {

-webkit-box-flex: 29.03017em;

-webkit-flex: 29.03017em;

-ms-flex: 29.03017em;

flex: 29.03017em;

}

button {

padding: 0.5rem;

width: 70px;

height: 70px;

text-transform: uppercase;

background: #fff;

color: #d8d8d8;

font-weight: bold;

border: 0;

outline: none;

cursor: pointer;

font-size: 18px;

}

.circle {

overflow: hidden;

border: 3px solid #eaeaea;

box-shadow: none;

-webkit-transform: scale(0.9);

-ms-transform: scale(0.9);

transform: scale(0.9);

border-radius: 50%;

-webkit-box-flex: 0;

-webkit-flex: none;

-ms-flex: none;

flex: none;

}

.circle.active {

border-color: #c6c6c6;

-webkit-transform: scale(1);

-ms-transform: scale(1);

transform: scale(1);

}

.circle.active button {

color: #b6b6b6;

}

.ctrls {

position: fixed;

top: 0;

left: 0px;

min-height: 100%;

z-index: 99;

border-right: 1px solid #eaeaea;

background: #fff;

width: auto;

}

.ctrls ul {

margin: 1rem 0 0 1rem;

}

.ctrls ul li {

margin: 0 1rem 1rem 0;

}

@media (orientation: portrait) {

.ctrls li:nth-child(3),

.ctrls li:nth-child(4) {

display: none;

}

}

#list {

-webkit-transition: all 2s;

transition: all 2s;

min-width: 320px;

}