井井客

搜索

CSS3之rem初体验

最近改了一些手机端页面,因为是两人一起切的,而在我手上只调整样式兼容和Js效果,中间遇到rem、em两种写法导致页面风格不一致问题,最终决定统一为rem,百度了一些文章,搜索rem工具,

CSS3之rem初体验

之前公司的项目中做移动端并不是一个很废心的事,页面简单、需求少,而且金融资讯网站真的没有必要做的太花哨,所以使用html5和CSS3不多,研究也较少。而这次接解到的这个移动端项目,应该说页面也不是很复杂,但是切图的两人使用的方法不一样,导致出现rem,em两种单位写法,而效果图出来的风格也变成了两样,统一风格已经是不得不做的事了,最终方案即是rem,下面只是我的浅见,也有一些互联网上copy的概念性文字,欢迎指正!

1、了解REM之rem是什么?

rem是指相对于根元素(html)的字体单位大小,是一种相对单位。当然说到相对单位大家也能立马想到em,而em则是一种相对父(parent)元素的字体单位大小。他们的主要区别就是相对的对象一个是根元素一个是父元素。

例如一个元素的根元素是32px,父元素是20px,当它是0.5rem时则实际尺寸为16px(相对于32px),而它是0.5em时则实际尺寸为10px(相对于20px),这样是不是能稍微有个了解?

2、如何利用rem做到等比例适配手机屏幕

这一点的关键还是在上面说的根元素的字体大小上,不考虑手机缩放可以举个粟子:

假设元素A为1rem,当手机浏览器宽度为320px时设置html字体为32px,这时的A元素实际为32px,而当浏览器宽度为480px时我们就设置html字体为48px,这时的A元素实际就为48px了,这样就达到了一个比较理想的效果。

而如何根据浏览器的不同设置html的字体不同,可以使用"flexible.debug.js"插件来实现。

3、说说viewport

我自己理解的其实就是手机有两个宽度,一个是设备物理宽度,一个是窗口虚似宽度,中间有个密度的换算,而在不进行其它设置的时候窗口宽度是物理宽度的2倍左右,当然这只是我自己理解的,因为我自己对viewport也是一知半解,只是大概知道它在布局中的影响而已,其实之前也有文章说了一些这方面的东西,但是下面还是再来贴出些比例正统的说明~

手机浏览器是把页面放在一个虚拟的窗口-viewport中的,通常情况下这个虚拟的窗口比屏幕宽,这样就不用吧每个网页挤到很小的窗口中(这样会破坏没有针对手机浏览器优化的网页的布局),此时虽然显示不完全,但是用户仍可以通过平移和缩放来看网页的内容。viewport就是让网页开发者通过其大小,动态的设置其网页内容中控件元素的大小,从而使得在浏览器上实现和web网页中相同的效果(比例缩小)。

而一般的常用做法就是将width=device-width,将窗口宽度统一为设备物理宽度,那么你看大屏手机时html字体设置大些,而看小屏手机时html字体就设置小些,就能达到一个各屏幕适配了~

当然了解这三点只是进行rem布局的一个起步而已,更多的还是需要自己去摸索实践~

下面推荐一款sublime的px转rem插件:cssrem,插件包地址:https://github.com/flashlizi/cssrem有兴趣可以百度搜索一下。

扩展阅读:
http://isux.tencent.com/web-app-rem.html
http://www.w3cplus.com/mobile/lib-flexible-for-html5-layout.html

文章TAG:CSS3

作者:井井客原创来源:原创
本文标题:CSS3之rem初体验
本文链接:/c/09122.html

上一篇:页面重构应注意的重绘和渲染
下一篇:JQ自制手机端横向标题滚动切换选项卡

文章分类

相关阅读

随便看看