移动端网页切图的救世主 REM
发布在切云!您的前端切图服务专家2016年11月18日view:2421
在文章任何区域双击击即可给文章添加【评注】!浮到评注点上可以查看详情。

在移动网络发展如此兴盛的今天,移动端的Web开发也更加多样化。在做PC端时,我们可以设置一个合理的内容宽度,然后让它居中显示。这样基本上可以解决所有分辨率的显示器。但是在面对丰富尺寸的移动端时,Iphone、安卓各种屏幕分辨率,导致了我们并不能使用这种方法。 有的开发这使用百分比宽度布局这种方法,但是在切云开发的实际项目中这种方法做适配的时候非常麻烦,要么是在iphone6图标看上去太大了,要么就是在iphone4上折行了。解决办法呢,就需要写大量的媒体查询来分别控制不同分辨率上元素的宽度、间距、一些地方的字体大小。我们切云一般用模拟器去测试的话,模拟出来的机型还是狠有限的。但是智能手机品牌、机型如此众多的今天,各种不规则的分辨率,即使作为专业团队的我们切云,也很难寻找到所有的真机一一去测试。另外用这种方法做出来的页面和设计相比,无论我怎么去调试,都会有比例上的不一样的问题。这就会导致不能很好的还原设计。那么就没有好的办法解决移动端还原设计并且适配不同终端这个问题了吗? 您遇到的问题,切云也一样会遇到,解决办法当然是有的,那就是使用REM!

首先让切云带您一起理解一下rem,rem是CSS3新增的一个相对单位(root em,根em),这个单位引起了广泛关注。这个单位与em有什么区别呢?区别在于使用rem为元素设定字体大小时,仍然是相对大小,但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身,通过它既可以做到只修改根元素就成比例地调整所有字体大小,又可以避免字体大小逐层复合的连锁反应。目前,除了IE8及更早版本外,所有浏览器均已支持rem。对于不支持它的浏览器,应对方法也很简单,就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。当然,IE8在国内市场还有占有相当一部份份额的。就是为什么国外网站大多使用rem,但是在国内确很少见有使用rem的。但是对于移动端不同,现在移动端主要分为IOS 和Android 两大阵营,并且他们的浏览器都是Chrome内核。所以在手机端可以忽略兼容性这个问题。

那么了解了REM之后,使用方法又是什么呢?别急,切云慢慢将给您:首先所有浏览器默认字体大小都是16px,那么1rem=16px,但是会发现在实际换算中很麻烦,如果把HTML 的font-size大小设置为62.5%,这样font-size的大小就会等于10px; 也就是说1rem=10px;这样在实际使用过程中会很方便。在这里切云向您提一个在chrome浏览器上的问题,因为大多数开发人员都会使用Chrome做为调试工具,在中文版的Chrome浏览器上,浏览器最小可识别12Px大小的字体。也就是说当你设置了字体大小小于12像素以下的字体大小时,浏览器都会当做12PX显示出来,对,你没有看错,Chrome就是这么变态,至于为什么,切云也不知道。这里推荐一下根原素以20px做为根据素大小或者使用Firebox做为调试浏览器。这样就不会出现这个问题了。 在iphone6上,我们设置了20px=1rem,但是在iphone4上,同样的1rem,就不应该是20px,而是应该大约17px(为(320/375)*20),这样才可以保证对应的1rem和原来的效果相似,否则,在iphone4就变得很大了。所以,在iphone4上我们要修改html的font-size=17px,可是还有Iphone5,iphone6 plus,还有无数的安卓机型呢?! 有没有办法,可以让css根据当前的屏幕大小,自动调整对应的html的font-size呢?聪明的你,肯定想到了,用媒体查询呀!太对了,这就是其中的一个办法。切云还会告诉您另外一种办法,就是通过js自动调节html级别的font-size:

下面给大家详细介绍一下这两种方法:

第一种是使用媒体查询控制不同分辨率下的根原素大小。方法如下图,要根据项目的实际类型改变媒体查询的值。

enter image description here

第二种方法就是通过JavaScript动态获取屏幕的宽度,然后给HTML设置font-size的值。下面切云给大家讲解一下这段JS代码。切云主要以手机端为例。

enter image description here 将这做代码打包到一个defineRemSize.js的文件中,在页面里引用。在用下面这这个方法调用。

enter image description here

做完了这这些,我们有了可以自适应的rem的值,接下来切云就说一下在实际使用中的一些心得。 Rem不仅可以用在字体大小单,包括容器宽度的值、高度的值、margin的值、padding的值都可以使用rem做为单位大小。实际上rem更像是聪明的百分比数值。如果页面所有远素的值都使用rem,整个面更像是一张图片。缩小时整体都会缩小,放大里整体都会放大。下面给大家看一下切云使用两种方法做的同一个页面的效果图。

enter image description here enter image description here 能过对比,会发现,使用rem在不同分辨率的设备上整体比例是不变的。并且没有使用任何媒体查询方法。但是使用px+%这种方法做出来的页面,在不同的页面上的元素的间距会发生改变,图片会随首设备宽度的变化而变化,但是文字大小以及元素的间距并没有发生变化。

由以上可以得出,在使用rem做为页面元素单位时,在适配时会更加简便,并且页面在不同尺寸的终端设备上页面整体比例不会改变。不需要我们再通过Media query 来适配不同的分辨率。并且做出来的页面会更加的接近设计图。

切云隶属于北京英印融云科技有限公司,是国内最大的Web前端服务公司,专注于切图、HTML页面编写、前端咨询服务,为您提供最专业的前端Web服务。要切图找切云! 目前切云主要业务为Web前端服务,针对大批量、高质量Web网页编写需求的客户提供快速、高质的服务,特别适合对质量、速度有要求的软件开发公司、建站公司、网页设计公司或个人等。 服务范围包括Web网页编写,手机端H5网页编写,响应式页面编写,还包括javascript、CSS动态交互,动画效果等编写。切云可以在很短周期内,完成大量的网页编写服务。

评论
发表评论
暂无评论
WRITTEN BY
切云微博
切云是国内专注于切图和Web前端服务的专业公司,由丰富前端经验的开发人员组成。
TA的新浪微博
PUBLISHED IN
切云!您的前端切图服务专家

切云是国内专注于切图和Web前端服务的专业公司,由丰富前端经验的开发人员组成,根据PSD编写HTML和Javascript和CSS动画的Web前端服务,我们严格控制质量,恪守对客户的交付日期,不断地向客户提交高质量服务。

切云专栏会定期给大家分享关于前端切图和前端外包的经验和最新资讯。

我的收藏