如何实现页面的响应式布局？

Posted 2020-09-23 Amylee_style

所谓响应式布局，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。他的好处我们不用写多套屏幕模板而只需要写一个就可以实现，现在用的比较多的就是bootstrap的响应式布局，而他实现的原理就是，他会为一个元素设置多个类，然后通过媒体查询会根据当前屏幕分辨率来选择适合的类进行渲染。

bootstrap主要是利用栅格式布局的原理，会自动将屏幕分为12列，然后我们可以根据需要分类，并且他将屏幕分为三类：

• col-xs-* 超小屏幕，手机 (宽度<768px) 
• col-sm-* 小屏幕，平板 (宽度≥768px) 
• col-md-* 中等屏幕，桌面显示器 (宽度≥992px)

而*代表的就是所要写的就是在当前屏幕中所占的列数，这些都是写在每个元素上，但我们还需要在他们的父元素上加上row的类（row表示行，还有column列），这样就简单的实现了响应式布局。

这里我还要介绍的是另一种响应式布局的方法，就是利用rem，然后通过屏幕的分辨率来改变px，实现的方法主要是：

function setSize() {
        // 获取window 宽度
        var winWidth =  window.innerWidth;
        document.documentElement.style.fontSize = (winWidth / 设计稿像素宽) * 100 + ‘px‘ ;

    }

　　通过上述的计算方式我们就可以计算出在不同屏幕下的像素值，这里的100是设置1rem=100px，然后让它自动更新就可以了。