分享一下自己最近写的一个移动端项目积累的一些实用技巧

1·样式重置文件
请注意下面清除内外边距等样式并未使用通配符选择器*

一开始我还以为因为通配符选择器的权重值太低
后来我在一篇博客上看到并不是，这里是不使用通配符选择器，主要是因为选择器性能

*{}计算次数惊人，他会去遍历所有DOM元素，特别消耗浏览器性能
而下面的写法只会去检索我们写的那些元素，极大地节省了性能

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

.clearfix::after {
    content: ' ';
    visibility: hidden;
    display: block;
    height: 0;

    clear: both;
}

.one-line {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.hide {
    display: none;
}
/* 这里主要是为了配合rem*/
html,body{
	width:100%;
}

2·移动端适配

1. 在我们写移动端项目之前，我们需要先针对viewport这个meta标签进行配置

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum=1.0,user-scalable=no">

2. 我这里用的是rem为单位，下面的代码是我对rem的一些初始设置，把它写在每个页面的body前

<script>
        (function(){
            var docEl = document.documentElement;

            function setRemUnit() {
                // 获取rem的基准值
                var rem = docEl.clientWidth / 10;
                // 动态设置HTML根元素的font-size
                docEl.style.fontSize = rem + "px";
            }
            setRemUnit();
            // 窗口大小变化时  触发
            window.onresize = setRemUnit();
            // 窗口出现在当前屏幕时  （有浏览器兼容性问题 ）
            window.addEventListener('pageshow',function(e){
                if (e.persisted) {
                    setRemUnit();
                }
            })
        })();
    </script>

3. 移动端1像素边框的问题

如果我们的手机屏幕分辨率比较高，是一个二倍屏或者三倍屏，如果我们在页面上去写border-bottom: 1px; 这个时候我们写的是1px，但实际上它是css像素，并非物理像素，我们仔细观察的话，在二倍屏或者三倍屏上它实际上不是1个物理像素，而是两个物理像素或者三个像素的高度，为了解决多倍屏里面1像素边框会被显示成多像素边框的问题，需要引入一个解决方案，这个方案是一个css文件

有关移动端1像素边框的问题，大家可以去看下我的一篇博客移动端1像素边框的问题

4. 移动端使用click绑定点击事件，300ms延迟问题

在移动端开发中，在某些机型上，某些浏览器上，当使用click事件的时候，这个click事件会延迟三百毫秒再去执行，这样会带来很不好的用户体验，解决这个问题我们可以引入一个fastclick库，然后我们就可以完美地使用click事件了，那么如何引用呢？

这需要我们在终端运行：npm install fastclick --save，安装完成了之后，我们就可以在项目中去引用这个模块，通过fastclick.attach()方法，把他绑定到document.body上
代码是fastclick.attach(document.body)

3·渲染DOM结构时多用模板字符串，可以提升网页加载效率
4·推荐一个Vscode 插件，可以实现px直接转rem
下面截图给出安装步骤