关于简书项目满屏登录框的总结

设计稿如下：

初看这张图可能感觉不出什么，我们来对比下京东的登录界面。

京东的登录界面，连同附带的图片，他们是不满屏的，而我手上的登录界面图片却是满屏的。对于京东这种不满屏的，就像我昨天分析的那篇博客那样，我们设一个wrap盒子的宽度为1000px把图片和登录都丢到里面就可以一劳永逸，不管你的电脑分辨率是多少，你看到的登录框和图片大小都不变，唯一改变的只是两边的留白。而我们满屏的登录界面可以这样做吗？就我目前所学的知识，我认为单纯的设定一个wrap盒子的大小为1000px甚至是更大是不可行的。因为从设计稿中可以看出来，两边的留白基本是没有了，所以对于1920的电脑来说，wrap应该是1700px左右，而对于1366来说，wrap又变成了1100px左右，所以设死一个wrap很明显是不行的。那么这时候或许我们可以使用百分比了。例如，把wrap设成90%，同时居中，这样不管在什么分辨率下，我们的登录框距离右边的位置都是那么的靠近，而图片的话就根据屏幕的大小进行适应，设一个背景图片的background-size:contain，让它自适应缩放。但是最终我并没有单纯的使用百分比布局，因为我觉得百分比布局在高度处理上存在一些问题，所以使用了rem布局，rem布局的话，我感觉和百分比基本接近，只是它的话更加精确，例如这段代码

 window.onload = function () {
//            关于font-size踩了一个坑，谷歌浏览器的font-size不得小于12px。
            (function () {
                var width = document.body.clientWidth;
                var clip = width / 10;
                document.documentElement.style.fontSize = clip + "px";
            }())
        }

我们获取屏幕的宽度同时切割成为10份，赋给我们html的fong-size，也就是我们的1rem代表的值就是当前屏幕宽度的10分之一。或许你会觉得切成10份，每份太大了，比如1920那么每份就是192px了，这样会显得难以控制。其实这样设是有原因的，我刚开始设的是100份也即是每份大小是19.2px，但是当我对浏览器进行缩小的时候，我发现页面布局出bug了，最后想了好久才发现原来谷歌浏览器支持的最小font-size是12px，如果所设的值低于12px就会自动变成12px。所以我才设10份的，避免这个bug。

然后呢，既然我们使用了rem布局，那么对于这张设计稿应该怎么处理？我使用的办法是这样，比如我们的设计稿大小是1400px长的，那么它的1rem就相当于140px，所以我们把设计稿的所有长宽都量出来，比如登录框的大小是长396px，高407px，换算成rem单位制就是396/140=2.83rem，而高407/140=2.90rem。我们把这个rem单位制的长宽写进代码中就是这样的，

 .login {
            width: 2.8rem;
            height: 2.9rem;
            background: url("./img/登陆界面_03.png");
            background-size: contain;
            background-repeat: no-repeat;
            position: absolute;
            right: .507rem;
            top: .229rem;
            padding-left: 0.179rem;
            padding-top: 0.257rem;
            box-sizing: border-box;
        }

其中，除了宽和高之外，还有登录框距离右边浏览器边缘的距离等都换算成了rem单位制，这样的话，无论我们的分辨率多少，我们看到的这个页面都是等比例缩放的，然而，要是考虑浏览器兼容性的话就遇到难点了，那样只能是百分比布局了。