移动端开发详解(2)

弹性布局Flexbox

百分比布局虽然灵活，但是各种宽度，间距的计算也会让人心累。还有一种更灵活的布局方式，即Flexbox，由于桌面端浏览器对Flexbox的支持还未普及，因此它没有成为桌面端页面的主流布局方式，而在移动端，当浏览器的兼容性已不再是最大的问题，Flexbox的机会来了。Flexbox对于移动端有着特别的意义，在传统的定位方式中充斥着各种float浮动属性，这些浮动对于移动端来说是对渲染性能的消耗，我们仍然以这个HTML代码作为范例

   <div class="common">
       <img src="sysuzhyupeng-1.png" alt="1">
       <h1>sysuzhyupeng1</h1>
   </div>
   <div class="common">
       <img src="sysuzhyupeng-2.png" alt="2">
       <h1>sysuzhyupeng2</h1>
   </div>
   <div class="common">
       <img src="sysuzhyupeng-3.png" alt="3">
       <h1>sysuzhyupeng3</h1>
   </div>
   <div class="common">
       <img src="sysuzhyupeng-4.png" alt="4">
       <h1>sysuzhyupeng4</h1>
   </div>
   <div class="common">
       <img src="sysuzhyupeng-5.png" alt="5">
       <h1>sysuzhyupeng5</h1>
   </div>
   <div class="common">
       <img src="sysuzhyupeng-6.png" alt="6">
       <h1>sysuzhyupeng6</h1>
   </div>

要将它切换到Flexbox布局，需要div的父元素，即body加以设置

   body {
      display: -webkit-flex; /* Webkit内核浏览器的兼容性写法 */
      display: flex;
   }

Flexbox布局中有上下和左右两种排列方式。例如，我们希望div元素上下排列，可以设置flex-direction属性为column

   body {
      /* WebKit内核浏览器的兼容性写法 */
      -webkit-flex-direction: column;
      flex-direction: column;
   }

现在div元素已经能够由上往下排列了。在flex-direction的属性后面添加-reverse，能够使元素反向排列

   body {
      /* WebKit内核浏览器的兼容性写法 */
      -webkit-flex-direction: column-reverse;
      flex-direction: column-reverse;
   }

接着，我们希望布局从纵向更改为横向，修改flex-direction属性

   body {
      /* 其他代码 */
      -webkit-flex-direction: row;
      flex-direction: row;
   }

现在body中的div元素从左向右排列，接下来我们还要指定这些div元素的伸缩方式，修改common类

   .common {
       -webkit-flex: 1 1 auto;
       flex: 1 1 auto;
   }

Flex属性包含了3个参数，第一参数名为flex-grow，它用于决定伸缩元素可扩展空间的分配，在此设置为1，标识每个元素的可扩展空间大小相等。第二个参数名为flex-shrink，它用来定义当元素超过元素的大小后的压缩比例，在此定义为1，即每个元素的压缩能力相同。最后一个参数名为flex-basis，用于定义伸缩的基准值，在此设置为auto，即自动分配空间。由于浏览器的宽度不足以容纳所有的元素，因此元素被自动压缩，Flexbox尽量以最优化的形式分配元素的宽度，此时横向排列的元素都被分配了相同的空间。
我们不希望这么多元素挤在同一行，而是希望他们能够以更加灵活的方式进行排列，在此可以为父元素body设置Flexbox的换行属性，代码如下

   body {
      -webkit-flex-wrap: wrap;
      flex-wrap: wrap;
   }

通过设置flex-wrap属性值为wrap，使得元素能够自动换行。现在，在不同屏幕下测试页面，将得到各种不同而灵活的布局效果。

Media Query

移动端的分辨率可以说是五花八门，在css3中提同了Media Query(媒体查询)的新特性，我们直接来看一个例子，代码如下:

   <link href="A.css" rel="stylesheet" media="screen and (max-width: 600px)">

screen代表的是电脑或者移动终端显示屏幕，(max-width: 600px)代表媒体的最大宽度为600像素，所以含义就是当屏幕宽度小于或等于600像素时，应用A.css

   <link href="A.css" rel="stylesheet" media="screen and (min-width: 400px) and (max-width: 600px)">

以上代码代表当屏幕像素小于等于600像素且大于等于400像素时，用用A.css
在同一个CSS文件中，也可以为不同分辨率指定不同样式

   @meadia (max-width: 480px){
       h1 {
          font-size: 24px;
       }
   }

当屏幕小于等于480px的时候，h1的样式是如此。
在@import中引入样式也可以使用媒体查询

   <style type="text/css" media="screen">
       @import url("A.css")
   </style>

图标字体

雪碧图完美解决了多个图片文件造成的http请求压力问题，但雪碧图的大小，阴影等效果不太容易调整，一旦有大的变动，同时会带来图片和CSS两方面的工作量，现今比较流行的另一种呈现icon图标的技巧——图标字体(Icon Font)，则能有效解决以上问题。
图标字体虽然叫做字体，但显示的却不是字母或数字，而是各种图标，现在很多大的图标字体提供网站，如国内的阿里巴巴矢量图标库(http://iconfont.cn/)和国外的Font Awesome(http://fontawesome.github.io)。
图标字体的字体制作比较复杂，如果希望定制个性化图标，则有两种途径，一种是使用现成的在线生成工具，如国内阿里的iconfont，以及国外的IconMoon等。
接下来讲解图标字体的应用

   <h1>sysuzhyupeng</h1>

首先下载一套图标字体，字体文件名分别为icon-font.ttf，icon-font.eot，iconfont.woff

   @font-face {
      font-family: 'icon-font';
      src: url('icon-font.ttf'), url('icon-font.eot'), url('iconfont.woff');
   }

定义好icon-font字体后，就可以在h1的标题before伪类中设置字体和文字内容了，在此可以指定unicode编码来指定字符，如心形图形的字符编码为’\e626’

   h1::before {
      font-family: 'icon-font';
      content: "\e626";
   }

图标的更换也非常简单，改变content就可以。

移动端交互

在桌面端，点击了一个按钮，可以使用以下js代码

   var button = document.getElementById('button');
   button.onclick = function(){
       //...
   }

然而在iphoe这样的移动端测试时，我们会发现onclick事件大约有半秒的延迟，这是因为IOS系统需要等待一段时间来判断用户是单击还是拖动，要使得用户在移动端的交互更加流畅，则需要使用到Touch事件

   button.addEventListener('touchstart', buttonBehavior);
   function buttonBehavior(){
       // ...
   }

在触发touchstart事件时，也会同时产生一个event对象，在这个对象中包括触摸行为的各种信息，如可以用以下代码来输出触摸点的个数

   function buttonBehavior(e){
       console.log(e.touches.length);
       // 触摸点的x,y位置属性
       console.log(e.touches[0].pageX);
       console.log(e.touches[0].pageY);
   }

注意，在桌面端浏览器中不支持触摸事件，如果正在制作页面是响应式页面，那么需要考虑对浏览器环境做检测，然后根据设备种类的不同来绑定不同的交互事件
除touch事件外，在IOS设备中还提供了gesture事件，即多指操作，当用户将第一根手指放在按钮上时，触发了touch，第二根手指也放到按钮上时，触发了gesture事件

   button.addEventListener('gesturestart', buttonBehavior);
   function buttonBehavior(e){
       //...
   }

当两根或多根手指在屏幕中移动时，则会不断出发gestureChange事件，通过事件对象参数传回手指的旋转度，缩放等数值

   button.addEventListener('gesturestart', buttonBehavior);
   function buttonBehavior(e){
       console.log(e.rotation);
       console.log(e.scale);
   }

其他技巧

以下代码是一种兼容性写法，能够输出当前设备的横屏或竖屏状态：

   console.log(window.orientation || screen.orientation);

以下meta代码能够使用户在使用IOS设备从主屏直接启动某一个页面时，显示一副启动图像

   <link rel="apple-touch-startup-image" href="A.png" />

在IOS设备中按住一个页面元素时，IOS会自动在元素周围显示橙色的外框，这一高亮效果可以用以下CSS代码去除

   * {
      /* 设为完全透明 */
      -webkit-tap-highlight-color:rgba(0, 0, 0, 0);
   }

以下CSS代码能够避免在横竖屏切换时，移动设备对页面中的文字大小进行自动调整

   html {
      -webkit-text-size-adjust: 100%;
      -ms-text-size-adjust: 100%;
      text-size-adjust: 100%;
   }

另一个常见问题是页面高度渲染问题，当页面设置高度为100%时，将系统自带的导航栏计算到其中，可以用一段js代码来修正这个问题

   document.documentElement.style.height = window.innerHeight + 'px';

当站点有配套的Apple Store App，还可以通过添加以下标签，将应用链接显示在页面顶部

   <meta name="apple-itunes-app" content="app-id=570931840">