js教程

flexible.js可伸缩布局方案使用方法,自动px转rem及rem移动端适配

我的站长站 2023-09-18 人阅读

flexible.js介绍

flexible.js是一款可伸缩布局方案,可以使网站内容适应屏幕大小的插件,主要功能就是自动将px转rem及rem单位,适配移动端。

下载地址:https://GitHub.com/amfe/lib-flexible

使用方法

直接引用,自动识别屏幕大小,自动动态变化font-size大小。

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<script src="./node_modules/amfe-flexible/index.js"></script>

默认分为 10等份 ,即 @baseFont 大小为 750/10 = 75px;,例如要转化为1rem=80px;将index.js中的10改为24,因为1920/24=80。

flexible.js可伸缩布局方案使用方法,自动px转rem及rem移动端适配

相关推荐
  • px转rem
  • 在线px转rem单位工具,支持批量代码转换
    在线px转rem单位工具,支持批量代码转换

    工具介绍之前我的站长站分享过一款px单位转换rem单位的在线工具,但是那款工具只支持一个个的px转换rem,无法批量转换,很麻烦。所以我的站长站又找了一款,这款支持批量转换,可以直接把全部CSS代码复制...

    在线工具 23 7个月前
  • 利用Sass/Less快速将px单位转换rem/em/vw单位教程

    在响应式开发中,px单位明显不适用,最好使用rem/em/vw单位更合适,一个个的手动将PX单位修改换算成rem/em/vw单位又非常麻烦,这里我的站长站推荐利用Sass或Less自动化将全部px单位快速的转换成rem/em/vw单位方法。一、Sass方法因为Sass拥有@function函数的...

    css教程 25 7个月前
  • 网站制作px单位转换rem单位在线工具
    网站制作px单位转换rem单位在线工具

    在制作自适应手机端的时候,PC端的单位用的px单位而手机端我们常常会用到rem单位,靠人工来换算肯定是不行的,这里给大家推荐一个在线px单位转换rem单位工具。在线工具截图使用方法使用很简单,左边填写...

    在线工具 5289 5年前
最新更新
  • js截取字符串教程

    slice()方法接受两个参数,起始索引和结束索引(可选)。它返回从起始索引到结束索引(不包括结束索引)之间的子字符...

    js教程 3个月前
  • find findIndex indexOf索引选择器使用方法

    find使用方法find方法是ES6引入的一种数组方法,可以用来查找数组中符合条件的元素。语法是:array.find(callba...

    js教程 3个月前
  • js复制网页内容教程

    Async Clipboard API方法HTML5新增的方法,无需引入第三方插件,直接就可以复制内容。低版本的浏览器可能会不兼...

    js教程 3个月前
  • js获取字符长度函数分享

    js获取字符长度函数function objLen(str) { if (str == null) return 0; if (typeof str != "string") { ...

    js教程 3个月前
  • 网站LED跑马灯效果广告代码

    网站可以看到很多的论坛网站都会用到这种网站LED跑马灯效果,这种效果实现也很简单,分享给大家。LED跑马灯效果...

    js教程 4个月前