移动端页面rem
写移动端页面最麻烦的是什么,不同分辨率的适配!
一、什么是rem
具体来说,有的屏幕320px宽,有的屏幕640px宽,有的更宽,如果你写固定px,那么要么小的放不下,要么大的有大片空白。
比如320px的10%是32px,640px的10%是64px,
如果10个10%宽度的元素放在一起,那肯定就是100%,即挤满屏幕(宽度),不会超出,也不会留白。
简单理解:
rem 就是指屏幕宽度的百分之x;
或者说,n个rem = 用户可视区域100%宽度
二、rem怎么用?
rem和em很容易混淆,其实两个都是css的单位,并且也都是相对单位,现有的em,css3才引入的rem,在介绍rem之前,我们先来了解下
emem作为font-size的单位时,其代表父元素的字体大小,em作为其他属性单位时,代表自身字体大小——MDN
em做弹性布局的缺点还在于牵一发而动全身,一旦某个节点的字体大小发生变化,那么其后代元素都得重新计算
rem作用于非根元素时,相对于根元素字体大小;rem作用于根元素字体大小时,相对于其出初始字体大小——MDN
rem取值分为两种情况,设置在根元素时和非根元素时,举个例子
/* 作用于根元素,相对于原始大小(16px),所以html的font-size为32px*/html {font-size: 2rem}/* 作用于非根元素,相对于根元素字体大小,所以为64px */p {font-size: 2rem}
三、Rem布局原理
如果子元素设置rem单位的属性,通过更改html元素的字体大小,就可以让子元素实际大小发生变化
html {font-size: 16px}p {width: 2rem} /* 32px*/html {font-size: 32px}p {width: 2rem} /*64px*/
如何让html字体大小一直等于屏幕宽度的百分之一呢? 可以通过js来设置,一般需要在页面dom ready、resize和屏幕旋转中设置
document.documentElement.style.fontSize = document.documentElement.clientWidth / 100 + 'px';
那么如何把UE图中的获取的像素单位的值,转换为已rem为单位的值呢?公式是元素宽度 / UE图宽度 * 100,让我们举个例子,假设UE图尺寸是640px,UE图中的一个元素宽度是100px,根据公式100/640*100 = 15.625
rem是弹性布局的一种实现方式,弹性布局可以算作响应式布局的一种,但响应式布局不是弹性布局,弹性布局强调等比缩放,100%还原;响应式布局强调不同屏幕要有不同的显示,比如媒体查询
一些偏向app类的,图标类的,图片类的,比如淘宝,活动页面,比较适合使用rem,因为调大字体时并不能调大图标的大小
四、Rem布局方案
rem+js方案,同时还要解决noscript问题,解决字体问题,解决屏幕过宽问题
html代码如下
[html] view plain copy
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
- <title>rem布局</title>
- </head>
- <body>
- <noscript>开启JavaScript,获得更好的体验</noscript>
- <div class="p1">
- 宽度为屏幕宽度的50%,字体大小1.2em
- <div class="s1">
- 字体大小1.2.em
- </div>
- </div>
- <div class="p2">
- 宽度为屏幕宽度的40%,字体大小默认
- <div class="s2">
- 字体大小1.2em
- </div>
- </div>
- </body>
- </html>
css代码如下
[html] view plain copy
- html {
- font-size: 32px; /* 320/10 */
- }
- body {
- font-size: 16px; /* 修正字体大小 */
- /* 防止页面过宽 */
- margin: auto;
- padding: 0;
- width: 10rem;
- /* 防止页面过宽 */
- outline: 1px dashed green;
- }
- /* js被禁止的回退方案 */
- @media screen and (min-width: 320px) {
- html {font-size: 32px}
- body {font-size: 16px;}
- }
- @media screen and (min-width: 481px) and (max-width:640px) {
- html {font-size: 48px}
- body {font-size: 18px;}
- }
- @media screen and (min-width: 641px) {
- html {font-size: 64px}
- body {font-size: 20px;}
- }
- noscript {
- display: block;
- border: 1px solid #d6e9c6;
- padding: 3px 5px;
- background: #dff0d8;
- color: #3c763d;
- }
- /* js被禁止的回退方案 */
- .p1, .p2 {
- border: 1px solid red;
- margin: 10px 0;
- }
- .p1 {
- width: 5rem;
- height: 5rem;
- font-size: 1.2em; /* 字体使用em */
- }
- .s1 {
- font-size: 1.2em; /* 字体使用em */
- }
- .p2 {
- width: 4rem;
- height: 4rem;
- }
- .s2 {
- font-size: 1.2em /* 字体使用em */
- }
js代码如下
[html] view plain copy
- var documentElement = document.documentElement;
- function callback() {
- var clientWidth = documentElement.clientWidth;
- // 屏幕宽度大于780,不在放大
- clientWidth = clientWidth < 780 ? clientWidth : 780;
- documentElement.style.fontSize = clientWidth / 10 + 'px';
- }
- document.addEventListener('DOMContentLoaded', callback);
- window.addEventListener('orientationchange' in window ? 'orientationchange' : 'resize', callback);
参考博客http://blog.csdn.net/qq_36263601/article/details/78366710