目标
能够理解视口的概念并进行视口的设置
能够说出流式布局的基本布局特征
能够使用 2倍图进行页面开发
能够实现 京东首页的 头部布局
移动web基础
移动端调试问题
- 模拟器调试
- 真机调试:使用手机进行访问。
手机设备五花八门,屏幕尺寸都大不一样,尤其是安卓端,给我们的页面预览带来了一些麻烦。在实际工作中,作为开发者不可能有足够的设备让我们去测试(除了测试部门 ),即便有,效率也特别的低,因此开发者一般都是通过浏览器的手机模拟器来模拟不同的设备。
视口(viewport)
问题:一个电脑上的网站,在手机端访问,效果是什么样的?
1. 么有产生横向滚动条 而是整体缩小了
2. html的宽度固定是980
视口:
就是一个容器,这个容器会包裹html
这个容器默认就是980像素
并且可以自动缩放,会将这个html包裹起来 缩放到当前设备的大小
原因:
早期是没有手机页面的,只有PC页面,如果直接在手机端去访问PC页面,那么势必会产生横线滚动条 这样 体验不 是很好,所以乔布斯就发明了视口 利用视口这个容器将html包裹起来 缩放到当前设备的大小
至于视口默认的宽度是980的原因是因为在那个年代主流版心就是980
变化:
手机的用户远远超过PC用户 于是就有人想专门针对手机去做手机页面 不要缩放 就默认做成一比一的比例
这样的体验更好 所以 默认的视口已经不能满足当下的需求
需求: 需求专门配置一个手机端的视口,不需要去进行缩放,而是直接一比一的显示
易错点: 移动端浏览器自带视口,而且视口也是手机端特有的概念,只是因为默认的视口不太符合当前的需求,所以需要单独配置
视口参数设置
//width 设置视口的宽度
//width=device-width 设置视口宽度为设备的宽度(常用)。
//initial-scale 设置初始缩放比例
//initial-scale=1.0 表示不缩放
//user-scalable 设置是否允许用户缩放
//user-scalable=no 不允许用户缩放
//maximum-scale 设置允许的最大缩放比例
//maximum-scale=1.0 可以不设置,因为都禁止用户缩放了。
//minimum-scale 设置允许最小缩放比
//minimum-scale=1.0 不设置,因为都禁用用户缩放了。
//标准写法:
//快捷键: meta:vp + tab键
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0">
流式布局
移动端的特点
-
手机端的兼容性问题比PC端小很多,因为手机端的浏览器版本比较新
-
手机的分辨率比电脑的分辨率高很多,所以手机的设计图一般是2倍图或者3倍图
PC端设计图: 1 : 1 移动端设计图: 1 : 2或者1 : 3 640 或者 750
-
手机屏幕碎片化很严重,大小区别不会很大
PC端解决屏幕不一致: 版心 手机端解决屏幕不一致: 通栏 和当前屏幕保持一样大 (自适应)
流式布局,也叫百分比布局,是移动端开发中经常使用的布局方式之一。
流式布局的特征:
- 宽度自适应,高度写死(320),并不是百分百还原设计图
- 图标都是固定死大小的,包括字体等也是固定死的。并不是所有的东西都是自适应的。
- 一些大的图片,设置宽度为百分比自适应即可,随着屏幕大小进行变化
- 设计图一般是2倍图或者3倍图 是为了在手机端显示更清晰
经典的自适应布局
//1. 左侧固定,右侧自适应
//2. 右侧固定,左侧自适应
//3. 两侧固定,中间自适应(圣杯布局,双飞翼布局)
//4. 等分布局
重点:
1.一个没有写宽度的标准流盒子,添加padding和margin和border都不会撑大盒子 浏览器会自动内减
2.一个BFC区域和浮动元素默认不会发生重叠
3.在html的结构中 标准流的盒子在浮动盒子的后面渲染
JDM京东移动端开发
两倍图
由于手机端的像素密度要比PC端高,很多手机的像素密度是电脑的2倍甚至3倍,所以为了在手机上显示的图片更加清晰,设计师给的图片都是2倍图甚至3倍图
问题: 如何使用2倍图片的精灵图或者3倍图片的精灵图呢
以2倍图为例:
1. 利用PS将精灵图缩小一倍,去量取对应的宽高和位置坐标
2. 利用background-size去缩放精灵图(缩放至原始图片的1/2)
重点注意: 引用的图片还是原来的2倍图
利用ps缩放图片:
1. 将图片选项卡拖拽出来或者选择菜单栏
2. 图像 - 图像大小 - 将宽度缩放至1/2即可 只需要缩放一个就行 默认会保证等比例