《部分案例代码下载》
学习目标
- 能够说出流式布局的基本特征
- 能够使用2倍图进行页面开发
- 能够实现京东首页的头部布局
- 能够完成京东首页的静态结构
。。。。。。
理解上课的知识点……
移动端开发选择
常见移动端开发方案
在写移动web代码之前，先了解移动中主流的方案，明确方向
单独制作移动端网页（目前主流）
此类网站会检测用户的设备，如果是pc端则显示pc端页面，如果是移动端则显示移动端页面（通常移动端是网址前加了m：mobile）
特点：一个网站有两套网页
响应式网页（很少）
此类网站只有一个网页，通过判断屏幕宽度的变化从而改变页面的样式，从而适配多个终端
特点：一个网站只需要一个网页
但是有显而易见的缺点：网页制作麻烦，需要考虑很多兼容性问题
移动端常见布局
之前pc端布局的时候通过版心进行屏幕布局适配的
但是现在移动端中屏幕本身较小，再设置版心不合适，所以此时需要使用特殊的布局套路才行
流式布局的介绍
在移动端中需要使用一些特殊的布局方式，流式布局就是其中的一种，也叫百分比布局。
通过盒子的宽度设置成百分比来根据屏幕的宽度进行伸缩，不受具体像素的限制，可以自行填充。
流式布局是移动web开发中较为常见的布局方式
布局特征：
一般盒子高度写死，宽度百分比或者自适应
小图片、小图标、文字大小一般写死
大图片一般宽度自适应（100%），高度不设置让其等比例缩放
经典的流式布局：
左侧固定，右侧自适应
右侧固定，左侧自适应
两侧固定，中间自适应（圣杯布局、双飞翼布局）
等分布局
按照之前写的宽度百分比可以完成，但是当给每一个盒子设置border之后，会发现盒子掉下来了~
只要进行移动端布局，盒子约定俗成都需要加上自动内减。
ヾ(๑╹◡╹)ﾉ”演示场景的流式布局
拓展：
overflow:hidden会触发盒子的BFC
触发BFC的盒子的特点：
- 解决margin的塌陷
- 清除浮动
- 不会在浮动元素下面，会被挤到一边去
JDM京东移动端项目
技术选型
方案：单独制作移动端网页
技术：采用流式布局
————————
项目的搭建
和之前的操作一样
新建一个项目文件夹
新建images文件夹：放入常用的图片资源
新建css文件夹：放入index.css和base.css
引入favicon.ico图标
base.css的阅读
大部分来说和之前基础班的base.css文件是一样的，但是有个别的几个区别
取消a标签移动端点击高亮的效果
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
代码的编写
视口需要设置完整：
移动端开发第一个注意点
1
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
在html中引入css文件
- 先引入base.css
- 再引入index.css
移动端网页整体需要有一个整体的大容器
- 可以直接把body当做整体大容器
- 或者京东整体的大盒子：jd_container
- 宽度设置100%
- 高度由内容撑开：先写随便写一个
- 针对于大屏幕如pc端来说，占满一行就有问题了，此时需要设置最大宽度：max-length一般给设计图的大小。（因为比设计图还要大图片会放大失真）
- 针对于移动端有最小的宽度：min-width一般给需要适配的最小宽度（320px即可）
- 居中：margin：0 auto；
先把整个网页的各个模块划分好
再每一个部分写
注意点： 设计师给的设计图是是二倍图，所以量取的大小应该缩小2倍才行。（精灵图也是一样的）
相关操作
设置精灵图有背景颜色
- ps右下角倒数第二个按钮点击一下（新建图层）
- 左侧选择一个颜色，然后鼠标点击新建的图层，使用快捷键
alt + backspace(删除键)（填充图层颜色） - 将有颜色的图片拖到精灵图层的下面即可
改变图片的大小
设计师给的图片是2倍图，此时量取之后还要缩小2倍比较麻烦，此时可以直接把图片大小整体缩小两倍。之后再直接量取即可。
- 选择上方的图像按钮
- 选择图像中的图像大小选项
- 在对话框中设置修改之后的图像大小，只需要把宽度设置为原来的一半即可。
注意点： 此操作仅仅只是为了量取更加便捷，但是项目中为了图片清晰还是需要引入2倍图（400px*400px的图片）
