使用rem实现移动端适配的简单方法

最新推荐文章于 2025-08-16 17:02:07 发布

转载最新推荐文章于 2025-08-16 17:02:07 发布 · 145 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/xiaoweibaer/blog/781991

文章标签：

#python

本文详细介绍了使用rem进行响应式布局的原理与实践方法，包括如何设置基准字号、实现跨屏适配的小技巧及注意事项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

2019独角兽企业重金招聘Python工程师标准>>>

使用rem适配已经快一年了，感觉还是不错的，在这里记录一下。 ##1.原理 rem是一个相对单位，相对的是根元素‘html’的字号。比如html的font-size:100px;那么1rem=100px；html的font-size:120px;那么1rem=120px；所以我们可以根据手机不同的尺寸，设置不同的根元素字体，来适应不同的屏幕。而且它兼容性好，从安卓2.1就支持rem。

举个栗子：

//在iPhone5下
html{
    font-size:100px;
}

//在iPhone6下
html{
    font-size:116px;
}

.box{
    width:1rem;//在iPhone5下，width为100px;在iPhone6下,width为116px，从而实现了大小屏的适配
}

##2.设置基准我们依据什么来设置根目录的字号呢？两种方案 ###2.1css媒体查询宽度设置断点为什么是宽度？因为垂直方向的可以出滚动条，而水平方向出现滚动条就有点怪怪的了。

@charset "utf-8";
//iphone5
@media screen and (max-width: 374px){
    html{
        font-size: 85px;
    }
}
//iphone6
@media screen and (min-width: 375px)and(max-width: 413px){
    html{
        font-size: 100px;
    }
}
//iphone6 p标准模式
@media screen and (min-width: 414px){
    html{
        font-size: 110px;
    }
}

###2.2js查询计算宽高变化比这种方案是查询设备的宽高并计算出宽高的变化比（相对于你的基准尺寸），使用变化小的那个比值来设置根元素字号。

!function() {
   var count = 0;
   /*
      # 按照宽高比例设定html字体.
         - baseWidth和baseHeiht是设计稿尺寸
         - baseFontSize是720设计稿下html的fontsize
         - 按照当前屏幕宽高比跟设计稿宽高比较小的值作为缩放比例
   */
   function setHtmlFontSize(callback) {
      var baseWidth = 720, baseHeiht = 1280, baseFontSize = 22.5, newSize = 22.5,sacle = 1;

       //如果此时屏幕宽度不准确，就尝试再次获取分辨率，只尝试10次，否则使用innerWidth计算
      if(document.body.clientWidth !== window.innerWidth && count < 10) {
         document.body.style.display = "none";
         window.setTimeout(setHtmlFontSize, 0);
         count++;
      } 
      else {
          var sacle = Math.min(window.innerWidth / baseWidth, window.innerHeight / baseHeiht),
          newSize = parseInt( sacle * 10000 * baseFontSize ) / 10000;
          document.body.style.display = "none";
          setTimeout(function() {
            document.body.style.display = "";
            if(callback) {
              callback();
            }
            document.documentElement.style.fontSize = newSize + "px";
         }, 0);
      }
   }
   setHtmlFontSize();
}();

我目前采用的就是css方案，为什么放弃了js这种看起来更人性化的方案，是因为在测试的时候发现，有些低版本手机的某些浏览器下面会出现bug，它会先渲染一个没有计算过页面，然后再渲染成对的尺寸。反之css效率则很高。而且安卓尺寸千千万万，就不宠你，不宠你。其实是它们坑死我们~~

##3.小技巧 ###1.100px 我在写代码时并没有用px转rem插件，因为并不需要。技巧在于我们以1rem=100px为基准，这样在写代码的时候，我们只需要将px的值移动两位小数就好了，这应该不用计算器把。。阿门 ###2.以小为标准这里主要是指我们在用css媒体查询时，两个端点之间的尺寸使用小屏幕的基准。比如位于iPhone6和iPhone5之间的尺寸，使用iPhone5的基准。因为小屏幕的东西放大屏幕肯定空间是够的，但是反之则不一定。因为有时候会写一些笨笨的代码。。。举个例子：输入图片说明笨的写法就是按照宽度写罗，分别指定三个元素的宽度罗。哈哈，我还是比较喜欢flex。

##4.k e n g坑之前带给我的烦恼就是雪碧图使用起来就不爽了，不过现在我们把中小图标全部使用图标字体替换了，也就ok了。雪碧图使用有哪些不爽呢？

图片之间的留白要尽量大一点，要不然就会露出旁边的图片
不同尺寸手机下会出现图片位置稍稍的错位，对于小图标而言，就非常明显了。不使用雪碧图也有一个坑：

.box{
    width:1rem;
    height:1rem;
    background-size:100% 100%;//对滴
    background-size:1rem 1rem;//不对滴
}

background-size请使用100%,100%,而不是1rem,1rem,这种，因为在浏览器渲染时，我们的rem转化成px之后，是会有很多小数位的，浏览器对width、height的精确度和background-size的精确度是不一样的，非雪碧图，我们一般死不留白的，就会导致有一点点错位。

##5.字号需要使用rem吗 html的字号是用来布局用的，这里的字号是指整个页面的文字字号，设置在body中，其他元素继承。

我是不赞成在大屏手机下字号要变大的，会给人一种老人机的感觉。而且其他app还有网页都是使用的正常字号，你偏偏要给加大几个号，不好。

如果，如果，如果你硬是要加大，我教你一个简单方法，你千万别去一个个的改。使用sass中的变量，这样你就只要在媒体查询中修改一个变量的值，而不用每个元素每个元素去改了。后面我会写一个文章介绍sass的这个用处，这里不宜再发散了。我怕我止不住。

##6.结合em em：和rem一样，它是一个相对单位，但是它相对的是自身字号。

为什么需要结合em呢？

以前我们以640为基准时是没有必要使用这个单位，但是现在我们是以750为基准，我们就需要这个单位了。看看下面的例子，你就明白了。

输入图片说明

表单的label’单位电话‘，如果在750下，它为1rem(这个值是随便指定的)，它刚好可以容纳四个字，且两边有稍许留白。在我们切到640的时候，它的宽度变小了，但是我们的字号没有变化，就会出现不够容纳四个字的情况。因此我们这里使用em加rem定义：

.label-tel{
    width:4em;
    padding:0 0.05rem;
}

转载于:https://my.oschina.net/xiaoweibaer/blog/781991