移动端页面的踩坑总结：

1、解决手机上点击按钮的时候出现默认蓝色背景

body{line-height: 1;font-family: -apple-system-font,Helvetica Neue,Helvetica,sans-serif;background: #fff;-webkit-tap-highlight-color:rgba(0,0,0,0);  /* 解决安卓手机按钮点击出现蓝色背景*/}

2、隐藏微信浏览器的滚动条

::-webkit-scrollbar{display:none;/* 隐藏微信浏览器滚动条 */}

3、行数展示控制

.line1{white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
.line2{white-space: normal!important;display: -webkit-box!important;-webkit-line-clamp: 2;overflow: hidden;text-overflow: ellipsis;-webkit-box-orient: vertical;}

4、图片的不高清，可以通过更换图片来解决，也可加入下方代码，可以让图片更加清晰一点

img{image-rendering:-moz-crisp-edges;image-rendering:-o-crisp-edges;image-rendering:-webkit-optimize-contrast;image-rendering: crisp-edges;-ms-interpolation-mode:nearest-neighbor;/* 保持图片缩小后不模糊 */}

5、关于pre标签的兼容处理

pre{white-space:pre-wrap;white-space:-moz-pre-wrap;white-space:-o-pre-wrap;word-wrap:break-word;word-break: break-all;}

6、通过css实现禁止点击事件

.disabled { pointer-events: none;/*禁止点击事件*/ }

7、弹性布局：上下两端固定，中间内容自动撑满

.content{height: 100%;display: flex;flex-direction: column;}
.scroll-cont{flex: 1;overflow-x: hidden;overflow-y: scroll;position: relative;z-index: 1;}

<div class="content">
    顶部固定内容
    <div class="scroll-cont">
        中间撑满剩余高度
    </div>
    底部固定内容
</div>

8、某些需要页面底部放版权信息，我之前是用的定位来实现的，但是页面中有输入框之类的需要弹出键盘，就会有很多兼容问题要处理了，需要写很多js，就很麻烦；后来到朋友那里了解到flex的这种功能，就直接引用了；可以配合第6点使用

.fixed-flex{display: flex;flex-wrap: wrap;flex-direction: row;justify-content: flex-start;align-items: center;min-height: 100%;align-content: space-between;box-sizing: border-box;position: relative;}
.fixed-flex-box{display: flex;flex-flow: column nowrap;justify-content: flex-start;box-sizing: border-box;position: relative}
.fixed-flex>div{width: 100%;}

<div class="fixed-flex">
    <div class="fixed-flex-box">
         内容区域
    </div>
    底部版权信息
</div>

9、老生常谈的 1px 问题；我这里使用的是scss方法

• 9.1 ：下边框

 @mixin borderBottom-1px($borderColor) {
    position: relative;
    &::before {
        content: '';
        display: block;
        position: absolute;
        left: 0;
        right:0;
        bottom: 0;
        width: 100%;
        border-bottom: 1px solid $borderColor;
        transform: scaleY(0.5);
      }
    //引用方法  @include borderBottom-1px(#c1b5b5);
  }

• 9.2：上边框（同理，把 bottom 改为 top 就行）

• 9.3：四边都有边框及圆角

 @mixin border-1px ($color, $radius) {
    position: relative;
    &::before{
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      border: 1px solid $color;
      border-radius: rem($radius);
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      width: 200%;
      height: 200%;
      -webkit-transform: scale(0.5);
      transform: scale(0.5);
      -webkit-transform-origin: left top;
      transform-origin: left top;
    }
    //引用方法 @include border-1px(#c1b5b5,5);
  }

• 9.4：清除边框

 @mixin border-none(){
    &:before{
      display: none;
    }
  }

• 9.5：使用

    <p class="borderTop">上边框</p>
    <p class="borderBottom" >下边框</p>
    <p class="border">闭合边框</p>

.borderTop{@include borderTop-1px(#c1b5b5);}
.borderBottom{@include borderBottom-1px(#c1b5b5);}
.border{@include border-1px(#c1b5b5,5);}

10、有时候UI小姐姐的设计稿中会有很多种箭头样式，线性的，实心的，箭头的大小、颜色、圆角、粗细等等都或许会有不同，可能是不同场景会用到不一样的效果吧；如果项目多了，切图的话就会有很多，修改的话只能替换图片，就会有些不方便；

如果引用字体icon库的话，就会增加不必要的内存，因为有些是不需要的，就像阿里的iconfont库，虽说可以自己创建项目，但是添加或替换图片后，都要更改一下链接，或者下载下来替换文件，就很麻烦；所以我就自己写了一套公用的样式库

• 10.1：线性箭头

@mixin arrowIcon($direction,$borderWidth,$color,$width){
    position: relative;
    &::after{
      content: "";
      display: block;
      border-width: $borderWidth+px $borderWidth+px 0 0;
      border-style: solid;
      border-color: $color;
      padding: $width+px;
      position: absolute;
      right: ($width+1)+px;
      top: 50%;
    }
    @if $direction == "left" {
      padding-right: rem(28);
      &::after{
        transform: rotate(-135deg) translate(-8%,72%);
      }
    }@else if $direction == "top" {
      padding-right: rem(28);
      &::after{
        transform: rotate(-45deg) translate(26%,12%);
      }
    }@else if $direction == "right" {
      padding-right: rem(20);
      &::after{
        transform: rotate(45deg) translateY(-50%);
      }
    }@else if $direction == "bottom" {
      padding-right: rem(28);
      &::after{
        transform: rotate(135deg) translate(-65%,32%);
      }
    }

    // @include arrowIcon(left,1,#333,4)
  }

• 使用

<span class="arrLeft">left</span>
<span class="arrRight">right</span>
<span class="arrTop">top</span>
<span class="arrBottom">bottom</span>

.arrLeft{@include arrowIcon(left,1,#333,3)}
.arrRight{@include arrowIcon(right,1,#333,3)}
.arrTop{@include arrowIcon(top,1,#333,3)}
.arrBottom{@include arrowIcon(bottom,1,#333,3)}

• 10.2：实心箭头

 @mixin trigonIcon($direction,$Width1,$Width2,$color){
    position: relative;
    &::after{
      content: "";
      display: inline-block;
      border-style: solid;
      margin-left: rem(8);
    }
    @if $direction == "left" {
      &::after{
        border-width: rem($Width1) rem($Width2) rem($Width1) 0;
        border-color: transparent $color transparent transparent;
      }
    }@else if $direction == "top" {
      &::after{
        border-width: 0 rem($Width1) rem($Width2) rem($Width1);
        border-color: transparent transparent $color transparent;
      }
    }@else if $direction == "right" {
      &::after{
        border-width: rem($Width1) 0 rem($Width1) rem($Width2);
        border-color: transparent transparent transparent $color;
      }
    }@else if $direction == "bottom" {
      &::after{
        border-width: rem($Width2) rem($Width1) 0 rem($Width1);
        border-color: $color transparent transparent transparent;
      }
    }

    // @include trigonIcon(left,8,12,#333)
  }

• 使用

<span class="triLeft">left</span>
<span class="triRight">right</span>
<span class="triTop">top</span>
<span class="triBottom">bottom</span>

.triLeft{@include trigonIcon(left,8,12,#333)}
.triRight{@include trigonIcon(right,8,12,#333)}
.triTop{@include trigonIcon(top,8,12,#333)}
.triBottom{@include trigonIcon(bottom,8,12,#333)}

11、产品会提需求说点击导航栏的时候，自动往前或往后移动，定位在中间显示；之前用的方法存在一些兼容问题，所以又单独处理了一版；因为用的是swiper的，所以页面中需要相关文件

<link rel="stylesheet" href="css/swiper.min.css">

<div class="swiper-container nav" id="nav">
    <div class="swiper-wrapper nav-list">
    </div>
</div>

<script src="js/swiper.min.js"></script>
<script src="js/navBarScroll.js"></script>  <!-- 封装插件的文件 -->
<script>
    $(function(){
        $('.nav-list').navBarScroll(
            data = [
                {id: 0, pid: 0, name: "全部", title: "全部"},
                {id: 1, pid: 0, name: "绩效考核表", title: "绩效考核表"},
                {id: 2, pid: 0, name: "考核表", title: "考核表"},
                {id: 3, pid: 0, name: "专项成交表", title: "专项成交表"},
                {id: 4, pid: 0, name: "成交统计表", title: "成交统计表"},
            ]
        );
    })
</script>

;
(function($){
    $.fn.navBarScroll = function(data){
        //动态获取导航数据
        // get_menu()
        function get_menu() {
            $.ajax({
                type: 'get',
                url: '',
                dataType: 'json',
                data: {},
                success: function (data) {
                    var str = '';
                    if (data.error_code === 0) {
                        $.each(data.data, function (k, v) {
                            v.cate_name = v.name.substring(0, 2);
                            if (k === 0) {
                                str += ' <div class="swiper-slide nav-a selected" navid="'+v.id+'"><span>' + v.name + '</span></div>';
                            } else {
                                str += ' <div class="swiper-slide nav-a" navid="'+v.id+'"><span>' + v.name + '</span></div>';
                            }
                        });
                        str += ' <div class="bar"><div class="color"></div></div>';
                        $('#nav .swiper-wrapper').html(str);
                    }
                }
            });
        }
      
        get();
        function get() {
            var str = '';
            $.each(data,function (k, v) {
                if (k === 0) {
                    str += ' <div class="swiper-slide nav-a navBar_item active" navid="'+v.id+'"><span>' + v.name + '</span></div>';
                } else {
                    str += ' <div class="swiper-slide nav-a navBar_item" navid="'+v.id+'"><span>' + v.name + '</span></div>';
                }
            });
            str += '<div class="bar"><div class="color"></div></div>';
            $('#nav .swiper-wrapper').html(str);
        }
        var lodW = ($('.nav-a.active').outerWidth(true)-$('.bar').width())/2;
        $('.bar').css({"transition-duration": "100ms", "transform": "translateX(" + lodW + "px)"});

        //点击导航高亮
        $("body").on("click", '.nav-a', function () {
            var moveX = $(this).position().left + $(this).parent().scrollLeft();
            var pageX = document.documentElement.clientWidth;
            var blockWidth = $(this).width();
            var left = moveX - (pageX / 2) + (blockWidth / 2);
            $(".nav-list").animate({
                scrollLeft: left,
            });
            $(".nav-a").removeClass("active");
            $(this).addClass("active");
            var cate_index = $(this).prevAll().length;
            var nowItemW = $(this).outerWidth(true);
            
            var pxs = 0;
            for(let i=0;i<=cate_index;i++){
                pxs += parseInt($('.nav-a').eq(i).outerWidth(true));
                // 移动距离 = 当前元素前面所有元素的宽度总合 - 当前元素的宽度
            
                $('.bar').css({"width":nowItemW,"transition-duration": "100ms", "transform": "translateX(" + (pxs-nowItemW) + "px)"})
            }

        });
    }
})(jQuery);
    

补充

字体小于12px设置；给的设计稿中或许会出现小于12px的字体，但是浏览器支持最小的就是12px，怎么办呢？ 那么就让它支持小于12px吧，添加下面该属性即可：

-webkit-text-size-adjust: none;

当然最好不要全局添加，具体原因参考度娘；如何禁止小于12px呢

-webkit-text-size-adjust:'auto' !important';