使用rem实现pc、移动端自适应布局

qfCSDN

已于 2024-03-30 22:43:32 修改

阅读量6.3k

点赞数 1

分类专栏： css 文章标签： html 前端

于 2022-11-18 15:26:29 首次发布

本文链接：https://blog.csdn.net/qfCSDN/article/details/127923086

版权

css 专栏收录该内容

1 篇文章

订阅专栏

前提

1rem的大小是通过html下的根字体大小（font-size）这个css属性告诉浏览器的。
比如：设置html当前font-size = 10px；那么1rem = 10px;

计算公式

1.根据设计稿A（假如设计稿宽度是750），有一个预设的rem和px的比例B（假如是1rem = 10px）
2.获取用户浏览器的可视区域的宽度C（假如是750px），那么他此时1rem的尺寸D 可以根据 B/A = D/C （假设的字体大小/设计稿宽度=实际的字体大小/实际的屏幕宽度）这个公式得知。
10/750 = x/750 ==> x=100px
3.那么，当屏幕大小变化时，就需要取得当前屏幕大小来根据公式计算出此刻font-size大小

var fun = function (document, window) {
	//获取屏幕可视区域宽度
     var deviceWidth = document.documentElement.clientWidth;
    // console.log('deviceWidth', deviceWidth);
    //区分pc端和移动端，根据设计稿宽度计算根字体大小
    if (deviceWidth > 768) {
     //设计稿宽度1920px/实际字体大小100px = 19.20
      document.documentElement.style.fontSize = deviceWidth / 19.20 + 'px';
    } else {
      document.documentElement.style.fontSize = deviceWidth / 7.50 + 'px';
    }
}
fun(document, window);

可以根据设计稿宽度设置，获取到当前屏幕font-size大小，设置到蓝湖上，直接转换为rem进行布局即可。
在这里插入图片描述

使用媒体查询进行区分样式,使用rem书写样式即可

如果想要在窗口大小发生变化时同步放大缩小，可使用window.onresize监听：

  window.onresize = () => {
    var deviceWidth = document.documentElement.clientWidth;
    if (deviceWidth > 768) {
      //设计稿宽度1920px/实际字体大小100px = 19.20
      document.documentElement.style.fontSize = deviceWidth / 19.2 + "px";
    } else {
      document.documentElement.style.fontSize = deviceWidth / 3.75 + "px";
    }
  };