css里zoom和scale的区别

CSS相关
CSS
  1. zoom的缩放是相对于左上角的；而scale默认是居中缩放；
  2. zoom的缩放改变了元素占据的空间大小；而scale的缩放占据的原始尺寸不变，页面布局不会发生变化；
  3. 对文字的缩放规则不一致。zoom缩放依然受限于最小12像素中文大小限制；而scale就是纯粹的对图形进行比例控制，文字50%原来尺寸。

移动端自适应的代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<script>
(function () {
    var wr = window.innerWidth / window.innerHeight;
    var _width = 750;
    // iphone6截去title栏
    if (wr > 750 / 1220) {
        _width = Math.floor(wr * 1220);
    } else {
        _width = 750;
    }
    var ua = navigator.userAgent;
    if (/Android (\d+\.\d+)/.test(ua)) {
        var version = parseFloat(RegExp.$1);
    if (version > 2.3) {
        document.write('<meta name="viewport" content="width=' + _width +
        ',user-scalable=no,target-densitydpi=device-dpi,minimal-ui">')
    } else {
        document.write('<meta name="viewport" content="width=' + _width +
        ',target-densitydpi=device-dpi">')
    }
    } else if (/QQAC_Client_iOS/.test(ua)) {
        document.write('<meta name="viewport" content="width=' + _width +
        ',maximum-scale=0.5,minimum-scale=0.5">');
    } else {
        document.write('<meta name="viewport" content="width=' + _width +
        ',user-scalable=no,target-densitydpi=device-dpi,minimal-ui">')
    }
})();
</script>

用了上述这个就可以使用和设计稿一样的尺寸来写css了
但是遇到第三方库的时候（比如弹出层）会出现文字、边框很小，（基本上插件也会用px作为长度单位）
解决方法是在第三方库的最顶层加个css：zoom：2；

例如：

1
2
3
.pace{
    zoom:2;
}

具体差别可查看：
https://www.zhangxinxu.com/study/201511/zoom-scale.html

另外一种方法设置 rem

1
2
3
4
5
6
7
8
9
10
11
//设置1rem为100px
initpage(); //根据设备变更字体大小
$(window).resize(function() {
    initpage();
})

function initpage() {
    var view_width = document.getElementsByTagName('html')[0].getBoundingClientRect().width;
    var _html = document.getElementsByTagName('html')[0];
    _html.style.fontSize = (view_width / 375) * 100 + 'px';
}

移动端常见样式设置

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

 /* ios 手机端 input 框上方有内阴影 */
.input{
    -webkit-appearance:none;
}

/* 修改placeholder的样式设置 */
::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:    #909;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:    #909;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:    #909;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color:    #909;
}

/* 去掉点击区域的边框阴影效果 */
div { /*关键代码*/ -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }

a:hover伪类在ios移动端浏览器内无效的解决方法

1
<body ontouchstart>