用rem实现WebApp自适应的优劣分析
关于rem实现屏幕自适应布局的讨论还是比较多的,刚好我也看到使用rem实现自适应的web app,所以也来凑下热闹。
说起rem,免不了要联系到em、px,这里简单提提他们的定义和特点。
1. px:像素(Pixel),相对长度单位。像素px是相对于显示器屏幕分辨率而言的,手机上的100px和电脑上的100px其实绝对长度是不一样的,肉眼就能看出来,严谨的你可以用尺子量一下,这就是因为他们的分辨率不同。还有相当多的人认为px是绝对单位,这里告诉大家不要人与亦云,多思考。
2. em:相对于当前对象内文本的字体尺寸,会继承父级的字体尺寸。也就是说 1em=1*父级元素的font-size。明显,在多层嵌套的结构下使用em的话,由于层层继承的缘故,要确定最终呈现出来的尺寸会非常麻烦,过于混乱。
3. rem:相对于html根元素文本的字体尺寸,与中间层字体尺寸无关。也就是说 1rem=1*html元素的font-size。rem就相当于是一个全局缩放因子,改变它一个就可以缩放所有以它为单位的元素,只要将它与屏幕分辨率关联起来,就可以完成屏幕自适应展现。
关于rem实现自适应的具体解释可以看看isux组的这篇文章:https://isux.tencent.com/web-app-rem.html,里面实现自适应有两个途径,分别是media查询和js动态计算。提问区里面说到如果只是在页面底部用js动态计算的话,页面元素尺寸改变时会有一定的闪烁现象。建议是先在css里根据屏幕用@media初始化一遍html 的font-size,然后再用js计算。提问区里面还有人问js代码的,这样的问题博主都没兴趣回答了,我贴一份吧。
<script>
(function (doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';
}; if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
</script>
rem的优势
使用rem的优势非常明显了,尤其是在现在屏幕分辨率千差万别的时代,只要将rem与屏幕分辨率关联起来就可以实现页面的整体缩放,所以设备上的展现都统一起来了。而且现在浏览器基本都已经支持rem了,兼容性也非常的好。在上文提问区中还有一些人说“QQX5内核浏览器不支持rem单位,在大部分android 机上的微信页面不起作用”,我表示没这样的事,还是那句话,多思考多验证。
rem的劣势
其实rem的优势也正是他的缺点,rem的屏幕自适应与当前两大平台的设计哲学不一致!从用户体验上来看,文字阅读的舒适度跟媒体介质大小是没关系的。简单的来说,你本来喜欢麻将那么大的红烧肉,一口一块爽爆了,但是服务员换了个大盘子,就给你上了砂锅那么大的一整块肉。因为盘子大了肉也要成比例放大~~
VS
无论盘子大小,你都希望能一口吃下那块肉,文字阅读也是一样。字体根据媒介缩放是因为屏幕太小的时候,为了呈现更多的内容,因为频繁翻页的用户体验也是很差的。另外,图片视频的尺寸不应该随意缩放,如果图片视频的宽高都用rem关联起来, 这样虽然是等比缩放了,但是有时候我们并不想图片被放大。你看下图,对吧。
VS
还有就是图片像素不高的时候,小屏到大屏的放大会让图片变模糊,这样还不如小尺寸看着顺眼。
关于优劣势的讨论可以看知乎上的讨论,我也引用了大神们的观点,标明一下出处哈。http://www.zhihu.com/question/21504656?
总体上来说,使用rem的优势远远大于劣势,对于上文提到的问题点,使用px+rem的方式还是可以得到很好的用户体验的。一般rem用于需要跟随屏幕变化的尺寸(这不是废话吗?),px用于字号,细边框等不应该随屏幕变化的元素上。在web APP中,rem的使用肯定会越来越普遍的,大家就慢慢探索吧。还是那句话,多思考,多从用户的角度思考问题,这才是前端思维。
PS:关于rem的一些小问题
1)html的font-size设置到12px以下还是会按照12px=1rem来计算,这样所有使用了rem单位的尺寸都是错的。原因看2)。话说,直接设置为100px不好么?body再设置要用的字号不就好了?
2)百度谷歌出来的结果里面,html{font-size:62.5%}的设置一大堆,不推荐使用这种方式,多此一举,简直愚蠢!这里利用了浏览器默认字号16px,16*62.5=10px,为何不直接设置为10px呢?但是设置为10px也是不好的,子元素继承了10px的字体大小也是没用的,因为chrome浏览器默认最小字体是12px。当然你有一万种改默认设置的办法,把字体设置到1px大小都可以。看看上文说的阅读体验,你确定要把字体设得那么小,让你的用户都眯成了斗鸡眼?
问题暂时发现就这2个,如果你发现有其他问题,可以发在讨论区,咱们聊聊。
总结就到这里了,听说放点美图可以拉高文字质量呢,都是自拍哦~~
用rem实现WebApp自适应的优劣分析的更多相关文章
- 移动端webapp自适应实践(css雪碧图制作小工具实践)图文并茂
为什么要写这个 以前写过关于webapp自适应屏幕的文章(链接),不过写的大多数群众看不懂,所以来个图文并茂的版本.虽然只是一个简单的页面,不过在做的过程中也遇到了一些问题,也算是好事吧! 该示例gi ...
- spark和strom优劣分析
对于Storm来说:1.建议在那种需要纯实时,不能忍受1秒以上延迟的场景下使用,比如实时金融系统,要求纯实时进行金融交易和分析2.此外,如果对于实时计算的功能中,要求可靠的事务机制和可靠性机制,即数据 ...
- 小白学习mysql之存储过程的优劣分析以及接入控制
存储过程的优劣 存储过程是一组实现特定功能的SQL语句集合,存储过程一经编译便存储在了服务器上,可以通过调用存储过程的名字以及传入相应的参数来使用存储过程.要高层次的掌握存储过程,不能觉得依葫芦画瓢, ...
- rem是如何自适应的
原文链接:http://caibaojian.com/web-app-rem.html 摘要:rem是相对于根元素<html>,这样就意味着,我们只需要在根元素确定一个px字号,则可以来算 ...
- rem - 移动前端自适应适配布局解决方案和比较(转载)
原文链接:http://caibaojian.com/mobile-responsive-example.html 互联网上的自适应方案到底有几种呢?就我个人实践所知,有这么几种方案:· 固定一个某些 ...
- 利用rem实现webapp布局
rem这是个低调的css单位,近一两年开始崭露头角,有许多同学对rem的评价不一,有的在尝试使用,有的在使用过程中遇到坑就弃用了. 但是我对rem综合评价是用来做web app它绝对是最合适的人选之一 ...
- 地区picker 各选择器,优劣分析
移动端选择器picker有很多,各大ui组件都有自己的picker,比如light7,HUI,MUI,jqueryUI等等.但是,我发现他们都有各种各样的问题.这次的地区选择,需要地区的省份+市+经纬 ...
- JAVA之多线程概念及其几种实现方法优劣分析
1. 多线程 程序:指令集,静态的概念 进程:操作系统调动程序,是程序的一次动态执行过程,动态的概念 线程:在进程内的多条执行路径 Ps:单核的话进程都是虚拟模拟出来的,多核处理器才可以执行真正的多线 ...
- Dedecms手机站三种不同建设方法和优劣分析
dedecms简单易用功能强大,是国内使用最多的cms建站系统,百度站长平台专门推出了“织梦移动化指南”,由此可见dedecms的影响力.织梦也是站长使用和学习最早的cms建站系统,解放了我的双手,让 ...
随机推荐
- Vmware无法获取快照信息 锁定文件失败
今天早上起来发现虚拟机崩了: 造成原因: 如果使用VMWare虚拟机的时候突然系统崩溃蓝屏,有一定几率会导致无法启动, 会提示:锁定文件失败,打不开磁盘或快照所依赖的磁盘: 这是因为虚拟机在运行的时候 ...
- 运用泛型,冒泡排序实现JDK引用类型数组的排序
public class Utils { public static <T extends Comparable<T>> void sortList(List<T> ...
- hdu3534 树的直径变形
题目链接:http://acm.split.hdu.edu.cn/showproblem.php?pid=3534 题意:n 之后 n-1条边,l,r,w:求出树上的最长路径以及最长路径的条数. // ...
- 【转】npm publish 发布
<h3 class="catListTitle">一.npm包结构(编写)</h3> npm包实际是一个存档文件,即一个目录直接打包为.zip或tar.gz ...
- js中获取css的样式
因为给定一个div宽度或者其他样式之后,再设置一个border的宽度在js中得到的obj.setoffWidth就会变成width加上border的二倍宽度,因此可以自己写一个方法来获取样式.(obj ...
- SpringMvc的简单介绍
1.mcv框架要做哪些事情 (a)将url映射到java类或者Java类的方法 (b)封装用户提交的数据 (c)处理请求---调用相关的业务处理,封装响应的数据 (d)将封装的数据进行渲染,jsp,h ...
- jQuery技巧
回到顶部按钮 图片预加载 判断图片是否加载完 自动修补破损图像 Hover切换class类 禁用输入 停止正在加载的链接 toggle fade/slide 简单的手风琴 使两个DIV同等高度 在浏览 ...
- Hive文件存储格式
hive文件存储格式 1.textfile textfile为默认格式 存储方式:行存储 磁盘开销大 数据解析开销大 压缩的text文件 hive无法进行合并和拆分 2.sequencef ...
- python实现简单爬虫功能
在我们日常上网浏览网页的时候,经常会看到一些好看的图片,我们就希望把这些图片保存下载,或者用户用来做桌面壁纸,或者用来做设计的素材. 我们最常规的做法就是通过鼠标右键,选择另存为.但有些图片鼠标右键的 ...
- 利用CORS实现跨域请求(转载)
跨域请求一直是网页编程中的一个难题,在过去,绝大多数人都倾向于使用JSONP来解决这一问题.不过现在,我们可以考虑一下W3C中一项新的特性--CORS(Cross-Origin Resource Sh ...