REM自适应JS（px自动转化为rem）

最新推荐文章于 2024-09-06 14:26:03 发布

alleged

最新推荐文章于 2024-09-06 14:26:03 发布

阅读量3.2w

点赞数 2

前文介绍了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 */