rem

所谓前端适配,就是为了让移动设计稿在大部分的移动设备上看起来有一致的展示效果,目前比较流行的方法有两种。一种是强制meta viewport宽度为设计稿宽度,一种是使用rem自适应布局的flexible.js。

rem 和 em 单位是由浏览器基于你的设计中的字体大小计算得到的像素值。em 单位基于使用他们的元素的字体大小。rem 单位基于 html 元素的字体大小。em 单位可能受任何继承的父元素字体大小影响。rem 单位可以从浏览器字体设置中继承字体大小。

flexible.js正是利用rem单位相对根元素的font-size来做计算,而我们需要做的就是根据不同的屏幕算出html的font-size,而页面内的大小单位都根据rem来写,从而实现了自适应。

使用rem实现自适应布局,应该算是当前移动前端的一大趋势,有些人对此还有点迷惑,搞不懂rem是如何实现自适应布局,如何根据设计稿来调整rem的值?rem布局如何用雪碧背景图片?rem一定要加载js吗?rem的根html font-size设置为多少合适?看看这篇文章,也许能帮到你。

rem自适应js代码,根据淘宝的flexible库优化而来的,使用计算方式上比原来的更加方便,添加这段代码在页面中,你就能愉快的使用rem实现自适应了。

rem是相对于根元素,这样就意味着,我们只需要在根元素确定一个px字号,则可以来算出元素的宽高。本文讲的是如何使用rem实现自适应

互联网上的自适应方案到底有几种呢?就我个人实践所知,有这么几种方案:1.固定一个某些宽度,使用一个模式,加上少许的媒体查询方案。2.使用flexbox解决方案。3.使用百分比加媒体查询。4.使用rem。你还有其他方案吗?来分享你的想法吧。

rem与px都是css单位,通常px是我们比较熟悉的单位,所以根据设计稿转换rem的话,一般都需要根据html的设置的px字号来转换,本文提供了rem与px之间的转换。

本文讲的通过flexible.js实现了rem自适应,有了flexible.js,我们就不必再为移动端各种设备兼容烦恼,flexible.js是如何通过rem实现自适应的呢?