笔记来源:拉勾教育 - 大前端就业集训营
文章内容:学习过程中的笔记、感悟、经验
一、流式布局(百分比布局)
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; }