web app 自适应方案总结弹性布局之rem

关于rem，主要参考文档

1。腾讯ISUX (http://isux.tencent.com/web-app-rem.html)

2。http://www.w3cplus.com/css3/define-font-size-with-css3-rem

现在移动端 web app 的自适应布局的方案有 5种。

零. Flexbox

使用css3 flexbox 进行布局，对于富媒体和复杂排版的支持非常强大，未普及兼容性非常差，几乎没有在任何项目中得到应用。

一. 弹性布局

使用 em 或 rem 单位进行相对布局，相对 % 百分比更加灵活，同时可以支持浏览器的字体大小调整和缩放等的正常显示。因为em是相对父级元素的原因没有得到推广。

二. 流式布局（Fluid）

使用 % 百分比定义宽度，高度大都是用px来固定住，可以根据可视区域 (viewport) 和父元素的实时尺寸进行调整，尽可能的适应各种分辨率。往往配合 max-width 等属性控制尺寸流动范围以免过大或者过小影响阅读。代表作栅栏系统（网格系统）

三. 响应式布局（Responsive）

使用 @media 媒体查询给不同尺寸和介质的设备切换不同的样。在优秀的响应范围设计下可以给适配范围内的设备最好的体验，在同一个设备下实际还是固定的布局。

四. 自适应布局（ Adaptive）

通常使用 @media 媒体查询和网格系统 (Grid System) 配合相对布局单位进行布局，实际上就是综合响应式、流动等上述技术通过 CSS 给单一网页不同设备返回不同样式的技术统称。自适应几乎已经成为优秀页面布局的标准。

这篇文章主要讲的是rem的使用。

css3 中引入了新的长度单位，rem。官方定义 font size of the root element

rem:rem和em单位一样，都是一个相对单位。不同的是em是相对于元素的父元素的font-size进行计算；rem是相对于根元素html的font-size进行计算。这样一来rem就绕开了复杂的层级关系，实现了类似于em单位的功能。

兼容性：IE9+，Firefox、Chrome、Safari、Opera 的主流版本都支持。（IE6-8不支持不过考虑是移动端web app ）

1.针对设计稿计算rem

所有浏览器都一致默认保持着 16px 的默认字号 1em:16px ，但是 1:16 的比例不方便计算。在这里文档元素设置 font-size: 62.5%，可以很方便的利用十进制进行计算了，（CSS 预处理工具可以使用默认值）

html {font-size: 62.5%;/*10 ÷ 16 × 100% = 62.5%*/}

body {font-size: 1.4rem;/*1.4 × 10px = 14px */}

h1 { font-size: 2.4rem;/*2.4 × 10px = 24px*/}

所以如果我有一个宽度为640的设计稿，通过上面的方法算出对应元素rem的大小　。（附注：实际项目不可以设置成 font-size: 62.5%,因为chrome不支持小于12px的字体，计算小于12px的时候，会默认取12px去计算，导致chrome的rem计算不准确）

2。针对不同分辨率计算font-size

监听浏览器更改 html的font-size

(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);

配合css预处理工具计算 rem 值。 Sass、LESS 、Stylus

转载于:https://www.cnblogs.com/tnnyang/p/4441541.html

web app 自适应方案总结弹性布局之rem相关推荐

弹性布局与rem布局
弹性布局给父盒子加display:flex;可以是父盒子中的子盒子弹性布局 .box{ display:flex;//默认行排列 //排列方向 flex-direction:row|row-re ...
【手写一个页面自适应】媒体查询布局视口rem/em
手写的一个页面自适应字体只需要引入这个JavaScript文件就行.文末有更好的自适应方法. // 手动写页面自适应字体 window.onload = function () {function ...
移动web开发之rem布局（rem基础、媒体查询、 less 基础、rem适配方案）
移动web开发之rem布局一.rem基础 rem单位 rem (root em)是一个相对单位,类似于em,em是父元素字体大小. 不同的是rem的基准是相对于html元素的字体大小. 比如,根元素 ...
固定布局(fixed layout)、流体布局(fluid layout)、弹性布局(elastic layout)、响应布局(responsive layout)理解和技巧归纳
关于web页面布局,首先简单了解一下固定布局(fixed layout).流体布局(fluid layout).弹性布局(elastic layout).响应布局(responsive layout) ...
移动web现状、viewport视口、二倍图、移动web开发主流方案、布局技术选型(流式布局、flex弹性布局、less+rem+媒体查询布局、混合布局、媒体查询、bootstrap)
移动端web现状: 移动端常见浏览器:UC浏览器,QQ浏览器,Opera浏览器,百度手机浏览器,360安全浏览器,谷歌浏览器,搜狗手机浏览器,猎豹浏览器及杂牌浏览器.移动端常见的浏览器都是基于webk ...
淘宝弹性布局方案lib-flexible实践
2个月前,写过一篇文章<从网易与淘宝的font-size思考前端设计稿与工作流>总结过一些移动web中有关手机适配的一些思路,当时也是因为工作的关系分析了下网易跟淘宝的移动页面,最后才有那 ...
淘宝弹性布局方案lib-flexible研究
1. lib-flexible不能与响应式布局兼容先说说响应式布局的一些基本认识: 响应式布局的表现是:网页通过css媒介查询判断可视区域的宽度,在不同的范围应用不同的样式,以便在不同尺寸的设备上呈 ...
自适应网页(响应式布局)+弹性布局
1.自适应网页 1.声明viewport元标签 <meta name="viewport" content="width=device-width,initial- ...
flexible.js 淘宝弹性布局方案
本文的内容就是介绍淘宝弹性布局方案lib-flexible实践, 原理是通过js事实的检测屏幕的大小并改变html标签的字体大小,再结合rem的特性来完成页面的自适应.下面是flexible作者的说明 ...

web app 自适应方案总结弹性布局之rem

web app 自适应方案总结弹性布局之rem相关推荐

最新文章

热门文章

web app 自适应方案总结 弹性布局之rem

web app 自适应方案总结 弹性布局之rem相关推荐

最新文章

热门文章

web app 自适应方案总结弹性布局之rem

web app 自适应方案总结弹性布局之rem相关推荐