弹性盒模型及移动端自适应布局
以下仅为常用的参数,更多参数访问:弹性盒
弹性盒子由弹性容器(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