响应式布局简单笔记

响应式开发的本质是针对多种屏幕做适配，首先需要掌握几个基本概念：

物理像素：设备的屏幕实际像素点，如常说的 iPhone 6 Plus的分辨率是 1920 * 1080 像素。
设备独立像素：逻辑像素，用于定义应用的UI。
屏幕像素比（devicePixeRatio）：物理像素与设备独立像素的比值。

首先响应式布局是现在比较流行的布局方法之一，因为响应布局可以兼pc，移动，平板端开发代码量远远低于自适应式。

响应式布局开发首先是要以pc端的交互为基础而延续到移动，平板端开发，这里就有人可能有疑问的为什么要以pc端为基础，答案很简单因为pc端的屏幕比例大小无疑是比后两者都要大，

响应式开发就按照屏幕达到特定的比例就改变css，js为特定比例相对应的对象终端。

首先响应式开头哪里要加上

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

viewport 属性

viewport是指屏幕上能用来显示网页的区域，默认情况下大多数设备的 viewport的宽度都是 980像素，可以通过在 heade元素中增加 meta标签来设置 viewport属性：

viewport下包含以下属性：

width：设置 viewport的宽度，为正整数，或者字符串 “device-width”。
initial-scale：设置 viewport的初始缩放值，为数字，可以带小数。
minimum-scale：设置 viewport的最小缩放值，为数字，可以带小数。
maximum-scale：设置 viewport的最大缩放值，为数字，可以带小数。
height：设置 viewport的高度。
user-scalable：是否允许用户缩放，值为 “yes” 或 “no”。

通过设置 viewport属性，可以调整用户界面的逻辑大小，页面 CSS中的大小均以 viewport为基准。

使用 rem 实现响应式布局

rem（font size of the root element）是 CSS的计量单位，表示相对于根（即 html）元素的字体大小。其主要用于移动 Web开发，以适配不同尺寸的屏幕。

由于 rem单位是相对于网页根元素的字号大小而定，所以实现 rem布局开发时，首先要做的就是对根元素的字号赋值。

html{ font-size:12px; }

我们将网页根元素的字号设置为 12px,此时 rem相对于网页根元素字号为 1``rem = 12px。故此转换 rem的公式则为

rem值=元素实际px值/网页根元素的字号

这里的代码可以用来做移动端自适应布局

根据设计图750px大小设计（按照 iPhone 6 Plus宽的两倍）基本可以在750px比例大小下移动端完美还原设计图比例

//自定义设计稿的宽度：designWidth
//最大宽度:maxWidth
//这段js的最后面有两个参数记得要设置，一个为设计稿实际宽度，一个为制作稿最大宽度
//，例如设计稿为750，最大宽度为750，则为(750,750)
;(function(designWidth,maxWidth){
  var doc=document,
    win=window,
    docEl=doc.documentElement,
    remStyle=document.createElement("style"),
    tid;

  function refreshRem(){
    var width=docEl.getBoundingClientRect().width;
    maxWidth=maxWidth||540;
    width>maxWidth&&(width=maxWidth);
    varrem=width*100/designWidth;
    remStyle.innerHTML='html{font-size:'+rem+'px;}';
  }

  if(docEl.firstElementChild){
    docEl.firstElementChild.appendChild(remStyle);
  }else{
    var wrap=doc.createElement("div");
    wrap.appendChild(remStyle);
    doc.write(wrap.innerHTML);
    wrap=null;
  }
  //要等wiewport设置好后才能执行refreshRem，不然refreshRem会执行2次；
  refreshRem();

  win.addEventListener("resize",function(){
    clearTimeout(tid);//防止执行两次
    tid=setTimeout(refreshRem,300);
  },false);

  win.addEventListener("pageshow",function(e){
    if(e.persisted){//浏览器后退的时候重新计算
      clearTimeout(tid);
      tid=setTimeout(refreshRem,300);
    }
  },false);

  if(doc.readyState==="complete"){
    doc.body.style.fontSize="16px";
  }else{
    doc.addEventListener("DOMContentLoaded",function(e){
      doc.body.style.fontSize="16px";
    },false);
  }
})(750,750);

viewport 属性

使用 rem 实现响应式布局

同主题与延伸阅读