189 8069 5689

rem布局的原理是什么

这篇文章给大家介绍rem布局的原理是什么,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。

创新互联建站长期为上1000家客户提供的网站建设服务,团队从业经验10年,关注不同地域、不同群体,并针对不同对象提供差异化的产品和服务;打造开放共赢平台,与合作伙伴共同营造健康的互联网生态环境。为运城企业提供专业的成都网站设计、网站建设、外贸网站建设运城网站改版等技术服务。拥有10余年丰富建站经验和众多成功案例,为您定制开发。

rem单位所代表的尺寸大小和屏幕宽度成正比

首先,设置rem单位所代表的尺寸大小和屏幕宽度成正比,有3中方案,先不必纠结其中的数值:

媒体查询, 设定每种屏幕对应的font-size

@media screen and (min-width:240px) {
    html, body, button, input, select, textarea {
        font-size:9px;
    }
}
@media screen and (min-width:320px) {
 html, body, button, input, select, textarea {
  font-size:12px;
 }
}
// 红米Note2
@media screen and (min-width:360px) {
 html, body, button, input, select, textarea {
  font-size:13.5px;
 }
}
@media screen and (min-width:375px) {
 html, body, button, input, select, textarea {
  font-size:14.0625px;
 }
}

js设置html的font-size大小

document.documentElement.style.fontSize = document.documentElement.clientWidth / 750 + 'px';

使用vw设置,vw也是一个相对单位,100vw等于屏幕宽度

html{
    font-size: 10vw;
}

这3种方式,都可以设置html的font-size和屏幕宽度成正比。这3种的单位是css尺寸,无论第一种方法的min-width还是第二种document.documentElement.clientWidth都是相对于设备的css尺寸而言,在iphonex和iphone8得到的结果都是375px。

第一种,需要设置需要每种屏幕都设置对应的font-size,这些font-size都是根据比例算出来的,比较繁琐,而且还有可能漏掉某些屏幕尺寸,不推荐。第二种用js设置,比较方便,现在大部分网站采用这种方式。第三种通过css的vw来设置,也很方便,而且不用写css,但是兼容性还不是特别好。综合推荐使用第二种。

单位换算

现在我们要使用rem设置元素尺寸和字体大小。有两种思路:

设置特殊的html的font-size,使rem和标注稿上px容易换算,比如把我们的html的font-size设置成1px,这样1rem就等于1px,因为我们标注稿750px,是基于二倍屏的,1个css单位等于2个实际单位,所以我们的font-size设置为0.5px,这样我们设置尺寸时,rem和标注稿的px,就是1比1映射的。当然这里所有的大小都是相对于标注稿尺寸来说的,如果是其他屏幕的尺寸,html的font-size肯定要相应的变大或者变小,通过第二种js方法可以实现:

document.documentElement.style.fontSize = document.documentElement.clientWidth / 750 + 'px';

通过css预编译或者webpack插件,实时计算 比如,我们将html根元素设置为16px,标注稿上有一个div元素宽度为100px,我们在scss中可以这样写

$rem: 32px;

div{
 width: 100/$rem;
}

webpack的插件也是基于这样的计算原理,比如px2rem

module.exports = {
  // ...
  module: {
    rules: [{
      test: /\.css$/,
      use: [{
        loader: 'style-loader'
      }, {
        loader: 'css-loader'
      }, {
        loader: 'px2rem-loader',
        // options here
        options: {
          remUnit: 32,
          remPrecision: 8
        }
      }]
    }]
  }
}

关于rem布局的原理是什么就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。


标题名称:rem布局的原理是什么
路径分享:http://jkwzsj.com/article/igeeod.html

其他资讯