欢迎光临 - 我的站长站,本站所有资源仅供学习与参考,禁止用于商业用途或从事违法行为!

js教程

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

js教程 我的站长站 2023-09-18 共79人阅读

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单位的在线工具,但是那款工具只支持一个个的px转换rem,无法批量转换,很麻烦。所以我的站长站又找了一款,这款支持批量转换,可以直接把全部CSS代码复制...

    在线工具 63 1年前
  • 利用Sass/Less快速将px单位转换rem/em/vw单位教程

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

    css教程 56 1年前
  • 网站制作px单位转换rem单位在线工具
    网站制作px单位转换rem单位在线工具

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

    在线工具 5324 5年前
  • flexible.js可伸缩布局方案使用方法,自动px转rem及rem移动端适配

    flexible.js介绍flexible.js是一款可伸缩布局方案,可以使网站内容适应屏幕大小的插件,主要功能就是自动将px转rem及rem单位,适配移动端。下载地址:https://github.com/amfe/lib-flexible使用方法直接引用,自动识别屏幕大小,自动动态变化font-size大小。<me...

    js教程 79 1年前