flexible.js + rem 适配布局

news2024/11/20 10:22:40

什么是:flexible.js ??

  • flexible.js 是手机淘宝团队出的移动端布局适配库
  • 不需要在写不同屏幕的媒体查询,因为里面js做了处理
  • 原理是把当前设备划分为10等份,但是不同设备下,比例还是一致的。
  • 要做的,就是确定好当前设备的html 文字大小就可以了
  • 比如当前设计稿是 750px, 那么我们只需要把 html 文字大小设置为 75px(750px / 10) 就可以,里面页面元素rem值: 页面元素的px 值 / 75
  • 剩余的,让flexible.js来去算

项目中使用

1、下载 flexible.js

npm i -S lib-flexible

2、main.js 中引入

import 'lib-flexible/flexible.js'

3、在nodemodule/lib-flexible/flexible.js中修改代码如下:
设置成24等份,设计稿为1920px,这样 1rem 就是 80px
1920 / 24 = 80
在这里插入图片描述
4、在 vscode 中安装 cssrem 插件,并修改
在这里插入图片描述
5、设置完成后,重启 vscode
6、使用
再当我们输入宽度的时候,我就可以看到vscode自动帮我们计算好了对应的rem值,我们只要点击使用就可以了。
在这里插入图片描述
完成。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/653473.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【亲测解决】import torch 出现段错误,报错信息 Segmentation fault

微信公众号:leetcode_algos_life import torch 出现段错误 【问题】【解决方案】 【问题】 安装pytorch-gpu版本,安装完成后,import torch发现报错直接返回,报错信息如下: Segmentation fault【解决方案】 Linux环境…

查看虚拟机网络IP和网关

查看虚拟网络编辑器和修IP地址: 查看网关: 查看windows:环境的中VMnet8网络配置(ipconfig指令): 查看linux的配置ifconfig: ping测试主机之间网络连通性: 基本语法 ping 目的主机(功能描述:测试当前服务器是否可以连接目的主机) 应用实例 测…

一秒教你搞定前端打包上传后路由404的问题!

1、问题描述 前端实现权限管理后,本地路由跳转正常,打包上传线上出现前404找不到路由路径问题 报如下错误: 2、错误原因 打包之后根路径变化,前端没有将获取到的用户菜单权限中的component进行转换,导致上传后路径错误 3、解决…

Gurobi许可证获取并部署到Pycharm中

获取Gurobi许可证 海外版(Gurobi)~ 可略过 海外Gurobi地址但是就算用高校身份注册还是无法获取许可证图例 原因;学校的网关没有将本校的 IP 地址标注为学术机构,那么会出现 Error 303/305 错误,IP 验证不会成功&…

第三章_基于zookeeper实现分布式锁

实现分布式锁目前有三种流行方案,分别为基于数据库、Redis、Zookeeper的方案。这里主要介绍基于zk怎么实现分布式锁。在实现分布式锁之前,先回顾zookeeper的知识点。 知识点回顾 Zookeeper(业界简称zk)是一种提供配置管理、分布式…

NIFI1.21.0_Mysql到Mysql增量CDC同步中_日期类型_以及null数据同步处理补充---大数据之Nifi工作笔记0057

NIFI从MySql中增量同步数据_通过Mysql的binlog功能_实时同步mysql数据_根据binlog实现update数据实时同步_实际操作05---大数据之Nifi工作笔记0044 具体的,之前已经写过,如何在NIFI中实现MySQL的增量数据同步,但是写的简单了,因为,比如在插入的时候,更新的时候,仅仅是写死的某…

第五节 利用Ogre 2.3实现雨,雪,爆炸,飞机喷气尾焰等粒子效果

本节主要学习如何使用Ogre2.3加载粒子效果。为了学习方便,直接将官方粒子模块Sample_ParticleFX单独拿出来编译,学习如何实现粒子效果。 一. 前提须知 如果参考官方示例建议用最新版的Ogre 2.3.1。否则找不到有粒子效果的示例。不要用官网Ogre2.3 scri…

【微信小程序开发】第 8 课 - 小程序 API 的 3 大分类

欢迎来到博主 Apeiron 的博客,祝您旅程愉快 ! 时止则止,时行则行。动静不失其时,其道光明。 目录 1、小程序 API 概述 2、小程序 API 的 3 大分类 3、总结 1、小程序 API 概述 小程序中的 API 是由宿主环境提供的,…

一款基于 SpringCloud 的电商商城系统,小程序+管理端一套带走

项目介绍 Smart Shop 是一款基于 Spring Cloud MybatisPlusXXL-JOBredisVue 的前后端分离、分布式、微服务架构的 Java 商城系统,采用稳定框架开发及优化核心,减少依赖,具备出色的执行效率,扩展性、稳定性高,H5/小程序…

pnpm + monorepo架构思想小试牛刀

写在前面 今天要写的是关于一种前端全新架构的方式,monorepo这是目前相对来讲比较新的一种前端架构,整好趁着最近在学,就利用这个平台记录一下学习的一个过程,上一篇文章更新的是react,后面也会一样更新,今…

深入理解Java虚拟机jvm-运行时数据区域(基于OpenJDK12)

运行时数据区域 运行时数据区域程序计数器Java虚拟机栈本地方法栈Java堆方法区运行时常量池直接内存 运行时数据区域 Java虚拟机在执行Java程序的过程中会把它所管理的内存划分为若干个不同的数据区域。这些区域 有各自的用途,以及创建和销毁的时间,有的…

持续改进与创新:水库大坝安全管理方式

随着工业的快速发展,大坝建设已成为经济发展的重要部分。然而,由于自然环境的破坏以及人类因素的干扰,大坝的安全问题备受关注。每年都有不少大坝事故爆发,造成无法预估的损失。据统计,截至2006年我国共有3260座水库已…

【AntDB数据库】AntDB数据库跨地域多中心部署

跨地域多中心部署 **** 某省核心账务库案例 **** 通信行业核心业务系统已经与某款国外成熟商业数据库深度捆绑多年,为改变这一现状,实现数据库“自主可控”的目标,某省经过多轮调研选型与评测最终选择AntDB分布式内存数据库进行核心产生系统…

Linux线程同步(上)

文章目录 1. 同步的概念2. 条件变量函数2.1 等待函数2.2 样例 3. 生产者消费者模型4. 阻塞队列4.1 模拟阻塞队列的生产消费模型4.2 构造函数和析构函数4.3 生产接口和消费接口4.4 创建线程进行测试 1. 同步的概念 互斥可能会导致一个执行流长时间得不到某种资源。也叫饥饿问题…

健身房小程序怎么做?

如果把预约小程序用好了,会给你的场馆经营带来很多意想不到的好处,解决用户线上约客的问题,顶多只发挥了 20% 的作用,那另外 80% 的用法是什么呢? 高效推荐名片服务行业做的是口碑,用户靠的是转介绍&#x…

SignalR快速入门 ~ 仿QQ即时聊天,消息推送,单聊,群聊,多群公聊(基础=》提升)

SignalR快速入门 ~ 仿QQ即时聊天,消息推送,单聊,群聊,多群公聊(基础》提升,5个Demo贯彻全篇,感兴趣的玩才是真的学) 官方demo:http://www.asp.net/signalr/overview/getting-started…

超大模型如何实现3D WEB轻量化渲染?

Hoops Communicator是Tech Soft 3D旗下的主流产品之一,具有强大的、专用的高性能图形内核,专注于基于Web的高级3D工程应用程序。其由HOOPS Server和HOOPS Web Viewer两大部分组成,提供了HOOPS中的HOOPS Convertrer、Data Authoring的模型转换…

电脑提示msvcr120.dll丢失的解决方法win10,总共有三种,那个更方便

电脑修复经验分享,dll动态链接库文件丢失修复教程,DLL 文件,即动态链接库,也有人称作应用程序拓展。一种可执行文件,允许程序共享执行特殊任务所需的代码和其他资源。msvcr120.dll也是属于dll文件之一,在Wi…

python 面向对象 对象

类 构造函数 # 创建类 class Student:name None # 成员属性age None # 成员属性def say(self): # 成员方法print(self.name)# 构造函数def __init__(self,name,age):self.name nameself.age age#创建类对象 my_student Student() # 对象的属性 赋值 my_student.name …

Mysql数据库——用户管理与授权

Mysql数据库——用户管理与授权 一、登录用户的管理1.新建用户2.查看用户信息3.重命名用户4.删除用户5.修改当前登录用户密码6.修改其他用户密码7.忘记 root 密码的解决办法 二、数据库用户授权…