Html
    Css
    Js

    
                        
html {
	font-size:125%;
}
body {
	font-family:'Segoe UI',sans-serif;
	/*font-size:93.75%*/ /*It won't display as my expectation.*/
                font-size:75%;
	color:rgb(95,99,104);
	word-wrap:break-word;
}
article {
	box-sizing:border-box;
	font-size:1em;
	line-height:1.6em;
	margin:14vh auto 0;
	max-width:600px;
	width:100%;
}
.dinosaur-icon {
	display:inline-block;
	width:72px;
	height:72px;
	margin:0 0 40px;
	position:relative;
}
article>h1 {
	margin-top:0;
	word-wrap:break-word;
	color:rgb(32,33,36);
	font-size:1.6em;
	font-weight:500;
	line-height:1.25em;
	margin-bottom:16px;
}
.hint-text {
	margin-bottom:0;
}
article>.hint-text+ul {
	margin-top:0;
}
article a {
	text-decoration:none;
	color:rgb(17,85,204);
}
.sitename {
	display:block;
	font-size:.8em;
	color:#646464;
	text-transform:uppercase;
	margin-top:12px;
}
article>footer {
	margin-top:51px;
}
.button {
	border:1px solid rgb(154,160,166);
	border-radius:4px;
	box-sizing:border-box;
	color:rgb(95,99,104);
	background:#fff;
	cursor:pointer;
	/* font-size:.875em;
	*/
                margin:0;
	padding:8px 16px;
	transition:box-shadow 150ms cubic-bezier(0.4,0,0.2,1);
	outline:none;
}
.button:active {
	border-color:white;
}
.button:hover {
	background:rgb(248,249,250);
	border-color:rgb(128,134,139);
	text-decoration:none;
}
.button__colored {
	background:rgb(26,115,232);
	color:#fff;
	border:none;
}
.button__colored:hover {
	background:rgb(26,115,232);
}
.button__colored:active {
	background:rgb(23,103,210);
}
article>aside {
	display:none;
}
article>aside>:first-child {
	margin-top:18px;
}
article>aside>h2 {
	font-weight:bold;
	margin-top:18px;
	margin-bottom:4px;
	font-size:1em;
	line-height:1.6em;
}
article>aside>p {
	color:#777;
	margin:0;
}
article.debugging>aside {
	display:block;
}
/*Support devices in distinct resolutions.*/
            @media (min-height:299px) {
	article>footer {
	padding-bottom:16px;
}
}@media (max-width:700px) {
	article {
	padding:0 10%;
}
}@media (max-width:420px) {
	article {
	padding:0 5%;
}
.button {
	font-size:.825em;
	font-weight:500;
	margin:0;
	width:100%;
	display:block;
	padding:16px 24px;
}
#debug-switch {
	display:block;
	text-align:center;
	width:100%;
	border:0;
	margin:16px 0 0;
	padding-bottom:16px;
	padding-top:16px;
}
article>aside {
	margin:20px 0 20px 0;
}
}@media (orientation:portrait) {
	/*
                 * For vertical screens:* /------\
                 * |Status|
                 * |Title |
                 * | CON  |
                 * | TENT |
                 * |< 0 ~ |
                 * \______/
                **/
                @media (max-width:420px) {
	article {
	box-sizing:border-box;
	margin:7vh auto 12px;
	padding:0 24px;
	position:relative;
}
article>h1 {
	font-size:1.5em;
	margin-bottom:8px;
}
}@media (max-width:414px) {
	@media (min-height:650px) {
	article {
	margin-top:10vh;
}
}@media (min-height:500px) and (max-height:650px) {
	article {
	margin-top:7vh;
}
}}@media (min-height:400px) {
	article {
	margin-bottom:145px;
}
}}@media (max-width:420px) and (orientation:portrait),(max-height:560px) {
	article {
	box-sizing:borer-box;
	/*margin:7vh auto 12px;
	*/
                    padding:0 24px;
	position:relative;
}
article>h1 {
	font-size:1.5em;
	margin-bottom:8px;
}
.dinosaur-icon {
	margin-bottom:5.69vh;
}
body {
	margin:0 auto;
}
article>summary,article>p,.hint-text {
	font-size:.95em;
	line-height:1.61em;
	margin-top:8px;
}
.button {
	font-family:Roboto,'Noto Sans CJK SC',sans-serif;
	/*font-size:.933em;
	*/
                    margin:6px 0;
}
article:not(.debugging)>aside {
	display:block;
	height:0;
	opacity:0;
	overflow:hidden;
	padding-bottom:0;
	transition:none;
}
article>aside {
	box-sizing:border-box;
	height:auto;
	margin:0;
	opacity:1;
	transition:opacity 250ms cubic-bezier(0.4,0,0.2,1);
}
article>:not(aside):not(footer) {
	transition:opacity 100ms cubic-bezier(0.4,0,0.2,1);
}
article.debugging>:not(aside):not(footer) {
	margin:0;
	display:block;
	height:0;
	opacity:0;
	overflow:hidden;
	padding-bottom:0;
	transition:none;
}
body {
	margin:0 auto;
}
}@media (max-width:640px),(max-height:640px) {
	article>h1 {
	margin:0 0 15px;
}
article>aside>:first-child {
	margin-top:10px;
}
article>aside>h2 {
	margin-top:10px;
	margin-bottom:0;
}
}@media (max-width:420px) and (min-height:401px) and (min-width:240px),(max-height:560px) and (min-height:240px) and (min-width:421px) {
	article>footer {
	box-sizing:border-box;
	background:#fff;
	bottom:0;
	box-shadow:0 -22px 40px #fff;
	left:0;
	margin:0 auto;
	max-width:736px;
	padding-left:24px;
	padding-right:24px;
	position:fixed;
	right:0;
	width:100%;
	z-index:2;
}
article>aside {
	padding-bottom:40px;
	padding-top:5.5vh;
}
article {
	padding-bottom:40px;
}
}@media (max-height:420px) and (max-width:736px) and (min-height:240px) and (min-width:420px) and (orientation:landscape) {
	article {
	margin-bottom:100px;
}
}/*Snackbar*/
            .notification {
	background:#323232;
	color:white;
	height:48px;
	position:fixed;
	left:24px;
	bottom:0;
	line-height:48px;
	display:block;
	border:none;
	padding:0;
	border-radius:2px;
	min-width:288px;
	max-width:568px;
	padding-left:24px;
	padding-right:24px;
	z-index:3;
}
@keyframes appear {
	from {
	transform:translateY(100%);
}
to {
	transform:translateY(0%);
}
}@keyframes disappear {
	from {
	transform:translateY(0);
}
to {
	transform:translateY(100%);
}
}.notification.appear {
	animation:appear .325s ease;
	transform:translateY(0);
}
.notification.disappear:not(.appear) {
	animation:disappear .325s ease-out;
	transform:translateY(100%);
}
.notification.default {
	transform:translateY(100%);
}
@media (max-width:640px) {
	.notification {
	width:100%;
	max-width:none;
	min-width:none;
	border-radius:0;
	left:0;
	right:0;
}
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:2.1.4
 立即下载

Chrome高仿报错页

自写代码,照chrome错页样式仿报错页。
桌面端横屏与手机竖屏无异样,它况未测。
js有用es6特性,css有用css3特性,不支持请自改或问于评论。

0