移动开发之流式布局_WGP鹏灬_流式布局

网络 02-07 5841

笔记来源：拉勾教育 - 大前端就业集训营文章内容：学习过程中的笔记、感悟、经验一、流式布局（百分比布局） 1、概念流式布局，就是百分比布局，也称非固定像素布局通过将盒子的宽度设置成百分比，从而根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充流式布局是移动web开发使用的比较常见的布局方式

注：制作过程中，需要定义页面的最大和最小支持宽度

max-width 最大宽度（max-height 最大高度）min-width 最小宽度（min-height 最小高度） 2、二倍精灵图做法

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

3、图片格式（1）DPG图片压缩技术

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

（2）webp图片格式

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

4、初始化样式和特殊样式 /* 常用初始化样式 */ body { min-width: 320px; max-width: 540px; /* 水平居中 */ margin: 0 auto; background-color: #fff; font-size: 14px; /* 行高 1.5倍 */ line-height: 1.5; font-family: -apple-system,Helvetica,sans-serif; } /* 特殊样式 */ /*点击高亮我们需要清除清除设置为transparent 完成透明*/ *{ -webkit-tap-highlight-color: transparent; } /*在移动端浏览器默认的外观在iOS上加上这个属性才能给按钮和输入框自定义样式*/ input { -webkit-appearance: none; } /*禁用长按页面时的弹出菜单*/ img,a { -webkit-touch-callout: none; }