这是一个在线工具，用于将CSS代码中的像素单位（px）转换为相对单位（rem）。用户可以设置设计稿宽度和基础字体值，选择兼容的屏幕分辨率，并选择是否兼容IE8及以下版本，以及是否处理border。点击按钮即可实现px到rem或rem到px的转换。
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>px转rem</title>
<meta name="description" content="px转rem" />
<meta name="author" content="xiaoweili" />
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/2.3.2/css/bootstrap.min.css">
<style type="text/css">
body{font-family:"\5FAE\8F6F\96C5\9ED1",Helvetica;}
ul{
list-style: none;
}
textarea{
width: 532px;
height: 500px;
}
h2{
text-align: center;
}
.box{
width: 534px;
float: left;
}
.before{
}
.after{
margin-left: 200px;
}
.btn-group{
position: absolute;
width: 100px;
top: 260px;
left: 50%;
margin-left: -50px;
text-align: center;
}
.warp{
position: relative;
margin: 0 auto;
width: 1280px;
}
.btn{
display: block;
border-radius: 3px;
text-decoration: none;
height: 30px;
line-height: 30px;
opacity: 0.9;
}
.btn:hover{
opacity: 0.7;
}
.btn:active{
opacity: 1;
}
.info{
float: right;
margin: 20px 0;
}
.form{overflow: hidden;}
.select-screen{overflow: hidden;}
.select-screen ul{overflow: hidden;padding: 0;margin: 0;}
.select-screen li{ float: left;}
.fl{
float: left;
}
.fr{
float: right;
}
li label{
padding: 4px 4px;
cursor: pointer;
-webkit-user-select:none;
}
</style>
</head>
<body>
<div class="warp">
<div class="form">
<div class="before box">
<h2>转换前的代码</h2>
<textarea name="" id="before"></textarea>
<div class="select-screen">
<div class="control-group fl">
<label class="control-label" for="baseWidth"><i class="icon-picture"></i>设计稿宽度</label>
<div class="controls">
<input type="number" id="baseWidth" value="640" style="width:;">
</div>
</div>
<div class="control-group fr">
<label class="control-label" for="baseFont"><i class="icon-font"></i>基础字体值</label>
<div class="contro
最低0.47元/天 解锁文章
622
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
