使用rem等比例缩放手机界面
这几天写公司官网的手机端界面,同事介绍了一种布局模式,即使用rem等比列缩放布局。
rem布局非常简单,首页你只需在页面引入这段原生js代码就可以了。
(function (doc, win) {var docEl = doc.documentElement,resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',recalc = function () {var clientWidth = docEl.clientWidth;if (!clientWidth) return;if(clientWidth>=640){docEl.style.fontSize = '100px';}else{docEl.style.fontSize = 100 * (clientWidth / 640) + 'px';}};if (!doc.addEventListener) return;win.addEventListener(resizeEvt, recalc, false);doc.addEventListener('DOMContentLoaded', recalc, false);})(document, window);
如何使用?
这是rem布局的核心代码,这段代码的大意是:
如果页面的宽度超过了640px,那么页面中html的font-size恒为100px,否则,页面中html的font-size的大小为: 100 * (当前页面宽度 / 640)
于是,问题来了,为什么要这样?别急,我先来一一回答
- 为什么是640px?
对于手机屏幕来说,640px的页面宽度是一个安全的最大宽度,保证了移动端页面两边不会留白。注意这里的px是css逻辑像素,与设备的物理像素是有区别的。如iPhone 5使用的是Retina视网膜屏幕,使用2px x 2px的 device pixel 代表 1px x 1px 的 css pixel,所以设备像素数为640 x 1136px,而它的CSS逻辑像素数为320 x 568px。
如果要切移动端页面,你可以先把效果图宽度等比例缩放到640px,很好用。 - 为什么要设置html的font-size?
rem就是根元素(即:html)的字体大小。html中的所有标签样式凡是涉及到尺寸的(如: height,width,padding,margin,font-size。甚至,left,top等)你都可以放心大胆的用rem作单位。
如果你把html的font-size设为20px,前面说过,rem就是html的字体大小,那么1rem = 20px。
此时,此时宽60px,高40px的元素样式就这样设置如下 ↓width: 3rem; height: 2rem;
那要是宽55px,高37px呢?然后经过换算,,设置如下 ↓
width: 2.75rem; height: 1.85rem;
是不是发现这换算起来有点麻烦啊,,,(当然,你要是心算帝请无视)
如果我们一开始把html的font-size设为100px呢?此时1rem = 100px,那么上面的宽55px,高37px的元素样式就可以这么设置 ↓width: 0.55rem; height: 0.37rem;
是不是换算起来简单多了?!
(当然可能有同学问,为什么不一开始把html的font-size设为1px呢,这样换算起来也简单,答:浏览器一般都有最小字体限制,比如谷歌浏览器,最小中文字体就是12px,所以实际上没有办法让1rem=1px。)
根据上面的js代码,如果页面宽度低于640px,那么页面中html的font-size也会按照(当前页面宽度/640)的比例变化。这样,页面中凡是应用了rem的作尺寸单位的元素都会随着页面变化而等比例缩放了! - 都哪些情况可以用rem布局?
大部分情况下都可以用rem布局这个方法,当然具体还要看情况而定。拿我们公司项目举例,只有底部的导航不用rem,而是用的flex布局。因为导航点击最多,所以给它一个固定的大小(其实就是高度固定,宽度自适应的方案)。大家可以看看淘宝的这个手机页面淘宝手机站,基本就是这种感觉,底部导航和顶部搜索框用的高固定,宽自适应的方案,其余的部分基本都是随着浏览器宽度变化在等比例缩放。
最终页面代码首页代码大致如下
<!DOCTYPE html>
<html lang="en">
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<script>
(function (doc, win) {var docEl = doc.documentElement,resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',recalc = function () {var clientWidth = docEl.clientWidth;if (!clientWidth) return;if(clientWidth>=640){docEl.style.fontSize = '100px';}else{docEl.style.fontSize = 100 * (clientWidth / 640) + 'px';}};if (!doc.addEventListener) return;win.addEventListener(resizeEvt, recalc, false);doc.addEventListener('DOMContentLoaded', recalc, false);})(document, window);
</script> /*你引进的资源*/
<title>标题</title>
</head>
<body>/*你的代码*/
</body>
</html>
回过头来再看看现在流行的几种布局方式:
1.定宽度布局
很多pc的网站都是定宽度布局的,也就是设置了min-width,
这样一来,如果小于这个宽度就会出现滚动条,
如果大于这个宽度则内容居中外加背景,
这种设计常见与pc端。
2.响应式布局
所谓响应式布局就是流式布局+媒体查询,
流式布局用来解决不同宽度的布局问题,
外加媒体查询,可以调整布局,例如大屏幕是布局1,小屏幕是布局2,
这种布局通吃pc和移动端,做到精细处,两者的效果都很好,
缺点是媒体查询是有限的,也就是可以枚举出来的,
只能适应主流的宽高。
3.rem布局
原理是,先按定高宽设计出来页面,然后转换为rem单位,
配合js查询屏幕大小来改变html的font-size,
最终做出所谓的完美自适应。
4.flex布局
这是css3 推出的一个新的属性。使用该属性可以很方便的达到布局的效果。使用该属性后,子元素不能再使用float、vertical-middle等属性。
目前新的主流浏览器都支持该属性(IE10+上)。因此该布局用于手机端,表示毫无压力。
详情可以查看http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool
【rem缺点】
rem一出好像所有移动端自适应不采用rem都很low一样,
来分析分析,
假设以100x100做出网页,
那么采用rem+js完全可以自适应所有200x200,300x300,450x450等等高宽,
问题来了,
如果用100x100设计好后,
来了100x200,100x300,100x400的手机,
那么效果无非两种:
1.网页内容只局限与网页顶部,例如100x400的手机,网页内容只占用的100x100的部分,
2.有人说可以高度也js+rem,那么效果无非是拉伸或者缩放
【不要抬杠】
有人会说了,现实中不会有100x400的手机,
我想说的是这种rem+js只不过是宽度自适应,
高度没有做到自适应,一些对高度,或者元素见间距要求比较高的设计,
那这种布局没有太大的意义。
如果只是宽度自适应,那我更推荐的是响应式设计。
【响应式 vs rem】
1.响应式
随便找一个响应式的网站:http://www.golaravel.com/
改变浏览器宽度,你会发现“布局”会随之变化,不是一成不变的,
例如导航栏在大屏幕下是横排,在小屏幕下是竖排,在超小屏幕下隐藏为菜单,
也就是说如果有足够的耐心,在每一种屏幕下都应该有合理的布局,完美的效果。
优点:适应pc和移动端,如果足够耐心,效果完美
缺点:要匹配足够多的屏幕大小,工作量不小,设计也需要多个版本
2.rem+js
找了腾讯那篇文章的示例:http://121.40.99.17/global/rem-phone.html
改变浏览器宽度,你会发现,页面所有元素的高宽都等比例缩放,
也就是大屏幕下导航是横的,小屏幕下还是横的只不过变小了。。
优点:理想状态是所有屏幕的高宽比和最初的设计高宽比一样,或者相差不多,完美适应。
缺点:碰到重视高度的设计,或者重视元素间间距的设计,那就玩不开了。
【总结】
1.如果只做pc端
那么定宽度是最好的选择
2.如果做移动端,且设计对高度要求不高
那么rem+js是最好的选择,一份css+一份js调节font-size搞定
3.如果pc,移动要兼容,而且要求很高
那么响应式布局还是最好的选择,前提是设计根据不同的高宽做不同的设计,
响应式根据媒体查询做不同的布局。
【ps】
还有一种rem+媒体查询,和rem+js一对比感觉有点鸡肋就没有提及。
参考:
原文链接:http://www.jianshu.com/p/b00cd3506782
著作权归作者所有,转载请联系作者获得授权,并标注“简书作者”。
2:http://blog.csdn.net/uikoo9/article/details/46555751
使用rem等比例缩放手机界面相关推荐
- html 手机上按比例缩放,动态rem方案等比例缩放手机页面
这篇文章主要梳理阿里的动态rem方案. 需求: 在做手机页面的时候,经常会遇到一个问题,那就是随着智能手机的发展,各个屏幕尺寸的手机层出不穷,从宽度300px到420px的都有,当我们想要适配各种屏幕 ...
- rem介绍、vw、vh实现等比例缩放
rem解决移动端等比例缩放 1. 三个单位之争:px.em.rem (1)px是像素的意思,例如:50px就是50像素的大小,就是组成我们图像的最小单位,指的是将图像放很大会发现里面是由1小格小格组 ...
- Android 让图片等比例缩放的三种方法
方法一:客户端等比例 前提条件:服务器端需要返回原始图片的"宽和高"或者"宽高缩放比例",客户端要显示的图片的宽或者高只要其一是固定的(例如:高度为200,宽度 ...
- 【移动端】手机界面的设计尺寸
从设计方面来看,做手机界面设计的尺寸一般分为iPhone和Android两种设备. Android的常用逻辑分辨率: Android的常用逻辑分辨率:参考屏幕尺寸大全 360 * 640 . 360 ...
- 理解CSS3中的background-size(对响应性图片等比例缩放)
理解CSS3中的background-size(对响应性图片等比例缩放) 阅读目录 background-size的基本属性 给图片设置固定的宽度和高度的 固定宽度400px和高度200px-使用ba ...
- android 按比例缩放,Android postScale不按比例缩放
我已经有了一个Bitmaps的负载,我现在试图根据屏幕大小来缩放,我这样做的方式是将当前设备屏幕大小除以我的测试手机大小,因为所有图像是根据该屏幕制作的.Android postScale不按比例缩放 ...
- Android 使用Picasso加载网络图片等比例缩放
在做android图片加载的时候,由于手机屏幕受限,很多大图加载过来的时候,我们要求等比例缩放,比如按照固定的宽度,等比例缩放高度,使得图片的尺寸比例得到相应的缩放,但图片没有变形.显然按照andro ...
- android界面设计所用中文什么字体,「界面」手机界面设计字体大小知多少
今天我们来讨论一下界面字体大小的问题,上篇文章我们讨论到使用什么字体的问题,这篇文章我们主要讨论手机界面设计中字体应该多大的问题. 做移动界面和做网页,平面最大的不同之处在于当你使用软件设计的时候,你 ...
- java图像处理002---JAVA图片压缩_图片缩放_图片按照比例缩放_图片指定长宽缩放_Java使用google开源工具Thumbnailator实现图片压缩
JAVA技术交流QQ群:170933152 前言 作为靠谱的java服务端程序员,图片这个事情一直是个头疼的事情. 现在很多网站上,都有上传图片这个功能,而图片对于现在的很多手机来说,拍摄出来的都是高 ...
- android button 图片不缩放,ImageButton如何让图片按比例缩放不被拉伸
了解 在安卓的界面XML中,ImageButton有这样一个属性android:scaleType,他干嘛的? ImageView的Scaletype决定了图片在View上显示时的样子,如进行何种比例 ...
最新文章
- Windows Server 2008正式版[微软官方下载地址+官方语言包]
- APP投资 历史 十万到 十亿元的项目
- Exchange Server 2013 DAG高可用部署(三)-服务器角色安装
- SpringMVC异常处理之分析和搭建环境
- AdPlayBanner:功能丰富、一键式使用的图片轮播插件
- Python3基本数据类型(一、数字类型)
- qt5不能添加新文件_VS2017配置Qt5.9教程
- kprobe原理解析(一)
- java实现聊天室(GUI界面+私聊+群聊)
- MapReduce项目案例3——温度统计
- 手把手教你软件著作权申请(全流程)(不花一分冤枉钱)
- PHP过滤昵称中emoji表情
- 韩国电影《醉画仙》,画仙的奋斗史。。。???
- 东原仁知服务招股书失效:主营业务严重依赖迪马集团,曾多次更名
- 如何建立有效的激励机制
- 复变函数与积分变换(五)学习笔记[孤立奇点,留数,零点与奇点,无穷远点的留数,留数计算的应用]
- 夜来风雨声,WebSocket 知多少!
- oracle实体视图日志,Oracle案例02——ORA-12034: SCOTT.USER_TABLE 上的实体化视图日志比上次刷新后的内容新...
- PDF的加密解密,解密后随便怎么玩
- python实践 爬取豆瓣各个标签的电影 爬虫