第30篇 移动端响应式布局页面实现

问题的由来
在以苹果主导的手机厂商，为了手机上能够获得正好的web体验，很多浏览器都会"欺骗"浏览器返回一个较大的宽度，比如你的手机告诉浏览器的我想用1000px显示当前的网页，但是你的手机设备的尺寸远远小于这个宽度，所以浏览器只能做一个缩放，这种体验效果非常的不好。下面就说说如何实现一个响应的设计：

• 视口
  关于这个定义，你可以把视口看成一个窗口， 这个窗口决定了你看到的网页的的大小。在移动端浏览器当中，存在着两种视口，一种是可见视口（也就是我们说的设备大小），另一种是视窗视口（网页的宽度是多少）。什么是可见视口，什么又是视窗视口呢？ 举一个例子：如果我们的屏幕是320像素*480像素的大小（iPhone4），假设在浏览器中，320像素的屏幕宽度能够展示980像素宽度的内容。那么320像素的宽度就是可见视口的宽度，而能够显示的980像素的宽度就是视窗视口的宽度。
• 视口的约束
  视口对于开发者来说并不是一个好的事情，是他让响应式做起来不是很方便，（因为在移动端1000px过于大）并不是我们想要的数值。在移动端开发前，我们应该对视口进行约束。方法就是用一个name为ViewPort的meta进行标记，具体的约束规则可以写在Content中，用逗号分开。如百度 html <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"> ，至于这里面的意思可以参考下H5的知识。

响应式实现

响应式的实现，我觉得具体可以分成两种，1、是做成两个站点和页面，根据当前的手机的设备去做跳转;2、只有一个站点，根据屏幕的大小的自动适配

• 页面跳转
  
  • 页面的跳转的原理：是利用js,根据当前的设备跳转不同的站点，如device.js
• 流布局
  • 流布局的定义是利用百分比来设置宽度，但这个只能出现在width,margin,padding，对于border来说却没有用。 这种方式一般只能用于宽度的适配，对于高度来说却没有什么用。
  • box-sizing的使用（流布局里面常用） 对于box-sizing属性，这里要提下，在盒子模型里面，这个命令了width的属性。如果设置成border-box，此时的padding表现成一种减的行为，具体的这里就不多说了。

• 媒体查询

  • 说到媒体查询，个人觉得是一个强大的东西，原理是根据当前设备的宽度与设定的宽度对比，从而判断要不要加载当前的样式。当然这种方式使用js,也可以实现，如window.onresize=function(){}。

  • 实现方式：

    • 在css中使用 ，下面的例子是在当前设备为屏幕设备且最小宽度为是600px加载上面的css
      如果小于599px则使用 nav li css

      @media screen and (min-width:600px) {
            nav {
              float: left;
              width: 25%;
            }
            section {
              margin-left: 25%;
            }
          }
      @media screen and (max-width:599px) {
            nav li {
              display: inline;
            }
          }

    • 在html中头部使用:

      <link rel="stylesheet" type="text/css" href="css/iPhone6P.css" media="screen and (min-width: 321px)" 

      这个是一个筛选的样式处理，如果设备大于320px，则使用iPhone6P.css的样式。

• min-width和max-width
  这个属性是为了对移动的最大和最小的宽度做约束，如果只使用手机，可以设定

  body{
  max-width:640px;
  }

  这样，无论什么设备都不会出现拉伸变形，但是可能在pad和pc浏览时会有留白。

svg使用

svg是一种矢量格式的图片，用起来方便，可以任意放大图形显示，但绝不会以牺牲图像质量为代价；可在SVG图像中保留可编辑和可搜寻的状态；平均来讲，SVG文件比JPEG和GIF格式的文件要小很多，因而下载也很快。

• 使用方法：
  • 当成图片使用
    如果把svg变成图片使用，和使用其它的图片的方法一致
    html <img src="1.svg"/> 
  • 转换成字体使用 svg转成字体的使用是非常灵活的，可以像字体一样设置大小和颜色。具体使用网站http://iconfont.cn/进行转换，然后下载到本地项目文件里面，最后再对css进行重写。

与设计人员对接

与设计人员对接，是项目的必须的环节，也是很重要的环节，我想要注意以下几个问题：

• 尺寸的转换
  设计人员面对设计的时候有一个设计尺寸（也就是参考哪个手机尺寸进行设计的）这个关系到以后尺寸的转换和布局。如美工如果告诉你我设计参考的比例是iphone5（宽度为320px)，但图上面标的总尺寸是640px。所以要对后面的高度和宽度都除2.
• 单位的使用
  对于单位使用，如果是宽度的话，我建议使用rem.面如果是字体和svg图标则使用em为单位。
• 其它
  尊重设计人员和其它人的劳动成果（不要喊设计人员"美工"):)