下载flexible: https://github.com/amfe/lib-flexible

//未压缩版
(function flexible (window, document) {
var docEl = document.documentElement
var dpr = window.devicePixelRatio || 1 // adjust body font size
function setBodyFontSize () {
if (document.body) {
document.body.style.fontSize = (12 * dpr) + 'px'
}
else {
document.addEventListener('DOMContentLoaded', setBodyFontSize)
}
}
setBodyFontSize(); // set 1rem = viewWidth / 10
function setRemUnit () {
var rem = docEl.clientWidth / 10
docEl.style.fontSize = rem + 'px'
} setRemUnit() // reset rem unit on page resize
window.addEventListener('resize', setRemUnit)
window.addEventListener('pageshow', function (e) {
if (e.persisted) {
setRemUnit()
}
}) // detect 0.5px supports
if (dpr >= 2) {
var fakeBody = document.createElement('body')
var testElement = document.createElement('div')
testElement.style.border = '.5px solid transparent'
fakeBody.appendChild(testElement)
docEl.appendChild(fakeBody)
if (testElement.offsetHeight === 1) {
docEl.classList.add('hairlines')
}
docEl.removeChild(fakeBody)
}
}(window, document))
//压缩版
!function(e,t){function n(){t.body?t.body.style.fontSize=12*o+"px":t.addEventListener("DOMContentLoaded",n)}function d(){var e=i.clientWidth/10;i.style.fontSize=e+"px"}var i=t.documentElement,o=e.devicePixelRatio||1;if(n(),d(),e.addEventListener("resize",d),e.addEventListener("pageshow",function(e){e.persisted&&d()}),o>=2){var a=t.createElement("body"),s=t.createElement("div");s.style.border=".5px solid transparent",a.appendChild(s),i.appendChild(a),1===s.offsetHeight&&i.classList.add("hairlines"),i.removeChild(a)}}(window,document);

【使用】

1、在head标签中引入上述的代码

2、去hubilder配置px转换rem相关设置,可参考 hbuiler设置自动px转rem ,这里我配置的比例是75

3、编写代码,由于设计给的图是375尺寸的,因此在写的过程中需要注意的是: 将设计图上量到的尺寸 *2 再敲到代码中去

iphone6下:

iphone5下:

iphone6plus:

参考文章:

  大漠老师的文章:使用Flexible实现手淘H5页面的终端适配

  rem自适应布局:http://caibaojian.com/flexible-js.html

使用手淘flexible.js适配移动端布局的更多相关文章

  1. 手淘flexible.js框架使用和源代码讲解

    手淘框架是一个用来适配移动端的js框架,下面我们来讲解一下如何使用手淘的这套框架. 其实手淘框架的核心原理就是根据不同的width给网页中html跟节点设置不同的font-size,然后所有的距离大小 ...

  2. 通过media媒体查询设置ie7/8样式、使用media判断各机型、手淘flexible.js

    @media all and (min-width:1280px){ /* 所有设备宽度大于1280干嘛干嘛嘞... */ body{ background:#f00; } } @media (min ...

  3. 解决手淘lib-flexible.js在移动端首次加载页面页面先放大后正常问题

    例如这样 然后这样 出现这样的原因一般是   静态的,即html里有一些静态的(即非js动态添加的) 如果在页面加载完成后,页面是用js动态添加的,这个问题就不太明显, doc.addEventLis ...

  4. 更新 手淘 flexible 布局 rem 单位适配问题

    详见链接 https://github.com/amfe/lib-flexible

  5. 使用lib-flexible.js适配移动端UI设计750px设计图

    最近在和设计沟通关于设计图尺寸大小和前端实际页面尺寸大小不一致的情况,我们的UI设计是使用的iPone6的,(iphone6:    375px*667px  实际像素:750px*1334px)如果 ...

  6. 手淘适配-flexible

    目标 拿一个双11的Mobile页面来做案例,比如你实现一个类似下图的一个H5页面: 目标很清晰,就是做一个这样的H5页面. 痛点 虽然H5的页面与PC的Web页面相比简单了不少,但让我们头痛的事情是 ...

  7. vue.js移动端配置flexible.js

    前言 最近在用vue做移动端项目,网上找了一些移动端适配的方案,个人觉得手淘团队flexible.js还是比较容易上手,在这里做下总结. 主体 flexible.js适配方案采用rem布局,根据屏幕分 ...

  8. Flexible实现H5移动端适配小demo

    前言 看了宇哥关于移动端适配的分享后,加上目前公司项目也需要做移动端适配,今天就抽空搞了搞.目前业界还是比较推崇手淘使用"rem+viewport"的解决方案,今天自己模仿手淘fl ...

  9. vue 的rem 配置和flexible.js的应用

    1.环境的配置: C:\Windows\System32\drivers\etc 2.多行注释: 光标放在函数中间,连按两次:“Ctrl+Alt+D”,就会出现以下的内容 3.总结使用过程:vue移动 ...

随机推荐

  1. vmware 安装不成功导致的问题解决以及右键菜单添加打开终端命令

    转自http://blog.csdn.net/puweilan/article/details/8609952 在VMware安装Ubuntu完成后,一直停留在VMware Easy Install, ...

  2. html页面的局部刷新

    有时候我们在做一个动态/静态网页,网页中的某部分需要从服务器获取值但是不能把整个页面都提交到服务器,也就是要对页面做局部刷新,也就是对整个网页无刷新更新值.在这种情况下就需要用JS和XMLHttpRe ...

  3. MVC 知识点随笔

    1.https://msdn.microsoft.com/zh-cn/gg981918  <text></text>  等同于 @:

  4. 认识Session

    Session在不同环境下的不同含义 session,中文经常翻译为会话,其本来的含义是指有始有终的一系列动作/消息,比如打电话是从拿起电话拨号到挂断电话这中间的一系列过程可以称之为一个session ...

  5. 实践作业3:白盒测试----小组分工讨论DAY2

    白盒测试需要通过检查软件内部的逻辑结构,对软件中的逻辑路径进行覆盖测试;在程序不同地方设立检查点,检查程序的状态,以确定实际运行状态与预期状态是否一致.我们小组在下课时候,在东九教学楼教师休息室进行了 ...

  6. jquery表单数据验证扩展方法

    /** 表单数据验证 **/ $.fn.Validform = function () { var Validatemsg = ""; var Validateflag = tru ...

  7. (转)XSS危害——session劫持

    原文地址:http://www.cnblogs.com/dolphinX/p/3403027.html 在跨站脚本攻击XSS中简单介绍了XSS的原理及一个利用XSS盗取存在cookie中用户名和密码的 ...

  8. (转)ASP.NET基础之HttpHandler学习

    原文地址:http://www.cnblogs.com/wujy/archive/2013/08/18/3266009.html 经过前两篇[ASP.NET基础之HttpModule学习]和[ASP. ...

  9. C# Socket通信改进记录

    1. Socket 使用原始Socket,Send和Recv方法 进行发送和消息获取.(另起后台线程 不停获取和发送) public void RecvMsg() { //receive messag ...

  10. 笔记本小键盘提示 C#

    穷人家的孩子,买了个笔记本愣是没有小键盘提示灯. 牛的是人家给了一个大写提示灯. 更牛的是他妈给了音量关闭打开的提示灯,还他妈是橙色的!!!!!! 没办法 弄了小程序 来判断是否打开小键盘了. 本来是 ...