移动端布局

目录 

1.1 早期流式布局即百分比布局

2.1 flex布局(ie6,7,8,9无效)

2.2 flex主轴对齐方式

2.3 flex侧轴对齐方式

2.4 修改主轴方向

3.1 移动适配

3.2 vw,vh(相对视口的尺寸计算结果)

---

1.1 早期流式布局即百分比布局

宽度自适应，高度固定 浮动+百分比

2.1 flex布局(ie6,7,8,9无效)

设置方式

父元素添加 display:flex;子级水平排列

默认主轴：横着的轴 侧轴：竖着的轴

2.2 flex主轴对齐方式

justify-content:flex-start/flex-end/center/space-between/space-evenly/space-around;

flex-start：默认值，起点开始依次排列

flex-end：终点开始依次排列

center：沿主轴居中排列

space-around：空白间距在盒子两侧

space-between：空白间距在相邻盒子之间

space-evenly：盒子与容器之间间距相等

2.3 flex侧轴对齐方式

align-items:flex-start/flex-end/center/stretch;

center:垂直居中

stretch：拉伸（子级盒子无高度时看拉伸至整个父级盒子)

不给宽高内容撑开

子级：flex:数字；（占用父级剩余尺寸的份数）

2.4 修改主轴方向

flex-direction:row/column/row-reverse/column-reverse;

row:水平 column:列 row-reverse:从右向左 column-reverse:从下向上

flex-wrap:wrap/nowrap;换行和不换行

盒子最小高度：min-height:;

flex省略号 父级:flex:1; width:0;

子级：text-overflow:ellipsis; white-space:nowrap; overflow:hidden;

3.1 移动适配

基本原理

媒体查询

@media(媒体特性){

选择器{}

}

单位rem (相对于html标签的字号计算尺寸 1rm=1html字号大小)

例：盒子width:100px=字号:20px*5rem

flexible.js文件

(function flexible(window, document) {
    var docEl = document.documentElement
    var dpr = window.devicePixelRatio || 1

    // adjust body font size
    function setBodyFontSize() {
        if (document.body) {
            document.body.style.fontSize = (12 * dpr) + 'px'
        } else {
            document.addEventListener('DOMContentLoaded', setBodyFontSize)
        }
    }
    setBodyFontSize();

    // set 1rem = viewWidth / 10
    function setRemUnit() {
        var rem = docEl.clientWidth / 10
        docEl.style.fontSize = rem + 'px'
    }

    setRemUnit()

    // reset rem unit on page resize
    window.addEventListener('resize', setRemUnit)
    window.addEventListener('pageshow', function(e) {
        if (e.persisted) {
            setRemUnit()
        }
    })

    // detect 0.5px supports
    if (dpr >= 2) {
        var fakeBody = document.createElement('body')
        var testElement = document.createElement('div')
        testElement.style.border = '.5px solid transparent'
        fakeBody.appendChild(testElement)
        docEl.appendChild(fakeBody)
        if (testElement.offsetHeight === 1) {
            docEl.classList.add('hairlines')
        }
        docEl.removeChild(fakeBody)
    }
}(window, document))

在html页面引入此文件

<script src="flexible.js的文件路径"></script>

Less体验

将css变更简单

直接写除法，生成后代关系的选择器

vscode 插件 Easy Less将less文件保存为css文件

less的加减乘除，less4.0后除法加小括号

less变量 1，定义变量 2.使用变量（方便后期更改）

在less文件里导入其它less

@import “文件路径“;

导出插件配置 1.设置里查找Easy 2.点击在settings.json中编辑 3.在less.compile中写“out："../css/"（less导出的css都在css文件夹下）

导出单独路径

3.2 vw,vh(相对视口的尺寸计算结果)

1.确定设计稿对应的vw尺寸(1/100视口宽度)

2.vw单位的尺寸=px单位数值/(1/100视口宽度) vh(1/100视口高度)