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代码复制...

    在线工具 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年前
最新更新
  • js返回上一页、刷新页面代码大全

    返回上一页代码:<a href="javascript:history.go(-1)">返回上一页</a>onclick返回上一页代码:<a href="javasc...

    js教程 2天前
  • js语言!=与!==的区别

    != (不等于)!= 是松散的不等于运算符。它在比较两个值时,会先进行类型转换(type coercion),然后再比较值是否不...

    js教程 6天前
  • JS防止网站被扒的解决方法

    这个代码能够直接保护整个站,而不再是单个页面,直接把代码放到自己的网站上,如果是博客建议放到header.php头部...

    js教程 3周前
  • Hexo插件开发实战教程

    Hexo的插件嵌入有两种方式,一种是通过脚本(Scripts)的方式引入,一种是通过插件(Packages)的方式将自定义的插件内...

    js教程 1个月前
  • JavaScript定时删除指定元素方法

    JavaScript定时删除指定元素一般用到自动隐藏的效果功能上面,主要用到了JS的setTimeout语法。下面是一个定时...

    js教程 1个月前