前文介绍了rem，在这里介绍两种实际使用rem的例子;
flexible.js可伸缩布局使用
原文出处：前端开发博客 (http://caibaojian.com/simple-flexible.html)
链接:http://caibaojian.com/simple-flexible.html
来源:http://caibaojian.com
两种方式的优劣：
1、第一种方式使用上更为简单，第二种需要把样式文件从scss 转为css文件比较麻烦;
2、第一种只能px转为rem,第二种在这一功能上，也提供出了rem转化px的功能
3、第二种需要将scss编译成css 再修改和编写 不如第一张方便
flexible.js 源码
//designWidth:设计稿的实际宽度值，需要根据实际设置
//maxWidth:制作稿的最大宽度值，需要根据实际设置
//这段js的最后面有两个参数记得要设置，一个为设计稿实际宽度，一个为制作稿最大宽度，例如设计稿为750，最大宽度为750，则为(750,750)
;(function(designWidth, maxWidth) {
var doc = document,
win = window,
docEl = doc.documentElement,
remStyle = document.createElement("style"),
tid;
//浏览器竖屏与横屏转换的BUG。
function refreshRem() {
var width = docEl.getBoundingClientRect().width;
maxWidth = maxWidth || 540;
width>maxWidth && (width=maxWidth);
var rem = width * 100 / designWidth;
remStyle.innerHTML = 'html{font-size:' + rem + 'px;}';
}
if (docEl.firstElementChild) {
docEl.firstElementChild.appendChild(remStyle);
} else {
var wrap = doc.createElement("div");
wrap.appendChild(remStyle);
doc.write(wrap.innerHTML);
wrap = null;
}
//要等 wiewport 设置好后才能执行 refreshRem，不然 refreshRem 会执行2次；
refreshRem();
win.addEventListener("resize", function() {
clearTimeout(tid); //防止执行两次
tid = setTimeout(refreshRem, 300);
}, false);
win.addEventListener("pageshow", function(e) {
if (e.persisted) { // 浏览器后退的时候重新计算
clearTimeout(tid);
tid = setTimeout(refreshRem, 300);
}
}, false);
if (doc.readyState === "complete") {
doc.body.style.fontSize = "16px";
} else {
doc.addEventListener("DOMContentLoaded", function(e) {
doc.body.style.fontSize = "16px";
}, false);
}
})(750, 750);flexible.js 使用方法：
1.复制上面这段代码到你的页面的头部的script标签的最前面。
2.根据设计稿大小，调整里面的最后两个参数值。
3.使用1rem=100px转换你的设计稿的像素，例如设计稿上某个块是100px*300px,换算成rem则为1rem*3rem。
也可以到我的Github上下载这个项目里的压缩代码flexible.min.js
该代码版本区别于手淘的rem换算方法。使用的是1rem=100px的换算。
假如你有一个块是.box{width:120px;height:80px;} 转为rem则为.box{width:1.2rem; height:.8rem;}
flexible.js 使用demo
基本的html模板
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">
<meta content="email=no" name="format-detection">
<meta name="description" content="不超过150个字符"/>
<meta name="keywords" content=""/>
<meta content="caibaojian" name="author"/>
<title>前端开发博客</title>
<link rel="stylesheet" href="base.css">
<script type="text/javascript">
//引入该flexible.min.js
!function(e,t){function n(){var n=l.getBoundingClientRect().width;t=t||540,n>t&&(n=t);var i=100*n/e;r.innerHTML="html{font-size:"+i+"px;}"}var i,d=document,o=window,l=d.documentElement,r=document.createElement("style");if(l.firstElementChild)l.firstElementChild.appendChild(r);else{var a=d.createElement("div");a.appendChild(r),d.write(a.innerHTML),a=null}n(),o.addEventListener("resize",function(){clearTimeout(i),i=setTimeout(n,300)},!1),o.addEventListener("pageshow",function(e){e.persisted&&(clearTimeout(i),i=setTimeout(n,300))},!1),"complete"===d.readyState?d.body.style.fontSize="16px":d.addEventListener("DOMContentLoaded",function(e){d.body.style.fontSize="16px"},!1)}(750,750);
</script>
</head>
<body>
<!-- 正文 -->
</body>
</html>base.css（基本样式可以自定义）
body,dl,dd,ul,ol,h1,h2,h3,h4,h5,h6,pre,form,input,textarea,p,hr,thead,tbody,tfoot,th,td{margin:0;padding:0;}
ul,ol{list-style:none;}
a{text-decoration:none;}
html{-ms-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none;}
body{line-height:1.5; font-size:14px;}
body,button,input,select,textarea{font-family:'helvetica neue',tahoma,'hiragino sans gb',stheiti,'wenquanyi micro hei',\5FAE\8F6F\96C5\9ED1,\5B8B\4F53,sans-serif;}
b,strong{font-weight:bold;}
i,em{font-style:normal;}
table{border-collapse:collapse;border-spacing:0;}
table th,table td{border:1px solid #ddd;padding:5px;}
table th{font-weight:inherit;border-bottom-width:2px;border-bottom-color:#ccc;}
img{border:0 none;width:auto\9;max-width:100%;vertical-align:top; height:auto;}
button,input,select,textarea{font-family:inherit;font-size:100%;margin:0;vertical-align:baseline;}
button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;}
button[disabled],input[disabled]{cursor:default;}
input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;}
input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;}
input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}
input:focus{outline:none;}
select[size],select[multiple],select[size][multiple]{border:1px solid #AAA;padding:0;}
article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block;}
audio,canvas,video,progress{display:inline-block;}
body{background:#fff;}
input::-webkit-input-speech-button {display: none}
button,input,textarea{
-webkit-tap-highlight-color: rgba(0,0,0,0);
}再次强调一下：
需要根据你的设计稿的大小来调整脚本最后的两个参数。
})(750, 750);
第一个参数是设计稿的宽度，一般设计稿有640，或者是750，你可以根据实际调整
第二个参数则是设置制作稿的最大宽度，超过750，则以750为最大限制。
如果你发现有什么BUG，也欢迎给我提Issue。
hotcss(大神原文很详细全部复制了)
原文出处：https://github.com/imochen/hotcss
链接:https://github.com/imochen/hotcss
来源:github
hotcss
让移动端布局开发更加容易
点击这里一键加群(130977811)，沟通更便捷
介绍
hotcss不是一个库，也不是一个框架。它是一个移动端布局开发解决方案。使用hotcss可以让移动端布局开发更容易。
使用动态的HTML根字体大小和动态的viewport scale。
遵循视觉一致性原则。在不同大小的屏幕和不同的设备像素密度下，让你的页面看起来是一样的。
不仅便捷了你的布局，同时它使用起来异常简单。可能你会说 talk is cheap,show me the code，那我现在列下hotcss整个项目的目录结构。
├── example //所有的示例都在这个目录下
│ ├── duang
│ ├── normal
│ └── wolf
│
└── src //主要文件在这里
├── hotcss.js
├── px2rem.less
├── px2rem.scss
└── px2rem.styl
示例名称 演示地址 贡献者
普通的演示 http://imochen.github.io/hotcss/example/normal/ 墨尘
duang游戏 http://imochen.github.io/hotcss/example/duang/ 阳阳
灰太狼 http://imochen.github.io/hotcss/example/wolf/ 阳阳
谁在用hotcss
熊猫TV
美丽说HIGO
奇虎360
爆米兔
一起作业
TalkingData
电兔贷款
新浪show
优势
保证不同设备下的统一视觉体验。
不需要你再手动设置viewport，根据当前环境计算出最适合的viewport。
支持任意尺寸的设计图，不局限于特定尺寸的设计图。
支持单一项目，多种设计图尺寸，专为解决大型，长周期项目。
提供px2rem转换方法，CSS布局，零成本转换，原始值不丢失。
有效解决移动端真实1像素问题。
用法
引入hotcss.js
根据页面渲染机制，hotcss.js必须在其他JS加载前加载，万不可异步加载。
如果可以，你应将hotcss.js的内容以内嵌的方式写到标签里面进行加载，并且保证在其他js文件之前。
为了避免不必要的bug，请将CSS放到该JS之前加载。
css要怎么写
你可能已经注意到在src/目录下有px2rem.scss/px2rem.less/px2rem.styl三个文件。没错，这就是hotcss提供的将px转为rem的方法，可根据您的需要选择使用。
推荐使用scss来编写css，在scss文件的头部使用import将px2rem导入（kala免费开源软件，可将scss文件编译成scss）
@import ‘/path/to/px2rem.scss’;
如果你的项目是单一尺寸设计图，那么你需要去px2rem.scss中定义全局的designWidth。
@function px2rem(
px)@return$px∗320/$designWidth/20+rem;
designWidth : 750; //如设计图是750
如果你的项目是多尺寸设计图，那么就不能定义全局的designWidth了。需要在你的业务scss中单独定义。如以下是style.scss
@import ‘/path/to/px2rem.scss’;
designWidth:750;//如设计图是750
designWidth必须要在使用px2rem前定义。否则scss编译会出错。
注意：如果使用less，则需要引入less-plugin-functions，普通的less编译工具无法正常编译。
想用px怎么办？
直接写px肯定是不能适配的，那hotcss.js会在html上注册data-dpr属性，这个属性用来标识当前环境dpr值。那么要使用px可以这么写。
//scss写法
container{
font-size: 12px ;
[data-dpr="2"] &{
font-size: 24px;
}
[data-dpr="3"] &{
font-size: 36px;
}
}
接口说明
initial-dpr
可以通过强制设置dpr。来关闭响应的viewport scale。使得viewport scale始终为固定值。
max-width
通过设置该值来优化平板/PC访问体验，注意该值默认值为540。设置为0则该功能关闭。 为了配合使用该设置，请给body增加样式width:16rem;margin:0 auto;。
默认为540，可根据具体需求自己定义
body{
width: 16rem;
margin: 0 auto;
}
design-width
通过对design-width的设置可以在本页运行的JS中直接使用hotcss.px2rem/hotcss.rem2px方法，无需再传递第二个值。
<meta name="hotcss" content="design-width=750">
<script src="/path/to/hotcss.js"></script>hotcss.mresize
用于重新计算布局，一般不需要你手动调用。
hotcss.mresize();
hotcss.callback触发mresize的时候会执行该方法。
hotcss.callback = function(){
//your code here
}单位转换hotcss.px2rem/hotcss.rem2px
hotcss.px2rem 和 hotcss.rem2px。你可以预先设定hotcss.designWidth可以在meta中设置design-width，则之后使用这两个方法不需要再传递第二个参数。
迭代后仍然支持在js中设置hotcss.designWidth，推荐使用meta去设置。
/**
* [px2rem px值转换为rem值]
* @param {[number]} px [需要转换的值]
* @param {[number]} designWidth [设计图的宽度尺寸]
* @return {[number]} [返回转换后的结果]
*/
hotcss.px2rem( px , designWidth );
/**
* 同上。
* 注意：因为rem可能为小数，转换后的px值有可能不是整数，需要自己手动处理。
*/
hotcss.rem2px( rem , designWidth );//你可以在meta中定义design-width，此后使用px2rem/rem2px，就不需要传递designWidth值了。同时也支持旧的设置方式，直接在JS中设置hotcss.designWidth
hotcss.px2rem(200);
hotcss.rem2px(350);
辅助开发资源
hotcss Sulime text 代码片段 – 感谢dctxf提供
hotcss Sublime text 代码片段增强版 – 感谢lhard66提供
koala<中文，免费>
codekit<功能丰富，收费>
hotcss 使用demo
本人修改后的hotcss.js
(function( window , document ){
'use strict';
//给hotcss开辟个命名空间，别问我为什么，我要给你准备你会用到的方法，免得用到的时候还要自己写。
var hotcss = {};
(function() {
//根据devicePixelRatio自定计算scale
//可以有效解决移动端1px这个世纪难题。
var viewportEl = document.querySelector('meta[name="viewport"]'),
hotcssEl = document.querySelector('meta[name="hotcss"]'),
dpr = window.devicePixelRatio || 1,
maxWidth = 1920,
minWidth = null,
designWidth = 0;
dpr = dpr >= 3 ? 3 : ( dpr >=2 ? 2 : 1 );
//允许通过自定义name为hotcss的meta头，通过initial-dpr来强制定义页面缩放
if (hotcssEl) { var hotcssCon = hotcssEl.getAttribute('content'); if (hotcssCon) { var initialDprMatch = hotcssCon.match(/initial\-dpr=([\d\.]+)/); if (initialDprMatch) { dpr = parseFloat(initialDprMatch[1]); } var maxWidthMatch = hotcssCon.match(/max\-width=([\d\.]+)/); if (maxWidthMatch) { maxWidth = parseFloat(maxWidthMatch[1]); } var designWidthMatch = hotcssCon.match(/design\-width=([\d\.]+)/); if (designWidthMatch) { designWidth = parseFloat(designWidthMatch[1]); } minWidth = hotcssCon.match(/min\-width=([\d\.]+)/); if (minWidth) { minWidth = parseFloat(minWidth[1]); } } }
document.documentElement.setAttribute('data-dpr', dpr);
hotcss.dpr = dpr;
document.documentElement.setAttribute('max-width', maxWidth);
hotcss.maxWidth = maxWidth;
if( designWidth ){ document.documentElement.setAttribute('design-width', designWidth); hotcss.designWidth = designWidth; }
if(minWidth){ document.documentElement.setAttribute('min-width',minWidth); hotcss.minWidth = minWidth; }
var scale = 1 / dpr,
content = 'width=device-width, initial-scale=' + scale + ', minimum-scale=' + scale + ', maximum-scale=' + scale + ', user-scalable=no';
if (viewportEl) { viewportEl.setAttribute('content', content); } else { viewportEl = document.createElement('meta'); viewportEl.setAttribute('name', 'viewport'); viewportEl.setAttribute('content', content); document.head.appendChild(viewportEl); }
})();
hotcss.px2rem = function( px , designWidth ){
//预判你将会在JS中用到尺寸，特提供一个方法助你在JS中将px转为rem。就是这么贴心。
if( !designWidth ){
//如果你在JS中大量用到此方法，建议直接定义 hotcss.designWidth 来定义设计图尺寸;
//否则可以在第二个参数告诉我你的设计图是多大。
designWidth = parseInt(hotcss.designWidth , 10);
}
return parseInt(px,10)*320/designWidth/20;
}
hotcss.rem2px = function( rem , designWidth ){
//新增一个rem2px的方法。用法和px2rem一致。
if( !designWidth ){
designWidth = parseInt(hotcss.designWidth , 10);
}
//rem可能为小数，这里不再做处理了
return rem*20*designWidth/320;
}
hotcss.mresize = function(){
//对，这个就是核心方法了，给HTML设置font-size。
var innerWidth = document.documentElement.getBoundingClientRect().width || window.innerWidth;
//检测是否有最小宽度设置 判断当前缩放如果小于最小宽度 就按最小宽度渲染 设置body 的最小宽度
if(innerWidth/hotcss.dpr<hotcss.minWidth){
innerWidth = hotcss.minWidth*hotcss.dpr;
}
if( hotcss.maxWidth && (innerWidth/hotcss.dpr > hotcss.maxWidth) ){
innerWidth = hotcss.maxWidth*hotcss.dpr;
}
if( !innerWidth ){ return false;}
document.documentElement.style.fontSize = ( innerWidth*20/320 ) + 'px';
hotcss.callback && hotcss.callback();
};
hotcss.mresize();
//直接调用一次
window.addEventListener( 'resize' , function(){ clearTimeout( hotcss.tid ); hotcss.tid = setTimeout( hotcss.mresize , 33 ); } , false );
//绑定resize的时候调用
window.addEventListener( 'load' , hotcss.mresize , false );
//防止不明原因的bug。load之后再调用一次。
setTimeout(function(){ hotcss.mresize(); //防止某些机型怪异现象，异步再调用一次 },333)
window.hotcss = hotcss;
//命名空间暴露给你，控制权交给你，想怎么调怎么调。
})( window , document );html 模板
<!DOCTYPE html>
<html xmlns:svg="http://www.w3.org/2000/svg">
<head>
<meta name="content-type" content="text/html" charset="UTF-8">
<meta name=renderer content=webkit>
//这里注意设置了 max-width 最大尺寸 和 design-width设计尺寸 min-width(我对源码有所改动 低于1170的不再缩放)
<meta name="hotcss" content="design-width=1920;max-width=1920;min-width=1170;">
<title>系统登录</title>
<link rel="stylesheet" type="text/css" href="../../lib/layui2.2.45/css/layui.css" />
//login-zxb.css 是 scss文件编译后生成的
<link rel="stylesheet" type="text/css" href="../../public/css/login/login_zsb.css" />
//映入hotcss.js
<script type="text/javascript" src="../../public/js/hotcss.js"></script>
<!--引入jquery cookie-->
<script type="text/javascript" src="../../lib/jquery/jquery-1.12.4.min.js"></script>
<!--引入jquery cookie-->
<script type="text/javascript" src="../../lib/jquery/jquery.cookie.js"></script>
<!--引入layui-->
<script type="text/javascript" src="../../lib/layui2.2.45/layui.js"></script>
<script type="text/javascript" src="../../lib/layui2.2.45/layui-plus0.1.js"></script>
<script type="text/javascript" src="../../public/js/commonUtil.js"></script>
<script type="text/javascript" src="../../public/js/md5.js"></script>
</head>
<body>
</body>
<script type="text/javascript" src="login.js"></script>
</html>login_zsb.scss
//导入px2rem.scss
@import 'px2rem.scss';
//设置 设计稿尺寸
$designWidth: 1920;
html,body{
width: 100%;
height: 100%;
min-width: 1366px;
margin: 0px auto;
font-size: px2rem(10);
padding: 0px auto;
background-image: url(../../../public/images/login/bj.png);
background-repeat:no-repeat;
background-size:100% 100%;
-moz-background-size:100% 100%;
}
.form-container-div{
width: 100%;
min-height: px2rem(500);
display: flex;
align-items: center;
}
.logo-image-div{
width: px2rem(500);
height: px2rem(80);
margin-left:px2rem(326);
align-self:
flex-end;overflow: hidden;
}
.logo-image{
width: px2rem(500);
height: px2rem(80);
max-width: px2rem(500);
max-height: px2rem(80);
transform: scale(6);
}
.zhutu-image-div{
width: 100%;
margin-left: px2rem(380);
max-width: px2rem(700);
min-height: px2rem(500);
}
.zhutu-image{
width: px2rem(700);
height: px2rem(500);
}
.chaxun-image{
width: px2rem(24);
height: px2rem(24);
margin-top: px2rem(13);
}
.form-container{
width: 100%;
max-width: px2rem(473);
height: px2rem(400);
max-height: px2rem(400);
display: flex;
background: #ffffff;
flex-direction: column;
}
.form-container .title-span{
width: 100%;
height: px2rem(50);
line-height: px2rem(50);
display: inline-block;
background: #27384a;
font-size: px2rem(18);
color: #FFFFFF;
text-align: center;
}
.form-container-titleDiv{
width: 100%;
height: px2rem(50);
}
.form-container-conDiv{
width: 100%;
height: px2rem(350);
display: flex;
justify-content: center;
align-items: center;
}
.form-container-conDiv .layui-form{
width: 100%;
max-width: px2rem(400);
align-items: center;
}
.form-input-div{
width: 100%;
height: px2rem(50);
display: flex;
border: 1px solid #e6e6e6;
}
.form-input-icon{
width:px2rem(54) !important;
height: px2rem(50);
display: inline-block;
background-size: px2rem(54) px2rem(50);
background: #F4F4F4;
text-align: center;
}
.form-ipuntIcon-img{
margin-top: px2rem(12);
width: px2rem(28);
height: px2rem(28);
}
.form-input{
height: px2rem(50);
display: inline-block;
padding-left:px2rem(10);
border-width: 0px;
border-style: solid;
background-color: #fff;
border-radius: px2rem(2);
}
.login-btn{
width: 100%;
display: inline-block;
vertical-align: middle;
height: px2rem(48);
line-height: px2rem(48);
padding: 0 px2rem(18);
background-color: #0F9AF1;
color: #fff;
white-space: nowrap;
text-align: center;
font-size: px2rem(18);
border: none;
cursor: pointer;
}
.wjmm-i{
font-style:normal;
font-size: px2rem(12);
font-family: '微软雅黑';
color: #ff9400;
}
.form-container-divparent{
width: px2rem(473);
min-height: 4.1666666667rem;
position: relative;
}
.datagrid-input{
width: 100%;
height: px2rem(50);
line-height: px2rem(50);
border: 0px;
}
.layer-container-div{
position: absolute;
width: px2rem(403);
height: px2rem(310);
top: px2rem(110);
left: px2rem(36);
z-index: 99;
background: #fff;
// padding-left: px2rem(15);
// padding-right: px2rem(15);
box-shadow: 0px 0px 6px #333;
display: none;
}
.layer-title-container{
width: 100%;
height: px2rem(40);
font-size: px2rem(14);
font-family: "微软雅黑";
color: #fff;
background: #0E9DF1;
display: flex;
align-items: center;
justify-content: space-between;
}
.layer-title-container i{
font-style: normal;
font-size: px2rem(18);
margin-right: px2rem(10);
}
.layer-table-container{
padding-right: px2rem(15);
padding-left: px2rem(15);
}
.layer-table-container table{
width: 100%;
margin: px2rem(10) 0;
background-color: #fff;
color: #666;
}
.layer-table-container table thead,.layer-table-container table tbody{
display: table-header-group;
vertical-align: middle;
border-color: inherit;
}
.layer-table-container table tr {
transition: all .3s;
-webkit-transition: all .3s;
display: table-row;
vertical-align: inherit;
border-color: inherit;
}
.layer-table-container table tr:hover{
background-color: #fafafa;
}
.layer-table-container table tr:hover .circle{
background: #FF9400;
}
.layer-table-container table th, .layer-table-container table td {
position: relative;
padding: px2rem(9) px2rem(15);
min-height: px2rem(20);
line-height: px2rem(20);
font-size: px2rem(14);
text-align: center;
border-width: 1px;
border-style: solid;
border-color: #e6e6e6;
margin: 0;
-webkit-tap-highlight-color: rgba(0,0,0,0);
display: table-cell;
vertical-align: inherit;
}
.circle {
display: inline-block;
position: absolute;
left: px2rem(25);
top: px2rem(11);
height: px2rem(18);
width: px2rem(18);
border: 1px solid #ccc;
border-radius: px2rem(10);
background: #a9b6c1;
}
.circle:after {
border: px2rem(2) solid #FFFFFF;
border-left: 0;
border-top: 0;
content: "";
top: px2rem(2);
left: px2rem(6);
position: absolute;
width: px2rem(4);
height: px2rem(8);
transform: rotate(45deg) scale(1);
}
.circle-checked {
background: #FF9400
}编译后的login_zsb.css
@charset "UTF-8";
html, body {
width: 100%;
height: 100%;
min-width: 1170px;
margin: 0px auto;
font-size: 0.0833333333rem;
padding: 0px auto;
background-image: url(../../../public/images/login/bj.png);
background-repeat: no-repeat;
background-size: 100% 100%;
-moz-background-size: 100% 100%; }
.form-container-div {
width: 100%;
min-height: 4.1666666667rem;
display: flex;
align-items: center; }
.logo-image-div {
width: 4.1666666667rem;
height: 0.6666666667rem;
margin-left: 2.7166666667rem;
/*align-self: flex-end;*/
overflow: hidden;
position: absolute;
left: 0px;
bottom: 0px; }
.logo-image {
width: 4.1666666667rem;
height: 0.6666666667rem;
max-width: 4.1666666667rem;
max-height: 0.6666666667rem;
transform: scale(6); }
.zhutu-image-div {
width: 100%;
margin-left: 3.1666666667rem;
max-width: 5.8333333333rem;
min-height: 4.1666666667rem; }
.zhutu-image {
width: 5.8333333333rem;
height: 4.1666666667rem; }
.chaxun-image {
width: 0.2rem;
height: 0.2rem;
margin-top: 0.1083333333rem; }
.form-container {
width: 100%;
max-width: 3.9416666667rem;
height: 3.3333333333rem;
max-height: 3.3333333333rem;
display: flex;
background: #ffffff;
flex-direction: column; }
.form-container .title-span {
width: 100%;
height: 0.4166666667rem;
line-height: 0.4166666667rem;
display: inline-block;
background: #27384a;
font-size: 0.15rem;
color: #FFFFFF;
text-align: center; }
.form-container-titleDiv {
width: 100%;
height: 0.4166666667rem; }
.form-container-conDiv {
width: 100%;
height: 2.91rem;
display: flex;
justify-content: center;
align-items: center; }
.form-container-conDiv .layui-form {
width: 100%;
max-width: 3.3333333333rem;
align-items: center; }
.form-input-div {
width: 100%;
height: 0.4166666667rem;
display: flex;
border: 1px solid #e6e6e6; }
.form-input-icon {
width: 0.45rem !important;
height: 0.4166666667rem;
display: inline-block;
background-size: 0.45rem 0.4166666667rem;
background: #F4F4F4;
text-align: center; }
.form-ipuntIcon-img {
margin-top: 0.1rem;
width: 0.2333333333rem;
height: 0.2333333333rem; }
.form-input {
height: 0.4166666667rem;
display: inline-block;
padding-left: 0.0833333333rem;
border-width: 0px;
border-style: solid;
background-color: #fff;
border-radius: 0.0166666667rem; }
.login-btn {
width: 100%;
display: inline-block;
vertical-align: middle;
height: 0.4rem;
line-height: 0.4rem;
padding: 0 0.15rem;
background-color: #0F9AF1;
color: #fff;
white-space: nowrap;
text-align: center;
font-size: 0.15rem;
border: none;
cursor: pointer; }
.wjmm-i {
font-style: normal;
font-size: 0.1rem;
font-family: '微软雅黑';
color: #ff9400; }
.form-container-divparent {
width: 3.9416666667rem;
min-height: 4.1666666667rem;
position: relative; }
.datagrid-input {
width: 100%;
height: 0.4166666667rem;
/* line-height: 0.4166666667rem;*/
border: 0px; }
.layer-container-div {
position: absolute;
width: 3.3583333333rem;
height: 2.5833333333rem;
top: 0.9166666667rem;
left: 0.3rem;
z-index: 99;
background: #fff;
/*padding-left: 0.125rem;
padding-right: 0.125rem;*/
box-shadow: 0px 0px 6px #333;
display: none; }
.layer-title-container {
width: 100%;
height: 0.3333333333rem;
font-size: 0.1166666667rem;
font-family: "微软雅黑";
color: #fff;
background: #0E9DF1;
display: flex;
align-items: center;
justify-content: space-between; }
.layer-title-container i {
font-style: normal;
font-size: 0.15rem;
margin-right: 0.0833333333rem; }
.layer-title-container i:hover{
background-color: #ff9400;
cursor:pointer;
}
.layer-table-container{
padding-left: 0.125rem;
padding-right: 0.125rem;
}
.layer-table-container table {
width: 100%;
margin: 0.0833333333rem 0;
background-color: #fff;
color: #666; }
.layer-table-container table thead, .layer-table-container table tbody {
display: table-header-group;
vertical-align: middle;
border-color: inherit; }
.layer-table-container table tr {
transition: all .3s;
-webkit-transition: all .3s;
display: table-row;
vertical-align: inherit;
border-color: inherit; }
.layer-table-container table tr:hover{
background-color: #fafafa;
}
.layer-table-container table tr:hover .circle{
background: #FF9400;
}
.layer-table-container table th, .layer-table-container table td {
position: relative;
padding: 0.075rem 0.125rem;
min-height: 0.1666666667rem;
line-height: 0.1666666667rem;
font-size: 0.1166666667rem;
text-align: center;
border-width: 1px;
border-style: solid;
border-color: #e6e6e6;
margin: 0;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
display: table-cell;
vertical-align: inherit; }
.circle {
display: inline-block;
position: absolute;
left: 0.2083333333rem;
top: 0.0916666667rem;
height: 0.15rem;
width: 0.15rem;
border: 1px solid #ccc;
border-radius: 0.0833333333rem;
background: #a9b6c1; }
.circle:after {
border: 0.0166666667rem solid #FFFFFF;
border-left: 0;
border-top: 0;
content: "";
top: 0.0166666667rem;
left: 0.05rem;
position: absolute;
width: 0.0333333333rem;
height: 0.0666666667rem;
transform: rotate(45deg) scale(1); }
.circle-checked {
background: #FF9400; }
/*# sourceMappingURL=login_zsb.css.map */
1368
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
