flexible.js 弹性布局分析与实战

作为一名小白，不思进取，还荒废了好长一段时间，一直没有总结学习，内心很愧疚...从这周开始，坚持每周积累自己的笔记，努力学习，成为一名合格的攻城狮！

flexible.js 分析

flexible.js下载

作者博文

首先，我先引用flexible.js作者对这个脚本的解释：通过js事实的检测屏幕的大小并改变html标签的字体大小，再结合rem的特性来完成页面的自适应。

代码分析：

/* 最基本的封装类库的方法：函数立即调用，防止封装方法污染全局变量 */
(function flexible(window, document) {// 取html为根的整个dom树var docEl = document.documentElement// 设备像素比devicePixelRatio，没法获取就为 1 var dpr = window.devicePixelRatio || 1console.log(docEl); // 获取 root 节点console.log(dpr);  // 2
  console.log(window); // Windowconsole.log(window.body); // undefined
  console.log(document); // 获取 body 节点console.log(document.body); // null 此时dom没有完全加载，所以为空// JS代码写在head中，一加载就执行，此时后面的body还没有加载出来，故为null// adjust body font sizefunction setBodyFontSize() {// document.body 为 nullif (document.body) {// true时，设置字体大小document.body.style.fontSize = (12 * dpr) + 'px'}else {// 监听 DOM 加载，调用 setBodyFontSize 设置字体大小document.addEventListener('DOMContentLoaded', setBodyFontSize)}}setBodyFontSize();// set 1rem = viewWidth / 10function setRemUnit() {// 可视区域的宽度 / 10var rem = docEl.clientWidth / 10// 设置字体大小docEl.style.fontSize = rem + 'px'}setRemUnit()// reset rem unit on page resize// 监听盒子的size变化事件,变化了就调用setRemUnit函数，设置html根字体大小window.addEventListener('resize', setRemUnit)// pageshow 页面显示时触发window.addEventListener('pageshow', function (e) {console.log(e.persisted); // falseif (e.persisted) {setRemUnit()}})/* retina屏的浏览器可能不认识 0.5px 的边框，将会把它解释成0px，没有边框。包括 iOS 7 和 之前版本，OS X Mavericks 及以前版本，还有 Android 设备。解决方案：解决方案是通过JS判断是否支持0.5px的边框，给<html>元素添加上hairlines的类名，就可以认识0.5px的边框了*/// detect 0.5px supports// 如果 设备像素比devicePixelRatio >= 2if (dpr >= 2) {// 创建 新的 bodyvar fakeBody = document.createElement('body')// 测试 divvar testElement = document.createElement('div')// 测试div加 0.5px 的透明边框testElement.style.border = '.5px solid transparent'// 将这个测试div加到 新创建的 body 中
    fakeBody.appendChild(testElement)// 将新创建的 body 添加到 HTML 节点中
    docEl.appendChild(fakeBody)// 如果测试div高度为1 // offsetHeight高度包含该元素的垂直内边距和边框，且是一个整数。/* 因为Retine屏的分辨率始终是普通屏幕的2倍，1px的边框在devicePixelRatio=2的retina屏下会显示成2px。 */    if (testElement.offsetHeight === 1) {docEl.classList.add('hairlines')// “retina hairlines”（retina 极细的线）
    }// 移除 body
    docEl.removeChild(fakeBody)}
}(window, document))

rem：rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。

实战

index.html

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>手淘布局</title><!-- 重置样式 --><link rel="stylesheet" href="./css/reset.css"><!-- 自己样式 --><link rel="stylesheet" href="./css/index.css"><!-- 插件 --><script src="./assets/flexible/index.min.js"></script>
</head><body><div class="container"><!-- 标题 --><div class="top"><img class="back" src="./images/fanhui.png"><div class="search"><img class="img_search" src="./images/fangdajing.png"><input class="inp" type="text" placeholder="请输入內容" value=""><img class="img_clear" src="./images/chahao.png"></div></div><!-- 抽奖 --><ul><!-- 已中奖人数 --><li><section class="sec"><div class="t_bank">已中奖人数</div><div class="t_bank_num">3個</div><img src="./images/jiantou2.png"></section><!-- 细节 --><ul class="details"></ul></li><!-- 未中奖人数 --><li><section class="sec"><div class="t_bank">未中奖人数</div><div class="t_bank_num">3個</div><img src="./images/jiantou2.png"></section><!-- 细节 --><ul class="details"></ul></li></ul></div>
</body></html>

通过手淘插件，实现了移动端布局，不需要直接设置:root的font-size为px，因为在flexible.js中动态监听font-size的大小

其他font-size设置为rem；padding、margin、left、top 一般设置为%；

注意，一般不要给body设置height，在移动端会自动适应。

转载于:https://www.cnblogs.com/houfee/p/9668178.html

移动端之flexible.js相关推荐

移动端适配--flexible.js
引言: H5适配一直是一个比较普遍的问题,很多文章都会讲,最近开发了一个H5的项目使用了一下淘宝的 flexible.js,写一篇文章自己总结一下. 一.背景介绍: Flexible.js是淘宝公开的 ...
移动端适配+flexible.js+rem适配
移动端适配前沿: 移动端web页面的开发,由于手机屏幕尺寸.分辨率不同,或者需要考虑横竖屏问题,为了使得web页面在不同移动设备上具有相适应的展示效果,需要在开发过程中使用合理的适配方案来解决这个问 ...
移动端适配-flexible.js使用(解决对外部引入css，px2rem能不能转换rem问题)
移动端flexible.js 适用于最新版vue-cli,配置手淘的lib-flexible.js和rem实现移动端页面自适应 1.安装lib-flexible.js npm install lib- ...
移动端适配flexible.js
1.什么是flexible.js 是一个终端设备适配的解决方案. 是一个用来适配移动端的javascript框架.根据宽度的不同设置不同的字体大小,样式间距都使用rem作为单位,不同屏幕大小适配不同的 ...
vue 移动端适配flexible.js使用方法
原理: flexible.js 适配方案采用rem布局,根据屏幕分辨率大小不同,调整根元素html的font-size,从而达到每个元素宽高自动变化,适配不同屏幕操作步骤: 1.安装lib-flex ...
移动端适配方案 flexible.js
前言移动端适配一直以来都是前端开发中不可或缺的重要组成部分,如果没有了它,那么你做出来的页面极有可能会出现各种意外(写出来的页面与设计稿之间的差别).所有我们得找到一种相对来说让人比较满意的解决方案 ...
移动端网页使用flexible.js加入百度联盟广告样式不一致问题解决
flexible.js是淘宝推出的一款移动端手机自适应的库,源码内容很简洁,当网页使用了该库之后,页面会在head中加入对应的页面响应式的meta标签. 当使用flexible.js的时候,引入百度联 ...
移动端 flexible.js 布局详解
原本想直接引入原文链接,但是又担心作者哪天想不开注销账号,这么好的一篇文章看不到了,还是转载一下吧(/ω＼). 另外推荐一篇好文:移动端rem自适应实操讲解本文讲的通过 flexible.js 实现 ...
flexible.js 移动端自适应方案
一,flexible.js 的使用方式: github地址:https://github.com/amfe/lib-flexible 官方文档地址:https://github.com/amfe/ar ...

移动端之flexible.js

flexible.js 弹性布局分析与实战

flexible.js 分析

实战

移动端之flexible.js相关推荐

最新文章

热门文章