flexible.js实现rem自适应布局

最新推荐文章于 2024-04-29 11:17:53 发布
最新推荐文章于 2024-04-29 11:17:53 发布
阅读量1k 收藏 9
点赞数
分类专栏： 样式布局 文章标签： flexible.js rem自适应布局
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_59850169/article/details/123064683
版权

第一步：下载flexible.js，并引入该文件

第二步(可以省略)：可以根据计算方便，去修改计算比例，flexible默认是10，我这里修改成了24

第三步：下载cssrem扩展插件（步骤如图）

让编辑器自动把我们写入的px换算成rem（可以关注第四步图片中提示的计算方式）；

修改Root font size（不修改也可以，不影响）

第四步：示范案例

此时，当我们直接输入单位为px的数值时，会提示我们换算后的rem，如图：

总结：只要引入 flexible.js文件和安装cssrem插件，编辑器就可以给我们提示对应的rem换算了

 

拾一·
关注
  • 0
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
实现自适应rem布局
weixin_50217134的博客
06-24 719
实现自适应布局是H5移动端开发的第一步，下面给大家介绍一下怎么一步一步实现rem布局。第一步 在public公共文件夹中创建js/rem.js文件第二步 设置rem.js文件，这个主要是通过获取设备的宽度进行设置function remSize (){//获取设备的宽度var deviceWidth =document.documentElement.clientWidth || window.innerWidthif(deviceWidth>=750){deviceWidth=750}//
flexible.js 实现响应式布局
11-01
我将flexible限制的540px直接注销掉了，无论分辨率多大，都能实现响应式。 flexible.js 配合vscode的插件cssrem使用，非常方便。 我用来做大屏展示的项目，因为没有规定屏幕的分辨率具体是多大，所以flexible是一个不错的选择。
使用rem单位实现移动端页面自适应布局——以flexible.js为例(文章结尾有详细解释)
最新发布
weixin_67244432的博客
04-29 1386
在移动端开发中，页面布局的自适应是一个重要的问题。不同的设备屏幕尺寸和分辨率要求我们的页面能够灵活地适应各种环境，确保用户获得良好的体验。在CSS中，rem单位是一个相对单位，它是相对于根元素（html）的字体大小的。通过动态地设置根元素的字体大小，我们可以方便地实现页面的自适应布局。本文将介绍如何使用来实现基于rem单位的移动端页面自适应布局，并给出一个相关的例子。是一个自执行函数，它主要用于处理移动端页面的适配问题。它的核心原理是根据设备的屏幕宽度动态地设置根元素的font-size，使得1rem。
常用代码
dk8600的博客
10-24 129
手机端视窗控制 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> 转载于:https://www.cnblogs.com/sunbey/p/5993382.html...
如何使用flexible.js完成rem适配
漫漫漫漫的博客
05-01 5980
什么是rem? ** rem（font size of the root element）是指相对于根元素的字体大小的单位。** ** em（font size of the element）是指相对于父元素的字体大小的单位。** em在浏览器中默认为16px，不会随浏览器尺寸变化。 而rem可以理解为会随屏幕尺寸变化而发生改变的单位（可以理解为屏幕宽度百分比，或者vw）。 在开发的时候，往往会...
使用 flexible.js + rem 实现自适应的原理及示例
Lyrelion的博客
01-09 609
使用 flexible.js + rem 实现自适应的原理及示例 .
flexble.js自适应布局
weixin_45162984的博客
03-04 633
flexble.js自适应布局一，flexible.js 的使用方式：（一），引用方式（二），flexible.js原理（三），把视觉稿中的px转换成rem 一，flexible.js 的使用方式： github地址：https://github.com/amfe/lib-flexible 官方文档地址：https://github.com/amfe/article/issues/17 本文中有部分内容引至上面这个文档。 （一），引用方式 1，引用cdn地址 <script src="http://g
flexible.js实现移动端rem适配方案
10-15
【flexible.js 实现移动端rem适配方案】 在移动设备上开发网页时，为了实现不同分辨率屏幕间的适配，开发者通常会使用响应式设计。其中，rem（root em）单位是一种常用的解决方案，它允许我们将元素的尺寸相对于根...
rem适配js文件flexible.js和echartPxToRem.js
02-22
用于页面上使用rem，和echarts使用rem适配
Flexible.js可伸缩布局实现方法详解
01-18
flexible.js，主要是实现在各种不同的移动端界面实现一稿搞定所有的设备兼容自适应问题。 实现方法： 通过JS来调整html的字体大小，而在页面中的制作稿则统一使用rem这个单位来制作。关键代码如下： ;(function...
移动端 自适应布局 Js
Chenming_321的博客
03-05 237
1px * 0.02 1rem = 50px; 转换&gt; &lt;script type='text/javascript'&gt; // 定义rem的值，1rem=100px ! function () { function a() { document.documentElement.st...
使用flexible.js完成rem适配
DZQ1223的博客
04-28 341
rem：是指相对于根元素的字体大小的单位。em：是指相对于父元素的字体大小的单位。
rem 自适应布局 js 代码
azbe94853的博客
09-29 317
在前面head里面加上这一句禁止缩放： <metaname="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0"> 以下是js代码 该代码1rem...
flexible.js 通过设置图配置rem使用
m0_65730686的博客
10-12 334
flexible.js 通过设置图配置rem使用
flexible js 移动端自适应框架
uffgfbft的博客
11-04 1045
分享一下我老师大神的人工智能教程！零基础，通俗易懂！http://blog.csdn.net/jiangjunshow也欢迎大家转载本篇文章。分享知识，造福人民，实现我们中华民族伟大复兴！&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ;(function(
flexible.js 移动端自适应方案
kayla_wang的博客
04-08 621
一，flexible.js 的使用方式： github地址：https://github.com/amfe/lib-flexible 官方文档地址：https://github.com/amfe/article/issues/17 本文中有部分内容引至上面这个文档。 （一），引用方式 1，引用cdn地址 <script src="http://g.tbcdn.cn/mtb/lib-flexi...
什么是flexible.js 移动端自适应方案
qq_38462278的博客
09-16 913
什么是rem 这个单位代表根元素的 font-size 大小（例如 元素的font-size）。当用在根元素的font-size上面时 ，它代表了它的初始值(译者注:默认的初始值是html的默认的font-size大小,比如当未在根元素上面设置font-size大小的时候,此时的1rem==1em,当设置font-size=2rem的时候,就使得页面中1rem的大小相当于html的根字体默认大小...
移动端之rem+flexible.js布局
fine1998_的博客
05-29 1942
前言 今天粉丝涨到100了，总之感谢大家的关注！ 最近在学习移动端的页面布局，用的技术方案是rem+flexible.js，这篇文章就带大家一起感受下它的魅力吧~ 一、移动端简介 1、什么是移动端布局 移动端布局，顾名思义，就是html在手机（或者ipad）上显示的页面布局。与PC端不同在于，需要适配各种移动端的不同屏幕尺寸（采用移动端布局技术方案），并且只需要处理webkit内核浏览器即可（兼容性好）。 2、视口 视口（viewport)就是浏览器显示页面内容的屏幕区域。视口分为布局视口、视
项目自适应cssrem + flexable.js
前端工程师，博文都是自己学习到的，或者开发中遇到的点，记录一下
07-26 701
先要安装下这个插件，可以将px转化为rem，默认是16px，也可以手动设置修改。2.输入settings.json，选择图中标出的json。​1.Ctrl+Shift+p打开命令面板。具体文件可去官网下载。
flexible.js使用方式
05-24
flexible.js是一款用于移动端自适应布局的JavaScript库，可以根据不同设备的屏幕大小动态设置HTML根元素的字体大小，以达到适应不同屏幕的效果。 使用步骤如下： 1. 在HTML中引入flexible.js，可以通过CDN方式引入或者下载到本地后引入。 ```html <script src="https://cdn.bootcdn.net/ajax/libs/flexible.js/0.4.0/flexible.min.js"></script> ``` 2. 在CSS中使用rem单位代替px单位进行布局，例如： ```css body { font-size: 14px; /* 以14px为基准 */ } .box { width: 2rem; /* 相当于28px */ height: 1rem; /* 相当于14px */ } ``` 3. 在JS中可以通过Flexible.dpr获取当前设备的dpr值，以及Flexible.rem获取当前设备的1rem大小。 ```javascript console.log(Flexible.dpr); // 获取当前设备的dpr值 console.log(Flexible.rem); // 获取当前设备的1rem大小（单位px） ``` 需要注意： 1. 在使用flexible.js时，不要直接给HTML、BODY等元素设置字体大小，否则会影响到flexible.js的效果。 2. 在使用flexible.js时，要保证设计稿使用的尺寸单位为px，而不是pt、em等其他单位。因为flexible.js只能识别px单位。 3. 在使用flexible.js时，要根据设计稿的尺寸进行计算，例如设计稿宽度为750px，那么1rem应该等于设计稿宽度的1/75，即10px。 希望对你有帮助。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值