我的网页自适应的解决方案

这是我自己总结的新的自适应方案,bug未知,且移动端通用,但是pc端只能兼容到ie10+.

整体思想:1. 页面长度单位使用rem;2. 页面布局使用flex.css库;3. 在dom加载完成了后,设置根节点的font-size为页面宽度的1/12,也就是1rem=1/12*页面宽度.类似于bootstrap的栅格系统;4. 使用flex.css实现布局,类似于使用bootstrap的栅格系统,只不过样式要自己写.

一.方案使用的资源

1. 使用flex.css库,大小6k左右,适合移动端(https://github.com/lzxb/flex.css)2. 使用rem

二.用法

1.页面顶部引入flex.css文件

<link rel="stylesheet" type="text/css" href="../lib/flex.css">

2.页面加载完毕或者resize的时候,设置根font-size为页面可视区像素的width/12.

/****如果使用了jQuery*****/function setREM(){    var oneRem_width=$(window).width()/12;    $('html').css("font-size",oneRem_width+'px');}//页面加载完成$(document).ready(function(){    setREM();})//页面resize$(window).resize(function(){    setREM();})/****如果没有使用jQuery*****/function setREM(){    var oneRem_width=$(window).width()/12;    $('html').css("font-size",oneRem_width+'px');}function domReady(){    var shenTimer=setInterval(function(){        if(document && document.getElementsByTagName && document.getElementById && document.body)          {              clearInterval(shenTimer);              setREM();        }      },10);}window.onresize=function(){    setREM();}/****或者使用zepto.js的ready方法也可以*****/

3.在页面中使用

<!--将占据页面全部的宽度--><div style="width: 12rem;height: 1rem;"></div>

4.结合flex.css库使用

<div id="app" flex="main:left">    <div flex="main:left cross:center" style="width:3rem; height: 3rem; background: #ccc">        <div><p>看看我是不是居中的</p></div>    </div>    <div flex="main:left cross:center" style="width:3rem; height: 3rem; background: #ccc">        <div><p>看看我是不是居中的</p></div>    </div>    <div flex="main:left cross:center" style="width:3rem; height: 3rem; background: #ccc">        <div><p>看看我是不是居中的</p></div>    </div>    <div flex="main:left cross:center" style="width:3rem; height: 3rem; background: #ccc">        <div><p>看看我是不是居中的</p></div>    </div>    <div flex="main:left cross:center" style="width:3rem; height: 3rem; background: #ccc">        <div><p>看看我是不是居中的</p></div>    </div>    <div flex="main:left cross:center" style="width:3rem; height: 3rem; background: #ccc">        <div><p>看看我是不是居中的</p></div>    </div></div>

提示
由于根节点设置了font-size,因此这个font-size为作用到全局.所以需要使用时对具体font-size做具体的设置.