目录
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视口高度)