设置弹性盒要用到的属性

Posted 2020-10-31 莫忘初衷双

1· 【 html中自适应设置】：meta和script

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

【和】

<script>

(function (doc, win) {
var docEl = doc.documentElement,
resizeEvt = ‘orientationchange‘ in window ? ‘orientationchange‘ : ‘resize‘,
recalc = function () {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
if (clientWidth >= 650) {
docEl.style.fontSize = ‘100px‘;
} else {
docEl.style.fontSize = 100 * (clientWidth / 360) + ‘px‘;
}
};

if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener(‘DOMContentLoaded‘, recalc, false);
})(document, window);
</script>

 

 

 

2· 【 less中配置】：：

@import url(reset.css); //调用样式
.full(@w, @h, @bg) {
//封装宽 高 背景
width: @w;
height: @h;
background: @bg;
}
//封装弹性盒 父级属性 排序方式 左中右！！
.box(@ver:horizontal){
display: -webkit-box;
-webkit-box-orient: @ver;
}

html,body,.content{
width: 100%;
height: 100%;
overflow: auto;
// background: red;
}

.content{
.box(vertical);

.header{

}

section{
-webkit-box-flex: 1;
background: #f3f4f5;
overflow: auto;
.box(vertical);
}

footer{
.full(100%,.7rem,white);
.box(horizontal);
border-top: 2px solid #ebecec;
}


}