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


相关文章推荐

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

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

web app自适应屏幕方案探讨

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

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

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

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

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

基于rem布局 - 移动端自适应解决方案

为了让移动端网页在不同尺寸的手机下都可以优雅地展示,可以用媒体查询、百分比布局、弹性布局flex、rem布局等。而rem布局在移动端开发中无疑是一种不错的自适应解决方案,核心就是 html根节点的fo...

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

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

ios web App 使正文中的图片、视频根据屏幕尺寸自适应

设计一个专门为android或iphone优化的网页通常会将页面与手机浏览器设置成1:1大小(禁止手册浏览器缩放). 这时候每个手机的屏幕尺寸都不一致(包括横屏竖屏),例如当你浏览一篇文章时,正...

【web】强大的屏幕适配布局rem响应式 实现一套web代码多端自适应适配

强大的屏幕适配布局rem响应式 实现一套代码多端适配 实现强大的屏幕适配布局 流式的布局、固定的宽度,还有响应式来做,但是这些方案都不是最佳的解决方法。->->rem rem是什么? ...

web app变革之rem --重要

web app变革之rem     rem这是个低调的css单位,近一两年开始崭露头角,有许多同学对rem的评价不一,有的在尝试使用,...

web app变革之rem

rem这是个低调的css单位,近一两年开始崭露头角,有许多同学对rem的评价不一,有的在尝试使用,有的在使用过程中遇到坑就弃用了。但是我对rem综合评价是用来做web app它绝对是最合适的人选之一。...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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