146 lines
3.1 KiB
HTML
146 lines
3.1 KiB
HTML
|
<html>
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
|
||
|
|
<title>test</title>
|
||
|
|
</head>
|
||
|
|
<style id="compiled-css" type="text/css">
|
||
|
|
html{
|
||
|
|
-webkit-text-size-adjust: none;
|
||
|
|
}
|
||
|
|
body{
|
||
|
|
display:flex;
|
||
|
|
align-items:center;
|
||
|
|
justify-content:center;
|
||
|
|
}
|
||
|
|
*{
|
||
|
|
font-size:50px;
|
||
|
|
color: red;
|
||
|
|
}
|
||
|
|
@media (min-width: 300px) and (max-width: 349px) {
|
||
|
|
d300::after {
|
||
|
|
content: "300px";
|
||
|
|
outline: 1px solid gray; } }
|
||
|
|
|
||
|
|
@media (min-width: 350px) and (max-width: 399px) {
|
||
|
|
d350::after {
|
||
|
|
content: "350px";
|
||
|
|
outline: 1px solid gray; } }
|
||
|
|
|
||
|
|
@media (min-width: 400px) and (max-width: 449px) {
|
||
|
|
d400::after {
|
||
|
|
content: "400px";
|
||
|
|
outline: 1px solid gray; } }
|
||
|
|
|
||
|
|
@media (min-width: 450px) and (max-width: 499px) {
|
||
|
|
d450::after {
|
||
|
|
content: "450px";
|
||
|
|
outline: 1px solid gray; } }
|
||
|
|
|
||
|
|
@media (min-width: 500px) and (max-width: 549px) {
|
||
|
|
d500::after {
|
||
|
|
content: "500px";
|
||
|
|
outline: 1px solid gray; } }
|
||
|
|
|
||
|
|
@media (min-width: 550px) and (max-width: 599px) {
|
||
|
|
d550::after {
|
||
|
|
content: "550px";
|
||
|
|
outline: 1px solid gray; } }
|
||
|
|
|
||
|
|
@media (min-width: 600px) and (max-width: 649px) {
|
||
|
|
d600::after {
|
||
|
|
content: "600px";
|
||
|
|
outline: 1px solid gray; } }
|
||
|
|
|
||
|
|
@media (min-width: 650px) and (max-width: 699px) {
|
||
|
|
d650::after {
|
||
|
|
content: "650px";
|
||
|
|
outline: 1px solid gray; } }
|
||
|
|
|
||
|
|
@media (min-width: 700px) and (max-width: 749px) {
|
||
|
|
d700::after {
|
||
|
|
content: "700px";
|
||
|
|
outline: 1px solid gray; } }
|
||
|
|
|
||
|
|
@media (min-width: 750px) and (max-width: 799px) {
|
||
|
|
d750::after {
|
||
|
|
content: "750px";
|
||
|
|
outline: 1px solid gray; } }
|
||
|
|
|
||
|
|
@media (min-width: 800px) and (max-width: 849px) {
|
||
|
|
d800::after {
|
||
|
|
content: "800px";
|
||
|
|
outline: 1px solid gray; } }
|
||
|
|
|
||
|
|
@media (min-width: 850px) and (max-width: 899px) {
|
||
|
|
d850::after {
|
||
|
|
content: "850px";
|
||
|
|
outline: 1px solid gray; } }
|
||
|
|
|
||
|
|
@media (min-width: 900px) and (max-width: 949px) {
|
||
|
|
d900::after {
|
||
|
|
content: "900px";
|
||
|
|
outline: 1px solid gray; } }
|
||
|
|
|
||
|
|
@media (min-width: 950px) and (max-width: 999px) {
|
||
|
|
d950::after {
|
||
|
|
content: "950px";
|
||
|
|
outline: 1px solid gray; } }
|
||
|
|
|
||
|
|
@media (min-width: 1000px) and (max-width: 1049px) {
|
||
|
|
d1000::after {
|
||
|
|
content: "1000px";
|
||
|
|
outline: 1px solid gray; } }
|
||
|
|
|
||
|
|
@media (min-width: 1050px) and (max-width: 1099px) {
|
||
|
|
d1050::after {
|
||
|
|
content: "1050px";
|
||
|
|
outline: 1px solid gray; } }
|
||
|
|
|
||
|
|
@media (min-width: 1100px) and (max-width: 1149px) {
|
||
|
|
d1100::after {
|
||
|
|
content: "1100px";
|
||
|
|
outline: 1px solid gray; } }
|
||
|
|
|
||
|
|
@media (min-width: 1150px) and (max-width: 1199px) {
|
||
|
|
d1150::after {
|
||
|
|
content: "1150px";
|
||
|
|
outline: 1px solid gray; } }
|
||
|
|
|
||
|
|
@media (min-width: 1200px) and (max-width: 1249px) {
|
||
|
|
d1200::after {
|
||
|
|
content: "1200px";
|
||
|
|
outline: 1px solid gray; } }
|
||
|
|
|
||
|
|
@media (min-width: 1250px) and (max-width: 1299px) {
|
||
|
|
d1250::after {
|
||
|
|
content: "1250px";
|
||
|
|
outline: 1px solid gray; } }
|
||
|
|
|
||
|
|
</style>
|
||
|
|
|
||
|
|
<body>
|
||
|
|
<d300></d300>
|
||
|
|
<d350></d350>
|
||
|
|
<d400></d400>
|
||
|
|
<d450></d450>
|
||
|
|
<d500></d500>
|
||
|
|
<d550></d550>
|
||
|
|
<d600></d600>
|
||
|
|
<d650></d650>
|
||
|
|
<d700></d700>
|
||
|
|
<d750></d750>
|
||
|
|
<d800></d800>
|
||
|
|
<d850></d850>
|
||
|
|
<d900></d900>
|
||
|
|
<d950></d950>
|
||
|
|
<d1000></d1000>
|
||
|
|
<d1050></d1050>
|
||
|
|
<d1100></d1100>
|
||
|
|
<d1150></d1150>
|
||
|
|
<d1200></d1200>
|
||
|
|
<d1250></d1250>
|
||
|
|
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|