登录页面总结

1.页面的适应性

  方法：1.使用rem——移动端自适应性好

             2.使用媒体查询+百分比/rem

  响应式：如果只自适应移动端，使用rem，如果只适应pc，使用媒体查询+百分比/rem。

  rem的值目前有两种方法，一种是根据js来调整html的字号（淘宝有现成的插件），另一种则是通过媒体查询来调整字号。

  响应式布局的一些技术点纪录：

1. 允许网页宽度自动调整(viewport)
2. 尽量少使用绝对宽度（通过指定百分比宽度来替代: width: xx%;或者width: xxrem;）
3. 使用相对大小的字体
4. 流动布局，它的含义是，各个区块的位置都是浮动的，它的好处是，如果宽度太小，放不下两个元素，后面的元素会自动滚动到前面元素的下方，不会在水平方向overflow（溢出），避免了水平滚动条的出现。另外，绝对定位（position: absolute）的使用，也要非常小心。
5. 图片的自适应

2.关于垂直居中

  关于垂直居中有很多种方法，以下总结比较常用的方法：

1. position：absolute + 负margin-top + top: 50%；或者 position: absolute + top: 0 + bottom: 0 + margin: auto; 或者 position: absolute + transform: translateY(-50%);
2. display: flex; align-items: center; 或者flex + margin;只要在父层元素设定display:flex，接着在需要垂直居中的元素上设定margin:auto，即可自动居中; 或者flex+align-self(子元素); flex布局已兼容主流的安卓和苹果，但在PC兼容性不好，主要不兼容IE10以下以及部分旧版本的浏览器。
3. 单行文本在盒子垂直居中：line-height代替height;
4. 多对象垂直居中技巧(1): 将多个元素或多行元素当成一个行元素来看待，并将其设定为inline-block，并在该inline-block对象的外层对象使用line-height来代替height。
5. 多对象垂直居中技巧(2): :before + inline-block;利用:before伪类元素设定为100%高的inline-block，再搭配上将需要居中的子元素同样设置成inline-block后，使用vertical-align:middle达到垂直居中的目的。此方式的好处在于子元素居中可以不需要特别设定高度，但需要特别处理掉inline-block元素之间的4-5px空间这个缺陷。
6. display: table-cell + vertical-align: middle;
7. calc() 但大量使用会影响网页性能。

3.关于兼容性

  对于某些css3属性，旧版本的浏览器不支持问题。

  部分存在兼容性问题的css3属性：flex，transform ...

  解决办法：1.抛弃部分老旧版本的浏览器，比如iE6,7,8等。（看具体需求）

2.使用打包工具自动编译加上兼容前缀。

3.手动加前缀。IE：-ms-  Chrome：-webkit-  Firefox：-moz-

 

4.其他影响用户体验功能的实现方法

  1. 防止用户频繁点击提交：设置一个锁lock，如果点击提交就立刻锁上，不允许用户再次提交，直到用户提交成功；如果登录失败就把锁打开。

 2. 防止用户频繁刷新验证码：设定定时器，使用户间隔 xx毫秒后才能再次请求。

 3. 按回车键提交：监听body的keydown事件，如果keyCode的值为13（回车键），触发相应的操作。

 4. 解决浏览器input密码框变黄色问题：autocomplete="off" style="background-color: rgb(255, 255, 255) !important;"

 5. input失焦去除空格$.trim()

 6. 加loading层优化用户体验（让等待时间显得不那么漫长，也可以防止用户频繁点击）