189 8069 5689

页面自适应与rem-创新互联

在写前端页面的时候经常会用到rem,也在网上看了别人对rem的介绍，详细的情况就不在此描述，只说一下我对rem的看法和用法。

公司主营业务：成都网站设计、网站制作、移动网站开发等业务。帮助企业客户真正实现互联网宣传，提高企业的竞争能力。成都创新互联公司是一支青春激扬、勤奋敬业、活力青春激扬、勤奋敬业、活力澎湃、和谐高效的团队。公司秉承以“开放、自由、严谨、自律”为核心的企业文化，感谢他们对我们的高要求，感谢他们从不同领域给我们带来的挑战，让我们激情的团队有机会用头脑与智慧不断的给客户带来惊喜。成都创新互联公司推出罗定免费做网站回馈大家。

在我看来，rem 是一种相对的尺度，相对于根元素设置的font-size，比如：

html {
    font-size: 16px;
}

那么，在别的地方使用rem的时候 1rem 就会等于 16px。
这算是对rem最基础的应用，但是这种使用方式和直接使用px没有任何区别，只是单位不一样，需要进行换算。
既然rem 是一种相对尺度，最常用于页面自适应，我们就不能简单粗暴的直接对根元素设置字号来决定1rem的大小。
众周所知，android手机屏幕大小不一，各种尺寸的都有，这样的情况给我们的前端开发带来了很大的麻烦，我们不可能针对每一种手机尺寸去写一套代码来进行适应。设计师也不可能针对每一种手机尺寸做一套设计标注。
假设设计师做的图以750px为宽度。我们怎么能在一套设计图和一套代码里去适应所有的手机屏幕呢？这时候rem就非常有用了。
不知道别人公司是怎么用的，在我们公司针对rem做了一个转换公式。

根字号 = x * ( pageWith / 750 );

这里有几个值需要解释一下：

  • x 这是一个自由的值，是你希望1rem能代表多少设计图上的px，可以随意设置
  • pageWith 页面实际尺寸 px
  • 750 这个是设计图的宽度
  • 根字号 就是这个公式的计算结果，也是你将要使用的1rem所代表的px值。

这里还有一个地方要解释一下，什么是设计图上的px？ 比如设计图宽度为750px,你希望1rem = 100px 那整个设计图的宽度就可以写做7.5rem，但这个100px只是针对于设计图，因为实际上手机的尺寸是不确定的。

啊~~~ 越说越乱了，还是先解释公式吧：

公式的意思是把真实的屏幕分成设计图宽度的份数，乘以你希望1rem能代表多少设计图上的Px，最终得到一个值，把这个值当做根元素的字号，你的页面中就可以完全使用rem，完全按照设计图上的尺寸做界面，从而达到在不同手机屏幕下的自适应。

不知道有没有表达清楚我想表达的意思。还是上代码吧，

var remUnit = 0;
function setRemUnit () {
    var doc = document.documentElement;
    var width = doc.clientWidth;
    remUnit = 100 * (width / 750);
    doc.style.fontSize = remUnit + 'px';
}

window.addEventListener('resize', setRemUnit);
setRemUnit();

这段代码意思是以设计图宽度750px为基准，以期望1rem=100px为前提，计算出一个值，设置到根元素上。
使用时可以这样用：
比如设计图上有一个div 宽度为300px,div内有一个头像 宽度120px,头像右侧是用户名，32号字，我们可以这样写：

.avatar-block {
   width: 3rem;
    ....
    .avatar {
       width: 1.2rem;
        height: 1.2rem;
        border-radius: 50%;
        ...
    }
    .username {
        font-size: 0.32rem;
        ...
    }
}

因为屏幕是不固定的，所以在不同屏幕下，通过计算得到的根元素字号也是跟着屏幕大小变化而变化的，所以才能做到一套设计图一套代码 就能适应所有屏幕。
完

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。


网页标题：页面自适应与rem-创新互联
标题网址：http://jkwzsj.com/article/diicjc.html

其他资讯