rem两三事

Alliot 发布于2019-08-29 18:41 / 482人阅读

摘要：昨天被问到关于的问题，当时一脸懵逼，因为写了两年，基本没怎么碰过，有点迷糊。缺点无缩放，且针对的屏没有做适配，导致对一些手机的适配不是很到位。缺点需要根据设计稿进行基准值换算，在不使用编辑器插件开发时，单位计算复杂。

os：昨天被问到关于rem的问题，当时一脸懵逼，因为写了两年js，基本没怎么碰过css，有点迷糊。

px、em、rem区别

不同于px这个固定单位，em和rem都是相对单位，em是相对父元素的font-size，层级越深，em的换算越复杂，rem，即root-em，相对于根html的font-size。做响应式页面，使用rem较好，在不同浏览器间的兼容性也好。

rem适配移动端方案

- 方案一：

html{font-size:16px !default;}
box1的宽度 = 设计稿上box1显示的宽度/(设计稿宽度640/屏幕宽度320)/font-size；

很多文章都会说16算起来较麻烦，所以设定html{font-size:62.5%}，这样根字体大小就是10px了，算起来较方便，公式还是上面的公式。
然后根据不同的媒体查询设置font-size的值（百分比）。

@media screen and (max-width:1440px) and (-webkit-min-device-pixel-ratio:1.5) and (orientation:portrait){ 
    html { font-size: 281.5%; }
}
@media screen and (max-width:1080px) and (-webkit-min-device-pixel-ratio:1.5){ 
    html { font-size: 210.9%; }
}
// ...
@media screen and (max-width:320px) and (-webkit-min-device-pixel-ratio:1.5){ 
    html { font-size: 62.5%; }
}

优点：较为普遍性，换算也简单；
缺点：通过媒体查询需要适配多个设备，有些设备不在范围内就不能很好的适配。

- 方案二：（网易方案）

手机端：基准值为100，拿到设计稿除以100，即为body的width，入设计稿640，那就以iphone5为例，body{width：6.4rem}；

document.documentElement.style.fontSize = document.documentElement.clientWidth/6.4 + "px";

因为根fontsize随着屏幕宽度变化，所以不用媒体查询适配，box1{width:设计图box1宽度/基准值100}；

优点：通过动态根font-size来做适配，基本无兼容性问题，适配较为精准，换算简便。
缺点：无viewport缩放，且针对iPhone的Retina屏没有做适配，导致对一些手机的适配不是很到位。

- 方案三（淘宝flexible）

大漠：使用Flexible实现手淘H5页面的终端适配

1.引入flexible

2.基准值 = 设计图宽度/10；例如设计图是750px，基准值就是75；
box1的宽度 = 设计图box1宽度/基准值；例如设计图上box1为150px，则为2rem；其实意思就是把整个设计图宽度设置为10rem。

优点：通过动态根font-size、viewpor、dpr来做适配，无兼容性问题，适配精准。
缺点：需要根据设计稿进行基准值换算，在不使用sublime text编辑器插件开发时，单位计算复杂。

rem换算

我现在做的项目，对rem的换算用的是sass的函数，是通过方案一的媒体查询来做的：

@function rem($px, $font-size){
  //$px为需要转换的字号，$font-size为根字体大小
  @return $px / ($font-size/($font-size*0+1)) * 1rem;
}
.box1{width: rem(100);}

关于每种方案的优势和劣势，借鉴于有你便是晴天，感谢大神分享。

GPU云服务器云服务器 rem rem布局 rem单位动态rem

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/114504.html

Vue 多系统切换实现方案(iframe嵌套的两三事)

摘要：总结来说，低效，所以现在想将几个系统融合到一个里边，并且每次切换系统的时候保留用户的操作。我是用开发的，所以切换的地方直接用了的切换组件。前言公司分好几个后台模块，统一使用vue+elementUi框架开发，每一个后台模块都是单独团队开发的。并且几个系统整体的风格、布局一样的，包括左侧边栏，上方的面包屑等用户在使用的时候，可能要切换别的系统就要在浏览器里，新打开窗口，再输入网址，回...

cocopeak 2019-08-26 11:58 评论0 收藏0
PostgreSQL两三事

摘要：在没有手动配置的情况下，之类的事情，不得不交给做，而与账户之间的来回切换，也会浪费宝贵的时间。作为秒数表示空闲时间间隔，当一个连接持续该时间闲置，会发送包给客户端，若连续个包都在秒内没有回应，则会认为这个已死。不要用Graphic Installer 至少在Ubuntu下，觉得原生的apt-get管理方式更合适，PG的文件资源会被分配到应该的地方，Linux的系统文件结构也是种非常稳...

leeon 2019-07-25 12:31 评论0 收藏0
outline和他娘亲border两三事

摘要：是啥顾英文名思义就是元素的轮廓，其实一般我们很少去设置元素的样式，因此很多人对他不太了解。浏览器默认给很多特定元素的某些行为加上了样式，比如标签输入框等。 outline是啥？ outline顾英文名思义就是元素的轮廓，其实一般我们很少去设置元素的outline样式，因此很多人对他不太了解。浏览器默认给很多特定元素的某些行为加上了outline样式，比如a标签、input输入框等。当你...

DesGemini 2019-08-29 17:11 评论0 收藏0
react+redux+webpack移动端项目总结

摘要：前言距离我进新公司也有一个多月，这一个月的事件使用写了一个项目，期间断断续续重构了两三次，目前已经完成第一阶段测试，也总结分享一些使用的一些坑。因为他的不可变特点，我们不会在不经意见不小心改变了，而引起不必要的问题。前言距离我进新公司也有一个多月，这一个月的事件使用react写了一个项目，期间断断续续重构了两三次，目前已经完成第一阶段测试，也总结分享一些使用react的一些坑。 s...

garfileo 2019-08-22 10:42 评论0 收藏0