表单

关于input表单的一些样式和JS问题：
input的placeholder属性字体颜色：

1
2
3
4
5
6
7
8
9
10
11
12

input::-webkit-input-placeholder {
    color: #aaa;
}
input:-moz-placeholder {
    color: #aaa;
}
input::-moz-placeholder {
    color: #aaa;
}
input:-ms-input-placeholder {
    color: #aaa;
}

1

input:focus{ border:1px solid red }

css相关能写一万年，考虑分开写了，太多了

flex布局

更多参见阮老师blog
1.意为弹性布局，块元素：display:flex;行内元素：display:inline-flex;
2.不同内核浏览器需要加前缀区分，如：display:-webkit-flex; /Safari/ 非规范属性值：display:-webkit-box
3.设为flex布局后，子元素的float,clear,vertical-align属性将失效。 非规范属性：-webkit-box-orient：vertical //垂直排列子元素
4.flex属性：
1）flex-direction:row（默认值）：主轴为水平方向，起点在左端。
row-reverse：主轴为水平方向，起点在右端。
column：主轴为垂直方向，起点在上沿。
column-reverse：主轴为垂直方向，起点在下沿
2)flex-wrap属性: nowrap（默认）：不换行。
wrap：换行，第一行在上方。
wrap-reverse：换行，第一行在下方。
3)flex-flow：属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。
4)justify-content:flex-start | flex-end | center | space-between | space-around
5)align-items: flex-start | flex-end | center | baseline | stretch;
6)当使用了flex-direction:column之后,未定宽的元素会自动适应宽度为100%；给元素加个非默认值align-self:stretch外的值就可以

grid布局

js操作rem

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<style>html{font-size:100px;}</style>
<script> 
    //屏幕适应 
    (function (win, doc) {
        if (!win.addEventListener) return;
        var html = document.documentElement;
        function setFont() {
            var html = document.documentElement;
            var k = 750;
            var clientW = html.clientWidth > 750 ? 750 : html.clientWidth;
            html.style.fontSize = clientW / k * 40 + "px";
        }
        setFont();
        setTimeout(function () {
            setFont();
        }, 300);
        doc.addEventListener('DOMContentLoaded', setFont, false);
        win.addEventListener('resize', setFont, false);
        win.addEventListener('load', setFont, false);
    })(window, document);
</script>

px em rem

1.em

与APP交互

很多时候APP中会嵌套H5的页面，这个时候与APP的交互就显得尤为重要，一般我们与APP交互会在window对象下构造一个共用函数，并且需要时返回指定约定的值，APP那边会根据约定的值去执行相应的操作，从而达到交互的目的；

1

//如：window.nativeBack = function(){return 1}

判断android和ios

一、 前言

不知道亚林兄借鉴谁的，但是我是借鉴亚林兄的，版权所有，归他

###动态插入的标签元素带有angular语法不执行解决

1
2

var uploadInfo = '上传成功！<a ng-click="quitTo('customer')">点击</a>跳转到客户列表界面';
angular.element('.modal-body').append(uploadInfo);

将uploadInfo变量通过$compile进行处理，
var ele = $compile(uploadInfo)($scope);
angular.element(‘.modal-body’).append(ele);

###依赖注入
AngularJS提供了一种非常简单的解决方法，即将依赖作为一个数组传入，数组的最后一个元素是一个函数，所有的依赖项作为它的参数。