弹性盒模型-flex

弹性盒模型及移动端自适应布局

以下仅为常用的参数，更多参数访问：弹性盒

弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。

容器属性

属性	描述	常用值(前面为默认值)
flex-direction	主轴方向	row/column
flex-warp	是否换行	nowrap/wrap
flex-flow	上边两个属性的简写	row nowrap
align-items	纵轴的对齐方式	stretch/center
justify-content	主轴的对齐方式	flex-start/center/space-between/space-around
align-content	修改 flex-wrap 属性的行为，类似 align-items, 但不是设置子元素对齐，而是设置行对齐

子元素属性

属性	描述	常用值(前面为默认值)
flex-grow	设置或检索弹性盒子元素的扩展比率。	0
flex-shrink	指定了 flex 元素的收缩规则。	1
flex-basis	用于设置或检索弹性盒伸缩基准值	auto
flex	上边三个参数的简写	0 1 auto

移动端自适应布局rem

• meta标签

<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">

• html5.js

   //适配兼容
   (function (doc, win) {
    console.log(doc, win)
    // var docEle = doc.documentElement;
    const dpr = Math.min(win.devicePixelRatio, 3),
        scale = 1 / dpr,
        resizeEvent = 'orientationchange' in window ? 'orientationchange' : 'resize';
 
    var recalCulate = function () {
        var docEle = document.documentElement,
            w = docEle.clientWidth,
            num = (w > 750 ? 750 : w) / 750;       // **此时的750就是你设计稿的尺寸
        docEle.style.fontSize = (num * 100).toFixed(1) + 'px';
    };
    recalCulate();
    if (!doc.addEventListener) return;
    win.addEventListener(resizeEvent, recalCulate, false);
})(document, window);

• 默认尺寸大小

假设你的盒子50px，那么就是50/37.5 = 1.33333333rem