流式布局

什么是流式布局

  • 流式布局，就是百分比布局，也称非固定像素布局。
  • 通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充。
  • 流式布局方式是移动 web 开发使用的比较常见的布局方式。

1656511289177

  • max-width 最大宽度 （max-height 最大高度）
  • min-width 最小宽度 （min-height 最小高度）

流式布局示例网站

1656511329177

常用初始化样式

1
2
3
4
5
6
7
8
9
10
body {
  margin: 0 auto;
  min-width: 320px;
  max-width: 640px;
  background: #fff;
  font-size: 14px;
  font-family: -apple-system, Helvetica, sans-serif;
  line-height: 1.5;
  color: #666;
}

二倍精灵图做法

  • 01 在 firework 里面把精灵图等比例缩放为原来的一半
  • 02 之后根据大小 测量坐标
  • 03 注意代码里面 background-size 也要写： 精灵图原来宽度的一半

图片格式

  • DPG 图片压缩技术

    • 京东自主研发推出 DPG 图片压缩技术，经测试该技术，可直接节省用户近 50% 的浏览流量，极大的提升了用户的网页打开速度。能够兼容 .jpeg，实现全平台、全部浏览器的兼容支持，经过内部和外部上万张图片的人眼浏览测试后发现，压缩后的图片和 webp 的清晰度对比没有差距。

  • webp 图片格式

    • 谷歌开发的一种旨在加快图片加载速度的图片格式。图片压缩体积大约只有 JPEG 的 2/3，并能节省大量的服务器宽带资源和数据空间