响应式网页设计

定义网页关键词
<meta name="keywords" content="关键词1 关键词2">
多个关键词应该使用空格分开； 最好保持在10个以下，过多的关键词，搜索引擎将忽略；
定义网页简短描述
<meta name="description" content="描述">
应该保持在140-200个字符或者100个左右的汉字；

响应式网页设计就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。
1、设置<meta>
visual viewport的宽度是浏览器可视区域的大小， visual viewport的宽度可以通过window.innerWidth 来获取；

<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">

2、@media

@media screen and (min-width:320px){
  html{font-size:21.333333333333332px;}
  body{font-size:12px;}
}

js响应式

/*rem方式，640px 为psd基准宽度，16px为font-size基准大小。 */

function _adaptFont(maxWidth, baseWidth,baseSize){
    maxWidth = maxWidth || 640;//最大值640px
    baseWidth = baseWidth || 320;
    baseSize = baseSize || 16;
    var winWidth =  parseInt(window.innerWidth);   /*s4手机读到的winWidth是分辨率的宽*/
    var docWidth =  parseInt(document.documentElement.clientWidth);  //和winWidth区别是，减去右边滚动条
    var bodyWidth =  parseInt(document.body.clientWidth);   //混合模式下使用
    var docWidth = Math.min(winWidth, bodyWidth, docWidth);
    docWidth > maxWidth && (docWidth = maxWidth);

    //设置基准值
    document.documentElement.style.fontSize =  (docWidth/baseWidth)*baseSize + 'px';


}
_adaptFont();
window.addEventListener("resize",_adaptFont);