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

Posted Amylee_style

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何实现页面的响应式布局?相关的知识,希望对你有一定的参考价值。

所谓响应式布局,就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。他的好处我们不用写多套屏幕模板而只需要写一个就可以实现,现在用的比较多的就是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,然后让它自动更新就可以了。

  

以上是关于如何实现页面的响应式布局?的主要内容,如果未能解决你的问题,请参考以下文章

如何实现响应式布局?

响应式布局

低代码如何构建响应式布局前端页面

低代码如何构建响应式布局前端页面

响应式布局的两种实现形式

一行 CSS 代码实现响应式布局 – 使用 Grid 实现的响应式布局