rem不是神农草,治不了移动端百病

有很多朋友一聊起做移动端重构,第一个问题就是用什么单位合适。%,还是rem?(如果你还不太了解rem是什么单位,可先前往CSS3的REM设置字体大小了解。)

然后我的回答是:根据情况而言,%,rem,px都用,而且px用得比较多。然后就是各种疑惑和解释了。

那么多各种尺寸的视窗,到底用什么单位可以搞定呢?这里我借这篇文章,简单把一些遇到的问题总结下。

简单来说,总共就二个问题:

  • 宽度不确定
  • 高度不确定

下面我们一一说明

宽度不确定

目前主流的宽度: 360px, 375px, 414px等,外加一个小尺寸的320px。

从内容来看,我们的内容一般为文字或图片。

文字这块我们随便挑几个宽度不同的手机查看同一个app,会发现文字大小都是一样的,不会出现iphone se的时候是14px,iphone 6是16px, iphone 6plus是18px。当然我们同时也可以看出不同屏幕大小,还是有所不同的地方,如折行的位置不同,超过省略的字数不同,但这一般是不会影响视觉体验的或撑破布局(如果撑破就要写个media queries了),所以完全ok(当然如果你设置限制一个死高度,那肯定是有影响的)。

于是我们得出第一个结论:既然文字不需要适应各种视窗大小变化,所以单位设置px是完全没有问题的。

对于图片而言,我们会面临两种:一种是百分比的,一种是固定大小的。

对于百分比的,如滚动的banner图片,那肯定是要占全屏的;还有那些一行两个或三个产品,图片与文字按照竖直方面排列的,如淘宝的一些活动页,那也只能是百分比,假如一行两个,那么每个就是50%,如下图:

对于固定大小的,最典型的莫过于微信朋友圈的头像了,就是固定大小。同样我们可以扩展到如下场景:

于是我们得出第二个结论:图片会根据使用场景或用px,或用%(当然也可以使用更高级的vw)

结合前两个结论,得出第三个结论:如果只考虑宽度的不确定,其实rem完全可以不用。

当然rem还有另一种妙用,就是当做vw的替代品来说,具体参考:关于移动端百分比宽度的几种实现

高度不确定

对于高度不确定,90%的时候我们是不关心的,因为有滚动。但是有一种情况我们必须要关心:内容要一屏显示,或者某些内容必须要在首屏显示

当然最简单的办法那肯定是以最小的高度来做,但是对不起,设计师给我们的设计图肯定不是以最小高度来的哈哈。现在一般是以iphone 6为设计标准,高度为667px,那么现在问题来了,怎么搬到480px的高度上去呢?

于是该亮出我们的media queries这把宝剑了。下面来个简单的实例:第一个为iphone 4的效果,第二个为iphone 6效果

可以看出,为了要在480px中显示,我们缩小了图片及文字。

现在我们的问题来了,这个时候是不是要用rem呢?

在回答这个问题之前,先问下自己,如果不用rem,文字用px单位,图片用百分比单位是否可以搞定,答案当然是肯定的,因为我这里就是这么做的。

现在我们换成rem来解决,首先我们期望的目标是文字与图片都使用rem单位,然后只通过media queries改变html元素的font-size大小就可以完成我们需要的结果。

看起来是挺简单的,于是我们就开始试,但是我们面临一个问题图片的缩小比例与文字一般是不一样的,如文字可能从rem换算后的16px缩到14px或12px大小,但是图片估计就不止了,所以就悲剧了,我们还是得通过media queries去改变文字或图片的大小。

所以说rem并不能让你一劳永逸解决问题,如这种高度不确定的问题,本来就需要发挥我们的智商,通过media queries这里减少一分,那里减少二分,然后拼凑拼凑,达到一个正好一屏显示好的效果。

问题的根本是media queries,而不是rem,rem只是我们以为的一个简单而实际并不一定简单的解决办法,回归到本质,px及%也许比rem还简单。

最后总结:rem并不是移动端单位的一切,它不是神农草,并没有多么神奇的疗效,对于移动端px,%这些传统的单位仍然是好单位,顺便期待下vw和vh这两个实用单位加入。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏PPV课数据科学社区

百度校园招聘数据挖掘工程师面试题集锦(2013)

一、简答题(30分) 1、简述数据库操作的步骤(10分) 步骤:建立数据库连接、打开数据库连接、建立数据库命令、运行数据库命令、保存数据库命令、关闭数据库连接。...

3585
来自专栏贾志刚-OpenCV学堂

OpenCV图像处理之基于积分图实现NCC快速相似度匹配

基于Normalized cross correlation(NCC)用来比较两幅图像的相似程度已经是一个常见的图像处理手段。在工业生产环节检测、监控领域对对象...

1001
来自专栏人工智能

基于TensorFlow的循环神经网络生成矢量格式的伪造汉字

注意:对于中文汉字和日文汉字我根据具体情况交替使用它们。

7158
来自专栏PPV课数据科学社区

一小时掌握R语言数据可视化

ggplot2是R语言最为强大的作图软件包,有着自成一派的可视化理念,数据可视化是数据分析的重要一步,让我们通过由浅入深的掌握数据可视化的精髓。 请尊重原创,转...

35112
来自专栏用户2442861的专栏

CSS float浮动的深入研究、详解及拓展 一 一 一 一 一 一 一 一

       我们使用float浮动做了很多其本职工作以外的事情,于是我们会混淆,我们会回看不清float真正的面目。浮动真正的意义在哪里呢?要知道这个问题的答...

611
来自专栏用户2442861的专栏

CSS float浮动的深入研究、详解及拓展(二)

by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.com/wo...

520
来自专栏DT数据侠

没有颜值哪来担当?这十个互联网巨头的网站配色数据拿去!

颜色是人类对物体最基本的感知之一。在互联网上,一个好的网页配色能叫人眼前一亮,甚至产生极大的品牌效应,好比“阿里橙”、“链家绿”等等。来自美国的一位设计师Pau...

900
来自专栏较真的前端

为什么 CSS 这么难学?

1704
来自专栏WeaponZhi

编写你人生中第一个机器学习代码吧!

用 Python 实现第一段机器学习代码,跟我一起来吧! 我们先要学习的机器学习算法是监督学习,那么,何为监督学习呢?要了解监督学习,我们得先回顾下我们平时的编...

3549
来自专栏用户2442861的专栏

如何识别图像边缘?

文字识别、车牌识别、人脸识别都是它的应用。但是,这些都算初级应用,现在的技术已经发展到了这样一种地步:计算机可以识别出,这是一张狗的照片,那是一张猫的照片。

1112

扫码关注云+社区