持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第13天，点击查看活动详情
移动端常见布局
流式布局(百分比布局) 通过合资的宽度设置成百分比来根据屏幕的宽度进行伸缩,不受固定像素的限制,内容向两侧进行填充
为了保护所写内容在合理的范围之内设置最大宽度与最小宽度 max-width 最大宽度 min-width 最小宽度
移动端二倍精灵图做法
在firework里面把精灵图 等比例缩放为原来的一半
之后根据大小测量坐标
代码里background-size也要写:精灵图原来宽度的一半
图片格式
DPG图片压缩技术
京东自主研发推出DPG图片压缩技术,可直接节省用户近50%的浏览量,能够兼容jpeg
webp图片格式
谷歌开发的一种旨在加快图片加载速度的图片格式,体积只有JPEG的2/3,能够节省大量的服
务器宽带资源和数据空间
flex弹性布局
当我们为父盒子设为flex布局以后,子元素的float clear和vertical-align属性将失效
原理:通过给父盒子添加flex属性,来控制子盒子的位置和排列方式
//设置主轴的方向
flex-direction: row; row-reverse; column; column-reverse;
//设置主轴上的子元素排列方式
justify-content: flex-start; flex-end; center; space-around; space-between;
//设置子元素是否换行(默认不换行,装不下会缩小子元素的width,放到父元素里)
flex-wrap: nowrap; wrap;
//设置侧轴子元素排列方式(单行)
align-items: flex-start; center; flex-end; stretch;拉伸,不要给子盒子高度
//设置侧轴上的子元素的排列方式(多行)
align-content: flex -start; flex-end; center; space-around; spacce-between; stretch;
//flex-direction和flex-wrap属性的复合
flex-flow;row wrap;
flex布局子项常见属性
flex属性定义子项目分配剩余空间,表示占多少份数
flex:1; //圣杯布局
align-self控制子项自己在侧轴的排列方式
order属性定义子项的排列顺序(前后顺序)默认为0;
