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

转载 2015年11月19日 22:21:16


现在移动端 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 预处理工具可以使用默认值)

1
2
3
html {font-size62.5%;/*10 ÷ 16 × 100% = 62.5%*/}
body {font-size1.4rem;/*1.4 × 10px = 14px */}
h1 font-size2.4rem;/*2.4 × 10px = 24px*/}

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

 

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
(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


手机端页面自适应解决方案—rem布局

原文:手机端页面自适应解决方案—rem布局 相信很多刚开始写移动端页面的同学都要面对页面自适应的问题,当然解决方案很多,比如:百分比布局,弹性布局flex(什么是flex),也都能获得不错的...

vue2.0的变化,与vue1.0对比

1.在每个组建的模板中,不再支持片段代码。 2.关于组件的定义 3.生命周期 4.Vue2.0循环 5.自定义键盘的指令 6.过滤器 7.组件通信 8.可以使用一个"单一事件"管理组件通信...

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

现在移动端 web app 的自适应布局的方案有 5种。 零. Flexbox        使用css3 flexbox 进行布局,对于富媒体和复杂排版的支持非常强大,未普及兼容性非常差...

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

关于rem,主要参考文档 1。腾讯ISUX (http://isux.tencent.com/web-app-rem.html) 2。http://www.w3cplus.com/css3/def...

移动端Web App自适应布局探索与总结

1、困扰多时的问题 在这之前做Web App开发的的时候,在自适应方面一般都是宽度通过百分比,高度以iPhone6跟iPhone5之间的一个平衡值写死,我们的设计稿都是iPhone5的640...

web app自适应屏幕方案探讨

标签:自适应viewportdpi 因为web app跨平台的特性,决定着自适应方案在整个项目的重要性。 特别对于Android众多分辨率和屏幕尺寸的机器群,找到合适通用的解决方案显得...

手机端页面自适应解决方案—rem布局

该方案目前已过时,这里是更加完美的替代方案——rem布局(进阶版) 相信很多刚开始写移动端页面的同学都要面对页面自适应的问题,当然解决方案很多,比如:百分比布局,弹性布局flex(什么是...

手机端页面自适应解决方案—rem布局进阶版(附源码示例)

该方案使用相当简单,把这段 原生JS 放到 HTML 的 head 标签中即可(注:不要手动设置viewport,该方案自动帮你设置) script>!function(e){function ...

手机端页面自适应解决方案—rem布局进阶版(附源码示例)

但随着时间的推移,该方案已然过时,故为大家介绍一个目前我极力推荐使用的,更加完美的方案——rem布局(进阶版) 地址:http://www.jianshu.com/p/985d26b4019...

手机端页面自适应解决方案—rem布局进阶版(附源码示例)

一年前笔者写了一篇 《手机端页面自适应解决方案—rem布局》,意外受到很多朋友的关注和喜欢。但随着时间的推移,该方案已然过时,故为大家介绍一个目前我极力推荐使用的,更加完美的方案——rem布局(进...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:web app 自适应方案总结 关键字 弹性布局之rem
举报原因:
原因补充:

(最多只允许输入30个字)