移动web基础：视口(viewport)，流式布局 JDM京东移动端开发

目标

能够理解视口的概念并进行视口的设置

能够说出流式布局的基本布局特征

能够使用 2倍图进行页面开发

能够实现 京东首页的 头部布局

移动web基础

移动端调试问题

1. 模拟器调试
2. 真机调试：使用手机进行访问。

手机设备五花八门，屏幕尺寸都大不一样，尤其是安卓端，给我们的页面预览带来了一些麻烦。在实际工作中，作为开发者不可能有足够的设备让我们去测试（除了测试部门 ），即便有，效率也特别的低，因此开发者一般都是通过浏览器的手机模拟器来模拟不同的设备。

视口(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即可 只需要缩放一个就行 默认会保证等比例