rem布局

最新推荐文章于 2021-08-08 21:19:21 发布

一个程序媛。

最新推荐文章于 2021-08-08 21:19:21 发布

阅读量495

点赞数

本文链接：https://blog.csdn.net/Rqlinna/article/details/83419944

版权

1rem的大小是根据最底层的font-size的值来变化的，

设置一个监听，监听页面的的宽度，通过页面的宽度来设置底层font-size的值。

所以不同的屏幕宽度，1rem的值是不一样大小的。

正常，我们会将一个屏幕的宽设置成16rem.不管屏幕的宽是多少，他都等于16rem。

这就相当于百分比布局，百分比布局是将宽设置成100份，rem是将宽设置成16份（这里设置成多少份，自己定义）

既然rem类似于百分比布局，那为什么不直接用百分比布局，而采用rem布局呢？这里就牵扯到高度。

百分比布局中，高度的百分比，是他父级高度的百分比，所以，很多时候不能用。

比如你设置个正方形，宽度设：20%；高度设：20%；那么只有在你的父级元素是正方形的时候，它才是正方形，因为手机屏幕

基本没有正方形的，所以，一般不会在移动端过多的采用百分比布局（以前，百分比布局是移动端常用的）

同样是设置一个正方形，高度设置成：2rem;宽度：2rem;这样得到的就是个正方形。因为rem布局中，1rem的大小只跟页面的宽

有关系，跟高没关系。（当然，你也可以设置成只跟高有关系，比如横屏布局什么的）

以前我们写移动端的时候，主要是以iphone6来做参考。6的宽是375px,所以1rem就等于23.4375px

获取屏幕宽度，设置底层font-size的值。

(function (doc, win) {
  //orientationchange : 判断手机是水平方向还是垂直方向，感应方向

  //doc ==》 document对象
  //doc.documentElement ==> 得到文档的根元素-->  <html>
  //之所以要得到文档的根元素，是为了计算网页所打开时屏幕的真实宽度
  var docEl = doc.documentElement,
    resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
    recalc = function () {
      var clientWidth = docEl.clientWidth;
      if (!clientWidth) return;
      //320 是我们默认的手机屏幕 
      //clientWidth 是我们页面打开时所得到的屏幕宽度真实的宽度值
      //这两者相除得到一个放大或缩小的比例值
      docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';
      //设置根元素font-size
    };
    /*600px
    20 * 600/320  -- >  [2 -- 3] 放大范围

    200/320 -- > [0.5 -- 0.1] 缩小*/
  if (!doc.addEventListener) return;
  win.addEventListener(resizeEvt, recalc, false);
  doc.addEventListener('DOMContentLoaded', recalc, false);
  //当dom加载完成时，或者 屏幕垂直、水平方向有改变进行html的根元素计算
})(document, window);

//如果你不想进行一个响应式设计的开发，你可以直接把font-size写死

docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';
这个式子简化出来就是
docEl.style.fontSize = clientWidth / 16 + 'px';

一个程序媛。

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
rem布局

1rem的大小是根据最底层的font-size的值来变化的，设置一个监听，监听页面的的宽度，通过页面的宽度来设置底层font-size的值。所以不同的屏幕宽度，1rem的值是不一样大小的。正常，我们会将一个屏幕的宽设置成16rem.不管屏幕的宽是多少，他都等于16rem。这就相当于百分比布局，百分比布局是将宽设置成100份，rem是将宽设置成16份（这里设置成多少份，自己定义）...
复制链接

扫一扫