程序员开发实例大全宝库

网站首页 > 编程文章 正文

Flexible.Js解决手机端(h5页面)rem单位的适配

zazugpt 2024-08-16 06:48:42 编程文章 21 ℃ 0 评论

Flexible.Js+vscode 配合使用,解决手机端(h5页面)rem单位的适配

首先感谢网络上发布Flexible.Js相关信息和教程的大神们,由于你们让我更加了解Flexible.Js的使用。

Flexible.Js 这个js我知道的时候其实很早,在找手机框架的时候,就遇到过,记得是和淘宝相关,当然也使用了几个小时,后面因为是不了解他的具体使用,就没有再管了,导致后面我写的手机站都是用百分比来操作,如果遇到需要定位或者是背景图片,元素对齐的时候,我就很难进行操作,虽然做的是企业网站,但是如果遇到麻烦的网站百分比搭建就会出现很多的兼容,位置错位,换行等问题,后面遇到了rem单位,也具体了解过rem单位的原理,也使用了一段时间,但是还是没有那么顺手,结果到后面我写的页面单位用的就比较杂,百分比和rem和px 都有,简单的手机站勉强看得过去,复杂的就出现很多问题。当然手机框架我也使用,比如bootstrap Weiui 等前端框架,还有大神发布的单位换算的js ,但是我总是会遇到这种,那种的问题,结果没有办法,再继续网络找框架.

没有想到的是,绕了一圈又绕回到Flexible.Js上,原理我说得不专业,我就只说一点,我切图的方式和电脑端一样。

首先手机端的页面是750px, 640px宽度的页面,

然后开始写代码,个人建议使用vscode 编辑器,因为他有个插件,可以自动换算单位,这个插件叫cssrem插件 操作如下
打开vs

安装好之后要进行一个操纵(重要)修改软件默认字体的大小,首先找到软件底部的齿轮,找到设置,搜索框里面输入 cssroot 会显示用户和工作区 这里的数值要怎么修改呢,如果您的效果图是750,那这里就改成75,如果是640这里就改成64(原因简单来说就是要让rem单位换算正确)

如果都设置好了,那我们就开始写代码了,(前提简单的就说了,直接开始)

Js 引用

Css 样式相信大家都是写了,这里我们看下vs 的插件是如何切换单位的

https://github.com/amfe/lib-flexible js文件地址

感谢课程
https://www.bilibili.com/video/BV1J7411W7wq?p=26 (重点感谢)

Tags:

本文暂时没有评论,来添加一个吧(●'◡'●)

欢迎 发表评论:

最近发表
标签列表