移动端布局

一、移动端相关概念

• css像素和设备像素

  设备像素是也叫逻辑像素，是指屏幕发光点的数目，它是固定的。而css像素也叫逻辑像素，是指css布局时使用的像素，一个css像素可能使用一个或者多个屏幕发光点来显示，所以，css像素是相对的，是相对于设备像素而言的。

  例子： iPhone 5使用的是Retina视网膜屏幕，使用两个物理像素来显示一个逻辑像素，也就是使用2个发光点来表示（显示）一个css像素。

• 视图视口、布局视口和理想视口

  视图视口是指用户可以看见的屏幕区域，也叫浏览器视口。 布局视口是指页面占据的区域.(页面是可以大于设备可视区域的，比如缩放时) 理想视口是指布局视口等于视觉视口。

  笔记： 1.设备、逻辑像素和视口没有必然的联系，应该分开理解。 2.布局视口并不等于逻辑像素宽，逻辑像素宽仅仅是指可视区域的逻辑像素宽度。 3.当布局视口等于视觉视口，也即理想视口时，如果要实现640px的设计图，依然按320px的逻辑像素来布局。实际上iphone5也还是在用2个发光点来显示一个css像素，不过布局只需要按320px来布局（不是640px），这样，在真机呈现着“640px”的视觉效果。当然了，也可以使用640px的布局，但是需要说明页面缩小1倍。

二、元标签meta在移动端布局中的作用

• 使布局视口的宽度等于视图视口宽度

  <meta name="viewport" content="width=device-width" />
  

• 使css页面缩放比例为1.0，即页面不进行缩放

  <meta name="viewport" content="initial-scale=1.0" />
  

• 最大最小缩放比例

  <meta name="viewport" content="minimum-scale=1.0, maximum-scale=1.0" />
  

• 禁止用户缩放

  <meta name="viewport" content="user-scalable=no" />
  

  笔记： 在移动端布局中，常用到的meta声明是：

  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  

  它的意思是：使用理想视口，布局页面不进行缩放，因为布局时大家往往习惯依据屏幕宽度来布局，二倍屏设计图如640px，只要布局时除以2，布局页面就不需要缩放，由于设备像素比是2, 产生的视觉效果就是设计图中要的640px效果（这时设计图是依据物理像素而设计的）。

三、移动端适配方案

1. 定高流式布局

   将不需要改变高度的对象的高度固定，在水平方向上使用百分比、弹性布局、BFC自适应给予对象水平方向上的弹性伸缩特性的布局。

   笔记： 1.对于字体，一般是不变的，因为很难单纯使用css来制作流式字体。 2.不变的部分可以定宽（可选）定高，布局可以使用浮动、定位、弹性甚至是网格实现。 demo:

   1. 弹性布局定高流式布局
   2. 浮动布局定高流式布局

2. rem布局

   rem是相对于根元素html的字体大小的度量单位，1rem等于html字体的大小。而rem布局就是利用rem这样的特点，通过按比例改变font-size，来实现按比例缩放 页面来适应屏幕大小。

   笔记：

   1. 使用rem布局，常常在设计稿的尺寸下，将根元素html的字体大小设置为100px，这样是为了更好地换算rem，这时1rem=100px，也即1px=0.01rem。这样这需要把设计稿中测量的长度px左移两个小数点就是对于的rem值。至于为什么不设置1rem=10px，是因为浏览器文字最小尺寸是12px
   2. 响应式地改变font-size的实现方式主要有媒体查询和js。实现代码示例可参考移动端适配方案,也可以使用淘宝的flexible方案

3. 自适应缩放布局

   自适应缩放布局实际上就是按原设计稿的尺寸实现布局，这时，布局视口和设计稿尺寸完全一致。然后，对布局视口进行缩放，让布局视口为理想视口即可。这样布局的优点还有解决了移动端1px问题。

   笔记：可以使用hotcss方案