您的位置:首页 > Web前端 > > 正文

如何使用rem开发移动端页面(移动端rem布局的两种实现方法)

更多 时间:2022-01-27 01:37:37 类别:Web前端 浏览量:1823

如何使用rem开发移动端页面

移动端rem布局的两种实现方法

据了解,现在有两种rem布局的样式控制,其中一种是通过css的媒体查询,另外一种是通过引入js来控制,这两种方法各有各的优点,但是我还是喜欢用引入js的方法来实现rem布局,尽管现在市面上大多数都在使用css媒体查询的方式实现,在此我就将这两种方法做一总结:

方法一:常用方法,css媒体查询

  • @media only screen and (max-width: 600px), only screen and (max-device-width:400px) {
      html,body {
        font-size:50px;
      }
    }
    @media only screen and (max-width: 500px), only screen and (max-device-width:400px) {
      html,body {
        font-size:40px;
      }
    }
    @media only screen and (max-width: 400px), only screen and (max-device-width:300px) {
      html,body {
        font-size:30px;
      }
    }
    .box{
      border: 1rem solid #000;
      font-size: 1rem;
    }
    
  • 对于这种方法而言,他仅仅通过css文件就可以实现,在加载页面的过程中,请求的文件较少,但是如果使用的两个移动端设备屏幕宽度相差不大,都在媒体查询所设置的同一区间,那么页面中的文字大小等不会变化,可是使用引入js的方法就不一样了。

    方法二:引入js

  • // 需求:根据设计图的比例去动态设置不同屏幕下面对应的font-size值
    // 这段JS不要添加入口函数,并且引用的时候放到最前面
    // ui的大小根据自己的需求去改
    // 设计图的宽度
    var ui = 750;
    // 自己设定的font值
    var font = 40;
    // 得到比例值
    var ratio = ui/font;
    var oHtml = document.documentElement;
    var screenWidth = oHtml.offsetWidth;
    // 初始的时候调用一次
    getSize();
    window.addEventListener('resize', getSize);
    // 在resize的时候动态设置fontsize值
    function getSize(){
      screenWidth = oHtml.offsetWidth;
      // 限制区间
      if(screenWidth <= 320){
        screenWidth = 320;
      }else if(screenWidth >= ui){
        screenWidth = ui;
      }
      oHtml.style.fontSize = screenWidth/ratio + 'px';
    }
    
  • 这种通过引入js的方法,面对不同尺寸的移动端设备,都能实现文字大小等尺寸的细微变化。

    标签:rem 移动端 布局
    您可能感兴趣