px转rem单位换算工具效果-html代码-BFW代码库

px转rem单位换算工具效果

代码语言：html

所属分类：其他

代码描述：px转rem单位换算工具效果

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
/* Global Styles */

@import url("https://fonts.googleapis.com/css?family=Fira+Code:400,600,700&display=swap");

html,body {
background-color:#20393c;
color:#fff;
font-family:"Fira Code", arial, sans-serif;
font-size:100%;
height:100%;
line-height:1.45;
}

*,*::before,*::after { box-sizing:border-box; }
*:focus { outline:none; }

input::-moz-focus-inner,
input::-moz-focus-inner { border:0; padding:0; }

::selection {
background-color:#439775;
color:#fff;
}


/* Form */

form {
padding:3rem;
margin:0 auto;
max-width:1050px;
}

fieldset {
margin-bottom:3rem;
}

legend {
font-size:2rem;
font-weight:700;
margin-bottom:2rem;
}

label {
display:block;
font-weight:600;
letter-spacing:.02rem;
margin-bottom:.25rem;
}

input {
appearance:none;
background:none;
}

input[type="number"],
input[type="text"] {
background-color:#20393c;
border:1px solid #439775;
border-radius:.125rem;
color:#fff;
display:block;
font-family:"Fira Code", arial, sans-serif;
font-size:1rem;
font-weight:400;
margin:0 0 1.25rem;
max-width:100%;
padding:.65rem 1rem;
width:100%;
}

input[type="button"] {
background-color:#20393c;
border:1px solid #439775;
border-radius:.125rem;
color:#fff;
cursor:pointer;
display:inline-block;
font-family:"Fira Code", arial, sans-serif;
font-size:1rem;
font-weight:600;
line-height:normal;
padding:.65rem 1rem;
text-decoration:none;
}

input[type="button"]:hover,
input[type="button"]:focus {
background-color:#439775;
}
     

/* Grid Display */

ul {
display:grid;
grid-column-gap:0;
grid-row-gap:0;
grid-template-columns:repeat(auto-fit, minmax(210px, 1fr));
margin-left:1px;
}

ul li {
border:1px solid #439775;
border-radius:.125rem;
cursor:pointer;
margin-top:-1px;
margin-left:-1px;
padding:.65rem 1rem;
}

ul li:hover {
background-color:#439775;
}

ul li span {
font-weight:600;
}


/* Media */

@media only screen and (max-width:479px) {
     form {
     padding:2rem;
     }
}
</style>

</head>
<body translate="no">
<form>
<fieldset>
<legend>px2rem</legend>
<label for="base">Base font size (px)</label>
<input type="number" id="base" value="16" min="1" step="1">
<label for="list">Conversions (px)</label>
<input type="text" id="list" value="1,2,.........完整代码请登录后点击上方下载按钮下载查看