div置于页面底部_移动页面适配的一些实践

一、关于rem使用。

1、rem是什么

rem是(font size of the root element)的官方解释，意思就是根据网页的根元素(即html)来设置字体大小。rem不仅可以适用于字体，同样可以用于width height margin这些样式的单位。如果我们设置了：

html {

     font-size:100px;

}

那当我们想给div设置宽高为100px、50px时，即可以写成如下这样：

div {

    width:1rem;

    height:0.5rem;

}

2、rem基准值计算

我们所写出的页面是要在不同的屏幕大小设备上运行的，我们开发页面的时候，需要使用一个确定的屏幕来作为参考，一般会根据视觉稿来确定。

公司现在设计这边给出的视觉稿，基本都是按750px宽度来设计。

为什么是750px，这里涉及一个概念，dpr，即设备像素比。一般手机dpr是1，iphone 6\7\8是2，iphonex是3，可以通过js的window.devicePixelRatio获取到当前设备的dpr。

视觉稿大部分是基于iphone6的，所以我们看到的尺寸一般是双倍大小，而iphone6的屏幕大小是375px，375px * 2 = 750px。

那怎么设置html的font-size，即rem的基准值呢。

方式一：

通过js来计算，使用document.documentElement.clientWidth来获取屏幕尺寸。

假设在375px屏幕的手机上，基准的font-size设置为20px。那当在iphone6 plus这种414屏幕的手机中，font-size 即 414/375*20px = 22.08px。

这种方式，需要在head头上添加一段js脚本。

方式二:

使用vw，根据css3规范，1vw等于视口宽度的1%，代码如下所示，在375px的屏幕中，375px * 5.3333 / 100 = 20px。在414屏幕的手机中，414px * 5.3333 / 100 = 22.08px。

在不兼容vm的移动设备上，使用降级方案，font-size: 20px。

html {

    font-size:20px;

    font-size:5.333333vw;

}

注：兼容性问题(在移动端 iOS 8 以上以及 Android 4.4 以上获得支持，并且在微信 x5 内核中也得到完美的全面支持)，各浏览器对vw支持可以查看can i use vw

3、陆金所使用rem现状

目前我所在lubase中，有写:root {font-size:10px；}，没有使用根据屏幕大小来设置不同的font-size(可能有些用户的需求是在大屏手机看到更多内容吧)，所以在使用rem时，相当于都是10px。 

同时，font-size：10px，在chrome浏览器，会产生一个问题，chrome浏览器为了用户体验，会把字体小于12px，默认还原成12px。

所以，当我们需要设置边距10px，写成margin:1rem，在chrome浏览器调试时，看到的是12px。在手机app中其实是正常的10px，这点需要注意。

二、iPhonex 底部安全区域适配

因为ios要求，在iphonex底部，有34px的安全区域，此区域不能放置操作交互按钮。而我们单品页投资赎回按钮，往往会fixed到底部，所以需要做一个兼容。在框架层面，已经做了相关的处理，如底部按钮组件：

当然，我们也可以使用在lubase中定义好的class，来写自己需要的组件。

<MyComponent className="lu-iphonex" />

原代码如下：

 

三、1px边框

这个也是我在开发中视觉要求过的问题，有时候偷懒，直接在页面写了border:1px solid #ddd。最后视觉验收的时候，会说为啥你这的边框这么粗。

其实在这里，视觉同学要求的是物理像素的1px，而不是上面所说屏幕大小的1px，在dpr为2的移动设备中，屏幕大小的1px实际上是物理像素的2px。

方式一：

媒体查询，加小数的写法

.border { border: 1px solid #999 }

@media screen and (-webkit-min-device-pixel-ratio: 2) {

.border { border: 0.5px solid #999 }

}

@media screen and (-webkit-min-device-pixel-ratio: 3) {

.border { border: 0.333333px solid #999 }

}

缺点: 安卓与低版本IOS不适用, 这个或许是未来的标准写法

方式二：(目前我所的做法)使用border-image。

.border-9dacb6 {    border-width: .1rem;    -webkit-border-image: url(images/border-9dacb6.28d8f1.bf5eb77c.png) 2 2 2 2 stretch stretch;    border-style: solid}

缺点: 不支持圆角，不同颜色的边框需要使用不同的class

其它方式，可以网上自行搜索。

如想看更多文章还请关注公众号：