根据阿里手淘团队发布的可伸缩布局方案amfe-flexible，git地址：https://github.com/amfe/lib-flexible。

使用方法：

lib-flexible库的使用方法非常的简单，只需要在Web页面的<head></head>中添加对应的flexible_css.js,flexible.js文件

第一种方法是将文件下载到你的项目中，然后通过相对路径添加:

<script src="build/flexible_css.debug.js"></script>

<script src="build/flexible.debug.js"></script>

或者直接加载阿里CDN的文件：

<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>

容器或组件宽高主要使用单位 rem ，字体大小则不变仍然使用单位 px。

示例地址：https://github.com/amfe/article/issues/17

还有一个约束是，如果针对iphone5 640*1136，因此我们限制最外层包裹的div最大宽度为 640px，表示10rem;

把视觉稿中的px转换成rem的换算方法：要转换的像素值 / 640px * 10

移动端不同分辨率适配--使用flexible的更多相关文章

  1. 移动端适配方案 flexible.js

    前言 移动端适配一直以来都是前端开发中不可或缺的重要组成部分,如果没有了它,那么你做出来的页面极有可能会出现各种意外(写出来的页面与设计稿之间的差别).所有我们得找到一种相对来说让人比较满意的解决方案 ...

  2. 移动端页面开发适配 rem布局原理

    主题 HTML移动端页面开发适配 rem布局原理 什么是适配,为什么要适配 我们拿到的设计图一般是以640,750,1080分辨率为基准设计的,而现在的手机终端各式各样,分辨率不同,逻辑像素不同 ,适 ...

  3. 教你如何用 lib-flexible 实现移动端H5页面适配

    前话 好久没写教程了(可能会误导新手的菜鸟教程(￣▽￣)"). 这是我的github,欢迎前端大大们和我一起学习交流 https://github.com/pwcong 最近入职公司做前端实 ...

  4. Viewport解决分辨率适配问题

    Viewport :   字面意思为视图窗口,在移动 web 开发中使用.表示将设备浏览器宽度虚拟成一个特定的值(或计算得出),这样利于移动 web 站点跨设备显示效果基本一致.   基本写法: &l ...

  5. 基于REM的移动端响应式适配方案

    视口 在前一段时间,我曾经写过一篇关于viewport的文章.最近由于在接触移动端开发,对viewport有了新的理解.于是,打算重新写一篇文章,介绍移动端视口的相关概念. 关于这篇文章说到的所有知识 ...

  6. cocostudio做出来的界面如何进行分辨率适配，兼论cocos2dx3的多分辨率适配机制，以及retina适配机制

    cocos有很多代码实际上都不再使用了,看代码时反而误导了程序员. 比如一个简单的分辨率适配,我查到了setContentSize,然后调用setContentSize,毫无用处啊!于是乎,我到处查资 ...

  7. Android分辨率适配心得

    关于Android分辨率适配,这个是Android开发很头疼的一个问题,也需要花费相当一部分开发时间处理的一个问题,往往一个界面怎么适配就得想半天,特别是新手,也经常有人问我是怎么适配分辨率的,我也不 ...

  8. Unity 利用NGUI做屏幕分辨率适配+学习UIDraggablePanel的使用

    原地址:http://blog.sina.com.cn/s/blog_697b1b8c0101g2r4.html 大家使用unity,一定有看中其跨平台的强大功能,因此也难免会遇到不同屏幕分辨率适配的 ...

  9. xcode 开发ios兼容性问题的上下黑边 和 coco2d-x 游戏分辨率适配 ResolutionPolicy::FIXED_WIDTH 都会引起上下黑边问题！！！

    1:Xcode6在iPhone5+iOS7模拟器上编译,上下有黑边问题 问题描述: Xcode6环境下,对iPhone5或iPhone5s模拟器,在iOS7或iOS7.1下运行,屏幕上下有黑边.在iO ...

随机推荐

  1. i.mx6 Android5.1.1 初始化流程之init.rc解析（未完成）

    接上一篇:i.mx6 Android5.1.1 初始化流程之init进程 参考资料:http://blog.csdn.net/mr_raptor/article/category/799879 这个博 ...

  2. CentOS6.X 系统安装后的基础优化

    特别说明:克隆之后的网卡修改 1 编辑eth0的配置文件:vi /etc/sysconfig/network-scripts/ifcfg-eth0, 删除HWADDR地址那一行及UUID的行如下: H ...

  3. NPOI创建Excel批注

    var hssfWorkbook = new HSSFWorkbook(); var sheet = hssfWorkbook.CreateSheet(); var patr = sheet.Crea ...

  4. 云主机安装Tomcat上传自己的网站

    前几天在DigitalOcean上买一个云服务器(1g内存,1核,25gssd,1tb流量,一个月5$,按天收费),用github的students developer package里面的优惠码拿到 ...

  5. ASP.NET 中HttpRuntime.Cache缓存数据

    最近在开始一个微信开发,发现微信的Access_Token获取每天次数是有限的,然后想到缓存,正好看到微信教程里面推荐HttpRuntime.Cache缓存就顺便看了下. 写了(Copy)了一个辅助类 ...

  6. Winform截图小程序

    今天闲时做的一个Demo,做得并不好,只是实现了最基本的截图功能 主要的思路就是 先打开一个主窗体,点击"截图按钮" 会出现一个半透明的小窗体(可以拉伸放大缩小) 然后利用Grap ...

  7. yum卸载

    完全卸载依赖 -- 正常安装 yum install sl -- 列出操作 yum history list sl -- 根据显示install操作的id进行删除 yum history undo { ...

  8. 洛谷P4716 【模板】最小树形图(朱刘算法)

    题意 题目链接 Sol 朱刘算法?感觉又是一种神仙贪心算法 大概就是每次贪心的用每个点边权最小的入边更新答案,如果不行的话就缩起来找其他的边 不详细说了,丢链接走人.. #include<bit ...

  9. 使用SVG绘制流程图

    本篇主要记录流程图的实现过程中的难点和核心技术点,先上效果图: 节点可以任意拖拽,曲线跟随变化 正在连接的线 1.节点实现 流程图是基于SVG绘制的,节点主要利用 g 和 foreignObject的 ...

  10. 通过vertical-align属性实现“竖向居中”显示

    自学编程大概有大半年的时间了,从15年7月开始学习使用人数最多的JAVA,到后来喜欢上了前端,但由于之间在建筑设计院的工作加班颇为频繁,每天刨去工作,基本没有多少自己个人的时间,只能每天6,7点起床, ...