响应式网页的思路

总的来说，用rem这个单位。

rem是基于根元素也就是html元素的font-size进行计算的。

一般浏览器默认html元素的font-size是16px，也就就是，默认情况下，1rem=16px，2rem=32px。

貌似也是固定死的，跟响应式没啥关系。但是，想一想，只要我们所有涉及到的长宽全部用rem的话，有一个很大的好处，就是主要改变了html的font-size，那么，所有用rem标示的长宽都跟着变了。加入不这样做，而是全部用px的话，就得一个一个跟着改，这不现实。

所以，html的font-size是牵一发而动全身的。

所谓响应式，就是视窗大小改变后，字体呀图片呀什么的大小都跟着缩小或者放大，保持一个合适的比例。

如果视窗大小改变后，能及时调整html的font-size，那么，所有用rem表示的长度不也跟着变了吗？

那么，怎么在视窗变化时，及时改变html的font-size呢？

1是用css的媒介查询，2是用js帮助实现。

媒介查询相对比较简单，就是重写不同尺寸下的css，一般就是手机和桌面。

个人认为，js也比较好用，拷了一段参考js代码如下：

function intiSize(){
    //获取当前浏览器窗口宽度(这里的实质就是body宽度)
    var win_w=document.body.offsetWidth;
    //定义变量
    var fontSize;
    if(win_w>640){
        fontSize=24;
    }else{
        //如果浏览器窗口宽度(这里的实质就是body宽度)值小于320，取320
        win_w=Math.max(320,win_w);
        fontSize=win_w/320*12
    }
    //设置根元素的大小
    document.getElementsByTagName('html')[0].style.fontSize=fontSize+'px';
}
//浏览器窗口宽度发生变化时条用这个函数，方便与改变窗口大小时候调试
onresize=intiSize;
intiSize();