移动界面响应式布局meta设置

<!-- 强制让文档与设备的宽度保持1:1 -->
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<!-- 忽略页面中的数字识别为电话号码 -->
<meta name="format-detection" content="telephone=no">
<!-- 忽略页面中的邮箱格式为邮箱 -->
<meta name="format-detection" content="email=no"/>

rem布局

rem就上根元素(html)的字体大小。html中的所有标签样式凡涉及到尺寸的都可以放心大胆的用rem作为单位，如: height、width、padding、margin、font-size、left、top、bottom、right
单位换算：font-size设为100px，1rem = 100px

// 动态设置html的字体
(function(win, doc) {
    if (!win.addEventListener) return;
    var html = document.documentElement;

    function setFont() {
        var html = document.documentElement;
        var k = 750;
        html.style.fontSize = html.clientWidth / k * 100 + "px";
    }
    setFont();
    setTimeout(function() {
        setFont();
    }, 300);
    doc.addEventListener(‘DOMContentLoaded‘, setFont, false);
    win.addEventListener(‘resize‘, setFont, false);
    win.addEventListener(‘load‘, setFont, false); 
})(window, document)

使用iconfont字体图标

登录iconfont.cn, 选择你需要的图标保存至项目。并生成在线连接, 将代码保存至本地即可使用。

// style/iconfont.css
@font-face {
  font-family: "iconfont"; /* Project id 2524131 */
  src: url(‘//at.alicdn.com/t/font_2524131_8g1ggguc7ig.woff2?t=1619912299648‘) format(‘woff2‘),
       url(‘//at.alicdn.com/t/font_2524131_8g1ggguc7ig.woff?t=1619912299648‘) format(‘woff‘),
       url(‘//at.alicdn.com/t/font_2524131_8g1ggguc7ig.ttf?t=1619912299648‘) format(‘truetype‘);
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-shuben:before {
  content: "\e6ca";
}

iconfont 的使用
全局引入：在main.js文件中进行全局引入, import ‘./style/iconfont.css‘
具体使用： <span class="iconfont icon-shuben‘><!--书本--></span>

【记】移动布局