页面无法访问
- 页面链接失效
- 页面链接不和谐
- 发布者自主删除
- 尝试运行 Windows 网络诊断
??私のウェブサイト
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; } }
自写代码,照chrome错页样式仿报错页。
桌面端横屏与手机竖屏无异样,它况未测。
js有用es6特性,css有用css3特性,不支持请自改或问于评论。