流式布局(百分比布局)
也称为非固定像素布局(只针对于宽度)
通过将盒子的宽度设置为百分比,从而根据屏幕的宽度来进行伸缩,不受固定像素的限制,内容向两侧填充
注意:制作过程中,需要定义页面的最大和最小支持宽度
max-width 最大宽度(max-height 最大高度)
min-width 最小宽度(min-height 最小高度)
若屏幕宽度 < 最小宽度时,用户需要通过拖动底部滚动条查看页面
京东移动端首页 m.jd.com
1. 搭建相关文件夹结构
2. 设置视口标签以及引入初始化样式
<meta name="viewport" content="width=device-width,user-scalable=no,inital-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">
<link rel="stylesheet" href="css/normalize.css" />
<link rel="stylesheet" href="css/index.css" />
3. 常用初始化样式
body {
min-width: 320px;
max-width: 540px;
margin: 0 auto;
background: #fff;
font-size: 14px;
font-family: -apple-system,Helvetica,sans-serif;
line-height: 1.5;
color: #666;
}
4. 特殊样式
/*css3盒子模型(给具体标签添加)*/
box-sizing: border-box;
-webkit-box-sizing: border-box;
/*点击高亮我们需要清除,设置为完全透明(点击高亮即在手机上点击时出现蓝色背景,例如点击链接时)*/
* {
-webkit-tap-highlight-color:transparent;
}
/*在移动端浏览器默认的外观在iOS上加上这个属性才能给按钮和输入框自定义样式*/
input {
-webkit-appearance:none;
}
/*禁用长按页面时的弹出菜单*/
img,a {
-webkit-touch-callout:none;
}
二倍精灵图的做法
-
在firework里面把精灵图等比例缩放为原来的一半
- 最好修改整个画布的大小
- 步骤:菜单栏修改——画布——图像大小——修改尺寸——确定
-
之后根据新的大小测量坐标
-
注意代码里面background-size也要写:精灵图原来宽度的一半
background: url(../images/sprite.png) no-repeat -59px -194px;/*调的X轴、Y轴的位置*/ background-size: 104px auto;/*宽为原精灵图宽度的一半*/
图片格式
1. DPG图片压缩技术
京东自主研发,可节省用户近50%的浏览流量,极大的提升了用户的网页打开速度,能兼容jpeg,实现全平台、全部浏览器的兼容支持,压缩后的图片和webp的清晰度对比没有差异
2. webp图片格式
谷歌开发的一种旨在加快图片加载速度的图片格式,图片压缩体积大约只有JPEG的2/3,并能节省大量的服务器宽带资源和数据空间