随着手机等移动设备的普及,移动端带来的流量已经不可忽视,一个网站不只是只有pc的页面就足够了,移动端的适配已经势在必行。但是移动设备种类繁多,屏幕尺寸也千奇百怪,能不能找到一种方式可以适配所有的手机屏幕呢?

答案就是rem。

俗话说 “授人以鱼不如授人以渔”,但今天我就反其道而行,就是授人以鱼的。因为要跟你说什么设备像素比、css像素、ppi等东西,估计你会晕的(主要是我也搞不懂)。废话不多说,先上代码。

 /*移动端适配 width|height|font-size = 视觉稿量出来的值 / 100rem;@lbl*/
@media screen and (max-width:359px) and (min-width:320px) {
html,body{
font-size: 50px !important;
}
}
@media screen and (max-width:374px) and (min-width:360px) {
html,body{
font-size: 56.25px !important;
}
}
@media screen and (max-width:413px) and (min-width:375px) {
html,body{
font-size: 58.5px !important;
}
}
@media screen and (max-width:639px) and (min-width:414px){
html,body{
font-size: 64.6px !important;
}
}@media screen and (min-width:640px) {
html,body{
font-size: 100px !important;
}
}

 

rem顾名思义就是root element,这个是一个相对的单位,与em的差别在于rem相对的是根节点html的font-size,em相对的是父元素font-size。使用rem其实是用媒体查询修来改html的font-size,那么使用rem的元素的大小也会相应的改变,所以我们只要写一份css就可以适配所有手机的屏幕了。虽然rem在某些浏览器下面不够精准,但那也只是极少数,如果需要非常精准的适配,那么可以使用js来计算html的font-size。

很多开发者听到适配的第一反应就是手机的屏幕宽度多少多少,物理像素多少多少,然后考虑适配。这是从设配的角度入手,拿视觉稿去适配手机。难道我们就不能抛开设备从视觉稿入手吗?那么就来看看。

设计师给的视觉稿,一般都是按照640px来设计的。当我们拿到视觉稿时,首先把视觉稿的宽度转换为rem,我们并不需要考虑设备的分辨率,只需要按照 视觉稿宽度 = font-size x rem 这个公式来计算就好了。视觉稿的宽度是给定的,我们以640px为例,font-size 与rem是两个变量,我们只需要它们的乘积等于640即可。我们采用定一变一的方式,假定rem=6.4,那么初始值font-size就必须等于 100px,我们就可以根据需要适配的屏幕宽度来等比例调整font-size。那么如果我们640px的视觉稿需要显示成320px呢,我们只需要把font-size对应的缩小一半就可以了。其他的什么375px、414px、各种的屏幕,只需要等比例缩放就好了。比如:

 320px: font-size = 320 / 640 * 100 = 50px;
360px:font-size = 360 / 640 * 100 = 56.25px;
.........
800px:font-size = 800 / 640 * 100 = 125px;

其实按照比例算出来的font-size,我都是向下取小数点,这样可以保证元素的宽度不会超过总宽度。只是如果我们的视觉稿宽度给的是640px,但是需要在大于640的设备下显示的话,那么就会出现图片模糊等现象了,所以我们一般都使用大的视觉稿来适配小的屏幕。比如需要适配比640px大的屏幕,你可以让设计师根据宽度为960px来设计,然后转换为9.6rem,初始值font-size=100px;再根据需要适配的屏幕宽度来等比例调整font-size的大小就好了。

如果想需要更准确的适配,可以使用js动态计算窗口的宽度来改变font-size的大小,阿里手淘使用的flexible也是这样的方式,以下是趴下来的一份flexible的简化版

 (function(win) {
var remCalc = {};
var docEl = win.document.documentElement,
tid; function refreshRem() {
// 获取当前窗口的宽度
var width = docEl.getBoundingClientRect().width;
// 大于640px 按640算
if (width > 640) { width = 640 }
// 把窗口的宽度固定分为10份 也就是10rem
// 按视觉稿640算 640/10=64px 那么1rem = 64px
// 640视觉中 80px*80px的按钮 转换为rem 80/64 = 1.25rem
// 按钮的宽高固定为 1.25rem * 1.25rem
// 当窗口宽度缩放为 320px的时候
// 那么 1rem = 32px
// 原来 80px*80px的按钮现在变为 1.25rem * 32px = 40px
// 按钮变为 40px * 40px
// 其他宽度也类似
//
// cms做法也类似
// 只是我们把窗口宽度固定分为 6.4份,即6.4rem
// 所以 1rem = 100px
// 640视觉中 80px*80px的按钮 转换为rem 80/100 = 0.8rem
// ....其他也差不多
//
//
// 对比
// 其实也就是计算rem的问题 视觉稿量出来的值 除64 或 100的问题
// 除100 总比 除64 好口算
// 就算用sass写个 @function px2rem代替口算
// .8rem 总比输入 px2rem(80)少几个字符
//
//
var rem = width / 10; // cms 只要把这行改成 var rem = width /640 * 100
docEl.style.fontSize = rem + "px";
remCalc.rem = rem;
//误差、兼容性处理
var actualSize = parseFloat(window.getComputedStyle(document.documentElement)["font-size"]);
if (actualSize !== rem && actualSize > 0 && Math.abs(actualSize - rem) > 1) {
var remScaled = rem * rem / actualSize;
docEl.style.fontSize = remScaled + "px"
}
} //函数节流,避免频繁更新
function dbcRefresh() {
clearTimeout(tid);
tid = setTimeout(refreshRem, 100)
} //窗口更新动态改变font-size
win.addEventListener("resize", function() { dbcRefresh() }, false); //页面显示的时候再计算一次 难道切换窗口之后再切换来窗口大小会变?....
win.addEventListener("pageshow", function(e) {
if (e.persisted) { dbcRefresh() }
}, false);
refreshRem();
remCalc.refreshRem = refreshRem;
remCalc.rem2px = function(d) {
var val = parseFloat(d) * this.rem;
if (typeof d === "string" && d.match(/rem$/)) { val += "px" }
return val
};
remCalc.px2rem = function(d) {
var val = parseFloat(d) / this.rem;
if (typeof d === "string" && d.match(/px$/)) { val += "rem" }
return val
};
win.remCalc = remCalc
})(window); // 考拉移动端全站使用rem的不是很多
// 主要用100%布局 比如width、height、padding
// 也有直接用px 字体大小使用px固定不变
// 还有使用em的 基于font-size 定line-height
// 全站元素使用 box-sizing: border-box
// 多行省略号 text-overflow: ellipsis; -webkit-line-clamp: 2;
// 非主要页面很多都是图片 影响seo 看得出很缺前端
// 使用rem 最好文字都指定字体大小 不然会继承html的font-size

移动端适配之REM的更多相关文章

  1. 移动端适配单位rem

    0 写在前面 本周惊喜地发现,其他各个老师的软工班(罗杰老师班和欧阳老师班)的软工项目的alpha版本都已经发布了!(然而我们软工项目还没开始写代码…逃…) 十分好奇的我第一时间下载了一些他们的产品进 ...

  2. 移动端适配(rem & viewport)--移动端开发整理笔记(四)

    移动端适配 通过rem适配 em: 根据元素自身的字体大小来计算自己的尺寸 rem: (root em) 根据根节点(html)的字体大小来计算自己的尺寸   我们知道,在不同的手机设备,分辨率大小是 ...

  3. 移动端适配方案-rem(基础篇)

    常见移动web适配方案一般有3种方法,如下图: ①:定高,宽度百分比(一般用来做一些适配性不高的页面,比如主要以一些文字和图片为主的网页或移动端的头部和底部) ②:flex (更多的用于复杂页面的布局 ...

  4. H5移动端适配方案-rem

    为什么移动端要适配: 由于移动设备的尺寸不一,所以移动端的页面要能够适应不同尺寸的设备,即页面的自适应,让页面在视觉上保持一致. rem:rem 是css3的一种相对单位,参考是根元素HMTL的fon ...

  5. 移动端适配(rem单位定义方法)

    注:移动端必须写: <meta name="viewport" content="width=device-width, user-scalable=no, ini ...

  6. 小tips:使用rem+vw实现简单的移动端适配

    首先设置meta属性,如下代码: <meta name="viewport" content="width=device-width, initial-scale= ...

  7. rem移动端适配方案

    一. rem vs em 单位 定义 特点 rem font size of the root element 以根元素字体大小为基准 em font size of the element 以父元素 ...

  8. 移动端适配 后篇(rem+vm)

    涉及到的一些名词, 详细解释可参考 移动端适配前篇--移动端适配 rem 名词解释 [英寸Inch]英寸表示屏幕斜对角线的长度 [像素Pixel]像素是图像的基本采样单位,它不是一个确定的物理量,因为 ...

  9. 移动端适配之雪碧图(sprite)背景图片定位

    为了减少网络请求个数量,提高网站的访问速度,我们一般都会把一些小的图片合并成一张sprite图,然后根据background-position来进行定位.在web端由于是固定的大小与left .top ...

随机推荐

  1. mvc4 @foreach 如何写@if 判断

    不知道你想写在里面还是外面,我里外都写上,你可以参考下:@if(Model!=null){ foreach(var item in Model) { if(item.Name=="李四&qu ...

  2. 2018ICPC南京网络赛

    2018ICPC南京网络赛 A. An Olympian Math Problem 题目描述:求\(\sum_{i=1}^{n} i\times i! \%n\) solution \[(n-1) \ ...

  3. 1->小规模集群架构规划

    "配置无人值守批量安装系统(Cobbler)" "搭建PPTP VPN/ NTP/Firewalld内部共享上网 " "搭建跳板机服务jumpserv ...

  4. URL的井号

    2010年9月,twitter改版. 一个显著变化,就是URL加入了"#!"符号.比如,改版前的用户主页网址为 http://twitter.com/username 改版后,就变 ...

  5. 一步步教你编写不可维护的 PHP 代码

    译者注:这是一篇很棒文章,使用有趣的叙述方式,从反面讲解了作为一个优秀的 PHP 工程师,有哪些事情是你不能做的.请注意哦,此篇文章罗列的行为,都是你要尽量避免的. 随着失业率越来越高,很多人意识到保 ...

  6. Luogu P2310 【loidc,看看海】

    各位大佬都用的排序和杨颙大定理,蒟蒻的我怎么也不会做(瑟瑟发抖),那么,就来一发主席树吧.我们知道线段树可以维护区间,平衡树可以维护值域那么,我们可以用线段树套平衡树来解决这个区间值域的问题线段树套平 ...

  7. JAVA复习笔记分布式篇:zookeeper

        前言:终于到分布式篇,前面把JAVA的一些核心知识复习了一遍,也是一个JAVA程序员最基本要掌握的知识点,接下来分布式的知识点算是互联网行业的JAVA程序员必备的技能:     概念:ZooK ...

  8. xcode7 创建pch文件

    1.打开xcode 7.2 项目,在屏幕顶端的工具栏,选择File>New>File..>iOS>Other>PCH File,点击"next"下一步 ...

  9. SQL Server日期计算

    通常,你需要获得当前日期和计算一些其他的日期,例如,你的程序可能需要判断一个月的第一天或者最后一天.你们大部分人大概都知道怎样把日期进行分割(年.月.日等),然后仅仅用分割出来的年.月.日等放在几个函 ...

  10. python开发学习-day13(js、jQuery)

    s12-20160409-day13 *:first-child { margin-top: 0 !important; } body>*:last-child { margin-bottom: ...