html css正方形码,纯CSS实现的响应式正方形

CSS

语言：

CSSSCSS

确定

/* ==============================

$---Contents

$-Variables

$-Mixins

$-Resets

$-Modules

$-Styles

============================== */

/* ==============================

$-Variables

============================== */

/* ==============================

$-Mixins

============================== */

/* ==============================

$-Resets

============================== */

html,

body {

height: 100%;

font-size: 20px;

}

html {

box-sizing: border-box;

}

*,

*:before,

*:after {

box-sizing: border-box;

}

body {

margin: 0;

line-height: 1.5;

background-color: #333;

font-family: Georgia, Times, "Times New Roman", serif;

color: #333;

}

/* main ie fix */

main {

display: block;

}

/* headers */

h1,

h2,

h3,

h4,

h5,

h6 {

margin-top: 1em;

margin-bottom: .25em;

font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;

font-weight: 700;

}

/* highlight colors */

::-moz-selection {

background-color: #333;

color: white;

}

::selection {

background-color: #333;

color: white;

}

/* anchor links */

a {

color: black;

}

a:hover,

a:active {

text-decoration: none;

}

a:visited {

color: rebeccapurple;

}

/* form elements */

select,

textarea,

input {

max-width: 100%;

padding: 0;

margin: 0;

font-family: Georgia, Times, "Times New Roman", serif;

font-size: 1em;

color: #333;

}

input[type=submit],

input[type=button] {

cursor: pointer;

}

/* img */

img {

max-width: 100%;

height: auto;

border: none;

vertical-align: middle;

font-style: italic;

}

/* ==============================

$-Modules

============================== */

/* fluid grid */

.grid-12 {

width: 100%;

}

.grid-11 {

width: 91.53%;

}

.grid-10 {

width: 83.06%;

}

.grid-9 {

width: 74.6%;

}

.grid-8 {

width: 66.13%;

}

.grid-7 {

width: 57.66%;

}

.grid-6 {

width: 49.2%;

}

.grid-5 {

width: 40.73%;

}

.grid-4 {

width: 32.26%;

}

.grid-3 {

width: 23.8%;

}

.grid-2 {

width: 15.33%;

}

.grid-1 {

width: 6.866%;

}

/* ==============================

$-Styles

============================== */

.position {

position: absolute;

top: 50%;

left: 50%;

-webkit-transform: translate(-50%, -50%);

transform: translate(-50%, -50%);

}

.square {

height: 0;

padding-bottom: 100%;

position: relative;

background: coral;

text-align: center;

overflow: hidden;

}

.square-inn {

position: absolute;

top: 50%;

-webkit-transform: translateY(-50%);

transform: translateY(-50%);

width: 100%;

padding: .75em;

}