H5页面（rem）

最近刚接手一个新活手机H5页面（浏览器和微信打开），因为时间紧任务急，快速在上网也看了一些资料，先简单整理下实现过程、过程遇到的坑，及后来如何填的坑。毕竟是这方面的小白，可能存在些许偏差，有机会会继续深度学习。

一.实现过程

1. 设置meta标签

<meta name="viewport"   content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
复制代码

使用js给meta标签赋值

var scale = 1 / devicePixelRatio;
document.querySelector('meta[name="viewport"]').setAttribute('content','initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
复制代码

2.肯定手机端视觉稿大小

设计稿宽度/100，例如我接收到视觉稿大小是375px * 665px,这里求得的值就是3.75

3.使用js给html的font-size动态赋值，并监听resize，再次调用给HTML的font-size赋值的方法

document.documentElement.style.fontSize = document.documentElement.clientWidth / 3.75 + 'px';
复制代码

4.在scss文件中，定义方法将px转为rem

@function torem($px){//$px为须要转换的字号
    @return $px / 100px * 1rem; //100px为根字体大小
}
复制代码

5. 按照设计稿中标注的宽度和高度，使用torem方法设置元素的属性值

例如：

width:torem(24px);
height:torem(24px);
复制代码

6. 页面中的文字大小不建议使用torem方式处理，能够结合css3媒介查询来设置元素的文字大小

二.踩过的坑

这个h5页面是用做宣传推广让用户注册，因此就是简单作的几屏介绍页面，中间内嵌了一个iframe注册页面，及最后的注册成功页面。 因此我就把它作成一个大长屏，经过判断用户上滑下滑来让屏幕滑动到对应的第n屏，在几屏最外层的容器上设置transform:translate()或者margin-top值,由于我貌似看到有说微信内置浏览器不必定对css3有很好的兼容性，因此我最终设置的是margin-top（要根据你的页面布局来）。

1.踩坑来了，在微信内置浏览中下滑与微信的默认动做冲突（针对android,ios没有），解决方式: 监听ontouchmove和ontouchend事件的元素的css中加上

touch-action: none;
复制代码

说实话如今css真的是愈来愈强大了，开心~ 你说之后我就专一在css上有前途嘛？？？？？

2.iframe没办法响应手指的touch ,后来是在注册页面加的touch监听,使用html5的postMessage解决的跨域，跨窗口消息传递是向上仍是向下滑动https://www.cnblogs.com/dolphinX/p/3464056.html

3.表单出现软键盘时布局错乱

www.cnblogs.com/hellolm/p/4… 暂时就想起这么多，纯粹小白上路，可能会有误差，还望不喜勿喷，(^__^) 嘻嘻……。