移动端适配方案 flexible.js

最新推荐文章于 2024-07-19 10:58:10 发布

江湖行骗老中医lm

最新推荐文章于 2024-07-19 10:58:10 发布

阅读量958

点赞数 1

分类专栏： JavaScript

本文链接：https://blog.csdn.net/qq_20757489/article/details/102380866

版权

本文详细介绍了移动端适配方案flexible.js的工作原理和使用方法，包括如何进行px到rem的转换，以及使用cssrem插件自动化转换。通过flexible.js，可以在不同设备上实现页面的完美适配。

摘要由CSDN通过智能技术生成

前言

移动端适配一直以来都是前端开发中不可或缺的重要组成部分，如果没有了它，那么你做出来的页面极有可能会出现各种意外（写出来的页面与设计稿之间的差别）。所有我们得找到一种相对来说让人比较满意的解决方案，尽可能地让这种“意外”减到最少。没错今天的主角就是它“flexible.js” 。

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

flexible.js 之旅

flexible.js 的作用就是让你在不同的终端设备之间如鱼得水，如入无人之境。说得那么浮，一点感觉都没有。不急，我们慢慢来，一步一步走进 flexible.js 神秘的世界。

flexible.js 有什么用

正如文章标题所写的那样，它就是一个终端设备适配的解决方案。也就是说它可以让你在不同的终端设备中实现页面适配。

flexible.js 怎么用

flexible.js 的用法非常的简单，在页面的<head></head>中引入 flexible_css.js,flexible.js文件：

第一种方法是将文件下载到你的项目中，然后通过相对路径添加:https://github.com/amfe/lib-flexible

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

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

// 加载阿里CDN的文件
<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>

除了上面这种方式外，你还可以把这两个文件下载到自己的项目中，然后再引入，效果是一样的。

上面两个文件其实就是一个 .css 文件和一个 .js 文件：

.css 文件内容

@charset "utf-8";
html{color:#000;background:#fff;overflow-y:scroll;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}
html *{outline:0;-webkit-text-size-adjust:none;-webkit-tap-highlight-color:rgba(0,0,0,0)}
html,body{font-family:sans-serif}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{margin:0;padding:0}
input,select,textarea{font-size:100%}
table{border-collapse:collapse;border-spacing:0}
fieldset,img{border:0}
abbr,acronym{border:0;font-variant:normal}
del{text-decoration:line-through}address,capt