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,.........完整代码请登录后点击上方下载按钮下载查看
网友评论0