css/js(工作中遇到的问题)-2

iOS6 中的 apple-itunes-app tag

• 例子

//iOS6, safari才有效

<meta
  name="apple-itunes-app"
  content="
    app-id=myAppStoreID,
    affiliate-data=myAffiliateData,
    app-argument=myURL"
    >

IOS判读user-agent

if (/xxxx/.test(req.headers['user-agent']))

返回的状态码

• 要团队约定;一般删除成功返回204，其他成功返回200;

css自适应

• 设置高度自适应

#one {
  position: absolute;
  width: 100%;
  top: 0;
  height: percentage(1/8);
}

#two {
  position: absolute;
  width: 100%;
  top: percentage(1/8);
  height: percentage(4/8);
}

#three {
  position: absolute;
  width: 100%;
  top: percentage(1/8 + 4/8);
  height: percentage(2/8);
}

#four {
  position: absolute;
  width: 100%;
  top: percentage(1/8 + 4/8 + 2/8);
  bottom: 0;
}

• 居中

.centered (@horizontal: 0, @vertical: 0) {
  left: @horizontal;
  top:  @vertical;
  transform: translate(-@horizontal, -@vertical);
  -webkit-transform: translate(-@horizontal, -@vertical);
  -ms-transform: translate(-@horizontal, - @vertical);
}

• 设置背景图片

.bgImg(@url: '0') {
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url(@url);
}

一个屏障效果

.modal {
  position: fixed;
  z-index: 999;
  top: 0;
  height: 120%;
  width: 100%;
  background-color: rgba(0,0,0,.5);
  -webkit-animation-duration: .14s;
  animation-duration: .14s;
}

常用的正则验证

• 例子

一个css书页折叠效果原型

.example {
     width: 0;
      height: 0;
      border-bottom: 100px solid black;
      border-left: 100px solid red;
     /*transform: skewX(18deg);*/
}

判断数字类型

isNaN(Number(id)) || isNaN(parseInt(id))

获取ip地址(nodejs)

export default function getClientIp(req) {
  let ipAddress, forwardedIpsStr = req.headers['x-forwarded-for'];
  forwardedIpsStr && (ipAddress = forwardedIpsStr.split(',')[0]);
  !ipAddress && (ipAddress = req.connection.remoteAddress || req.socket.remoteAddress);
  return ipAddress;
};

less文件中键入css文件

• @import (inline) "../normalize.css";

制作linear-gradient背景

.gradient (@startColor, @endColor) {
  background: linear-gradient(135deg, @startColor 50%, @endColor 50%);
  background: -webkit-linear-gradient(135deg, @startColor 50% , @endColor 50%);
  background: -moz-linear-gradient(135deg, @startColor 50% , @endColor 50%);
  background: -ms-linear-gradient(135deg, @startColor 50% , @endColor 50%);
  background: -o-linear-gradient(135deg, @startColor 50% , @endColor 50%);
  background-color: @startColor;
}

判断元素是否在当前屏幕内

var body = document.body;
var win = getViewport();
var info = document.getElementById('info');
var box = document.getElementById('box');

function getViewport() {
    // http://andylangton.co.uk/blog/development/get-viewport-size-width-and-height-javascript
    var e = window,
        a = 'inner';
    if (!('innerWidth' in window)) {
        a = 'client';
        e = document.documentElement || body;
    }
    return {
        width: e[a + 'Width'],
        height: e[a + 'Height']
    };
}

function getCurPos() {
    var pos = box.getBoundingClientRect();
    if (pos.top > win.height) {
        info.innerText = '我在下面';
    } else if (pos.bottom < 0) {
        info.innerText = '我在上面';
    } else if (pos.left > win.width) {
        info.innerText = '我在右边';
    } else if (pos.right < 0) {
        info.innerText = '我在左边';
    } else {
        info.innerText = '我在当前屏';
    }
}

window.addEventListener('scroll', getCurPos, false);
window.addEventListener('resize', function() {
    win = getViewport();
  　getCurPos();
}, false);

去除inline-block间隙

• 例子

关于透明度

*设置了opacity后，子元素会继承且不能重写;使用rgba;

调用原生混合中的webview暴露的方法时

• 注意可能上下文变化

var redirect = (typeof JavaScriptInterface === 'object') ? (function (func) {
  return function () {
    return func.apply(JavaScriptInterface, arguments)
  }
})(JavaScriptInterface.redirectTo) : redirectTo ;

生成三角形

• border-width;

• background: linear-gradient();

//生成环形凹角标

background: #58a;
background:
    radial-gradient(circle at top left,
             transparent 15px, #58a 0) top left,
    radial-gradient(circle at top right,
             transparent 15px, #58a 0) top right,
    radial-gradient(circle at bottom right,
             transparent 15px, #58a 0) bottom right,
    radial-gradient(circle at bottom left,
             transparent 15px, #58a 0) bottom left;
background-size: 50% 50%;
background-repeat: no-repeat;

旋转

transform: rotate(-45deg);

transform: skewX(-45deg);