iframe { border: 0 none; vertical-align: top; } .logger { color: #fff; position: absolute; bottom: 0.7rem; left: 50%; line-height: 0.4rem; height: 0.4rem; width: 100%; text-align: center; transform: translateX(-50%) translateY(0); } .logger p { background-color: rgba(0, 0, 0, 1); border-radius: 0.05rem; display: inline-block; font-size: 0.16rem; line-height: 0.4rem; padding: 0 0.3rem; } /* 2018/04/19 */ * { -webkit-box-sizing: border-box; box-sizing: border-box; font: 12px/1.5 'Microsoft Yahei'; margin: 0; padding: 0; } html { font-size: 85.33333333px; } @media screen and (min-width: 320px) { html { font-size: 85.33333333px; } } @media screen and (min-width: 360px) { html { font-size: 96px; } } @media screen and (min-width: 375px) { html { font-size: 100px; } } html, body { height: 100%; } a { text-decoration: none; } .init { background-image: url(../images/bg-init.jpg); background-size: 100% auto; height: 100%; margin: 0 auto; max-width: 750px; width: 100%; } .init_body { left: 50%; position: absolute; top: 50%; -webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); width: 2.7rem; } .init_item { background-color: rgba(255, 255, 255, 0.29); border: 1px solid #fff; border-radius: 0.08rem; color: #fff; display: block; font-size: 0.18rem; height: 0.4rem; line-height: 0.38rem; margin-bottom: 0.3rem; text-align: center; } .init_item:last-child { margin-bottom: 0; } .init_item:active { background-color: #23B0CB; border-color: #23B0CB; }