zoukankan      html  css  js  c++  java
  • 前端开发中的一些比较实用的技巧知识

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

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

      a, img {
          -webkit-touch-callout: none; 
      }
      只要加上这样一句样式声明,在手机上长按链接和图片就不会弹出菜单了

        

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

      1 html, body {
      2     -webkit-user-select: none; 
      3     user-select: none;
      4 }
    3. 去掉移动端使用 a、input和button等标签做按钮点击时出现的蓝色外边框和灰色半透明背景

      1 a,button,input,optgroup,select,textarea{
      2     -webkit-tap-highlight-color:rgba(0,0,0,0);
      3 }
    4. 让你的移动端的滚动更加流畅

      1 body{
      2     -webkit-overflow-scrolling:touch;
      3 }
    5. sass中的圆角 (mixin函数)

       1 @mixin border-radius($radius) {
       2    -webkit-border-radius: $radius;
       3       -moz-border-radius: $radius;
       4         -ms-border-radius: $radius;
       5                border-radius: $radius;
       6 }
       7 引入mixin函数
       8 .box { @include border-radius(10px); }
       9 编译过后的结果
      10 .box {
      11     -webkit-border-radius: 10px;
      12     -moz-border-radius: 10px;
      13     -ms-border-radius: 10px;
      14         border-radius: 10px;
      15 }
    6. sass中的定位(mixin函数)

       1 @mixin abs-pos ($top: auto, $right: auto, $bottom: auto, $left: auto) {
       2       position: absolute;
       3       top: $top;
       4       right: $right;
       5       bottom: $bottom;
       6       left: $left;
       7       
       8 }
       9 引入mixin函数
      10 .box{ @include abs-pos(10px, 10px, 5px, 15px);}
      11 编译后的结果
      12 .box {
      13       position: absolute;
      14       top: 10px;
      15       right: 10px;
      16       bottom: 5px;
      17       left: 15px;
      18 }
      19         
    7. 优雅降级地使用 rem 单位


       1   @function subtractRem($size: 16) {
       2       $remSize: $size / 16px;
       3       @return $remSize * 1rem;
       4   }
       5 
       6  @mixin font-size($size) {
       7        font-size: $size;
       8        font-size: subtractRem($size);
       9   }
      10 
      11  p { @include font-size(14px)}
      12 
      13  p {
      14       font-size: 14px;
      15       font-size: 0.8rem;
      16  }
    8. 浏览器的兼容性,这个对于刚入行前端的新人来说是一个比较头疼的问题,这里分享针对非IE浏览器css-Hack写法

       1 1、Firefox
       2 
       3 @-moz-document url-prefix() { 
       4     selector {
       5         key: value; 
       6      }
       7   }
       8 
       9 例如:
      10 
      11 @-moz-document url-prefix() { 
      12      .box{
      13         color:green;
      14      } 
      15 }
      16 
      17 2、Webkit枘核浏览器(chrome and safari)
      18 
      19 @media screen and (-webkit-min-device-pixel-ratio:0) { 
      20     selector { 
      21        key: value;
      22     } 
      23 }
      24 
      25 例如:
      26 
      27 @media screen and (-webkit-min-device-pixel-ratio:0) { 
      28     .box { 
      29         color: #f00; 
      30      }
      31  }
      32 
      33 3、Opera浏览器
      34 
      35 @media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) { 
      36      head~body selector { 
      37          key: value; 
      38      } 
      39 }
      40 
      41 例如:
      42 
      43 @media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) { 
      44     head~body .box{ 
      45         background: green; 
      46     } 
      47 }
      48         
    9. 快速切换到淘宝NPM

      1 npm config set registry https://registry.npm.taobao.org
      2 
      3 // 配置后可通过下面方式来验证是否成功
      4 
      5 npm config get registry
    10. 后续继续添加.....
  • 相关阅读:
    关于游戏
    学习lucene5.5.4的笔记
    lucene中文学习地址推荐
    lucene的使用与优化
    进一步了解this和super
    被遗忘的设计模式——空对象模式(Null Object Pattern)
    Java 空对象设计模式(Null Object Pattern) 讲解
    java的动态代理机制详解
    为什么要使用代理模式
    大O 表示法
  • 原文地址:https://www.cnblogs.com/xiuqian/p/6282107.html
Copyright © 2011-2022 走看看