前端开发中的一些比较实用的技巧知识

　　对于一个刚入前端的新手来说，在前端开发过程中会遇到各种各样的麻烦和坑，这样很多时候回让开发者的信息受到打击，作为一个稍微好一点的前端菜鸟来说，今天就给刚入前端的新手们分享一些比较实用的开发技巧，让之少走一些弯路

1. 移动端禁止长按链接与图片弹出菜单
   
   

   a, img {
       -webkit-touch-callout: none; 
   }

   只要加上这样一句样式声明，在手机上长按链接和图片就不会弹出菜单了

   　　

2. 移动端禁止选中文本（如项目中无文本选中需求，此项声明建议加上）
   
   

   html, body {
       -webkit-user-select: none; 
       user-select: none;
   }

    

3. 去掉移动端使用 a、input和button等标签做按钮点击时出现的蓝色外边框和灰色半透明背景
   
   

   a,button,input,optgroup,select,textarea{
       -webkit-tap-highlight-color:rgba(0,0,0,0);
   }

    

4. 让你的移动端的滚动更加流畅
   
   

   body{
       -webkit-overflow-scrolling:touch;
   }

    

5. sass中的圆角 (mixin函数）
   
   

   @mixin border-radius($radius) {
      -webkit-border-radius: $radius;
         -moz-border-radius: $radius;
           -ms-border-radius: $radius;
                  border-radius: $radius;
   }
   引入mixin函数

   .box { @include border-radius(10px); }

   编译过后的结果
   .box {
       -webkit-border-radius: 10px;
       -moz-border-radius: 10px;
       -ms-border-radius: 10px;
           border-radius: 10px;
   }

    

6. sass中的定位(mixin函数）
   
   

   @mixin abs-pos ($top: auto, $right: auto, $bottom: auto, $left: auto) {
         position: absolute;
         top: $top;
         right: $right;
         bottom: $bottom;
         left: $left;
         
   }
   引入mixin函数
   .box{ @include abs-pos(10px, 10px, 5px, 15px);}
   编译后的结果
   .box {
         position: absolute;
         top: 10px;
         right: 10px;
         bottom: 5px;
         left: 15px;
   }
           

    

7. 优雅降级地使用 rem 单位
   
   
   

     @function subtractRem($size: 16) {
         $remSize: $size / 16px;
         @return $remSize * 1rem;
     }
   
    @mixin font-size($size) {
          font-size: $size;
          font-size: subtractRem($size);
     }
   
    p { @include font-size(14px)}
   
    p {
         font-size: 14px;
         font-size: 0.8rem;
    }

    

8. 浏览器的兼容性，这个对于刚入行前端的新人来说是一个比较头疼的问题，这里分享针对非IE浏览器css-Hack写法
   
   

   1、Firefox
   
   @-moz-document url-prefix() { 
       selector {
           key: value; 
        }
     }
   
   例如：
   
   @-moz-document url-prefix() { 
        .box{
           color:green;
        } 
   }
   
   2、Webkit枘核浏览器(chrome and safari)
   
   @media screen and (-webkit-min-device-pixel-ratio:0) { 
       selector { 
          key: value;
       } 
   }
   
   例如：
   
   @media screen and (-webkit-min-device-pixel-ratio:0) { 
       .box { 
           color: #f00; 
        }
    }
   
   3、Opera浏览器
   
   @media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) { 
        head~body selector { 
            key: value; 
        } 
   }
   
   例如：
   
   @media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) { 
       head~body .box{ 
           background: green; 
       } 
   }
           

    

9. 快速切换到淘宝NPM
   
   

   npm config set registry https://registry.npm.taobao.org
   
   // 配置后可通过下面方式来验证是否成功
   
   npm config get registry

    

10. 后续继续添加.....