关于rem 针对设计稿宽度,设计rem调试比例,调整根目录font-size

设计稿为375px ,设计rem的适配基础宽度,如果基础宽度设置为10px

1rem = 10px100vw = 375px(设计稿尺寸)

那么设计根节点的font-size时计算公式:

375px = 100vw = 37.5rem
1rem = 100 / 37.5 ≈ 2.6vw那么我们在根节点设置时就可以设置为font-size:2.6vw

在html中设置

/* Mobile */
@media screen and (max-width: 768px) {:root {/* 设计稿尺寸为375px的标准  1rem = 10px,100vw = 375px ----> 37.5rem = 375px = 100vw --- 1rem = 100vw/37.5 = 2.6vw *//*使用时直接10px = 1rem 转换即可 */font-size: 2.6vw;}
}页面使用时在写css时可设计稿的尺寸转换为rem如果设计稿的尺寸是375px的。元素的宽度是50px。那在写css时可以写成:width: 5rem.className {/*使用时直接10px = 1rem 转换即可 */width: 5rem;}

如果涉及稿是750px的。那设置的基础宽度10px

1rem = 10px
100vw = 750px(设计稿尺寸)
750px = 100vw = 75rem
那么: 1rem = 100vw / 75 = 1.3vw那在html中设置的根节点的font-size: 1.3vw/* Mobile */
@media screen and (max-width: 768px) {:root {/*使用时直接10px = 1rem 转换即可 */font-size: 1.2vw;}
}页面使用时在写css时可设计稿的尺寸转换为rem如果设计稿的尺寸是750px的。元素的宽度是50px。那在写css时可以写成:width: 5rem@media screen and (max-width: 768px) {.className {/*使用时直接10px = 1rem 转换即可 */width: 5rem;}
}

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

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

相关文章

OpenCASCADE开发指南<四>:OCC 数据类型和句柄

一个软件首先要规定能处理的数据类型, 其次要实现三项最基本的功能——引用管理、内存管理和异常管理。在 OCC 中,这三项功能分别对应基础类中的句柄、内存管理器和异常类。 1 数据类型 在基本概念篇里,已经介绍了 OCC 数据类型的分类&…

java main hutool链接redis

redis.setting #------------------------------------------------------------------------------- # Redis客户端配置样例 # 每一个分组代表一个Redis实例 # 无分组的Pool配置为所有分组的共用配置,如果分组自己定义Pool配置,则覆盖共用配置 # 池配置…

Mysql 学习(十七)事务隔离级别和MVCC

前提准备 首先创建一个表: CREATE TABLE hero (number INT,name VARCHAR(100),country varchar(100),PRIMARY KEY (number) ) EngineInnoDB CHARSETutf8;INSERT INTO hero VALUES(1, 刘备, 蜀);事务隔离级别 mysql 是一个 客户端 和 服务器架构的软件&#xff0c…

家庭Wi-Fi指南:2.4G还是5G?一文读懂!

📶 无线网络的双频选择:2.4GHz Wi-Fi vs 5GHz Wi-Fi 在享受无线网络的便捷时,我们通常会在设备上看到两个频段的Wi-Fi信号:2.4GHz和5GHz。这两个频段各有特点,了解它们的差异可以帮助你选择更适合你需求的网络连接。 …

SCAU 576 顺序线性表的基本操作

576 顺序线性表的基本操作 时间限制:1000MS 代码长度限制:10KB 提交次数:9027 通过次数:2456 题型: 编程题 语言: G;GCC Description 编写算法,创建初始化容量为LIST_INIT_SIZE的顺序表T,并实现插入、删除、遍历操作。本题目给出部分代码&#xff0c…

【数据结构】详解线性表的各个函数接口+OJ习题讲解(画图比写代码更重要!!!)

文章目录 一、线性表二、顺序表1、什么是顺序表2、顺序表的分类 三、动态顺序表的实现1、结构的定义2、顺序表的初始化3、检查容量4、在头部插入数据5、在尾部插入数据6、在指定位置插入数据7、在尾部删除数据8、在头部删除数据9、删除指定位置的数据10、查找数据11、修改指定位…

Linux: cloud: network: tap tx 丢包一例,vCPU的运行受到主机CPU的占用影响

https://access.redhat.com/documentation/en-us/red_hat_openstack_platform/10/html/ovs-dpdk_end_to_end_troubleshooting_guide/high_packet_loss_in_the_tx_queue_of_the_instance_s_tap_interface 这个里面有一个丢包的例子是说,如果tx-queue的大小不够大&am…

ThreeJs制作模型图片

这个标题名字可能有歧义,只是不知道如何更好的表达,总之就是将图片的像素转换成3D场景的模型,并设置这个模型的颜色,放到像素点对应的位置从而拼接成一个图片,起因是上文中用js分解了音乐,实现了模型跳动效…

Oracle DBMS_LOCK

DBMS_lock是Oracle数据库中的一个包,主要用于控制并发和实现用户锁。在PL/SQL代码块中,有些操作代码块不能被多个会话同时进行执行,例如生成中间数据表等。如果此部分代码块被另个会话调用,则会造成中间数据表的数据在同一个会话中…

代码随想录算法训练营第七天|454. 四数相加 II

454. 四数相加 II 已解答 中等 相关标签 相关企业 给你四个整数数组 nums1、nums2、nums3 和 nums4 &#xff0c;数组长度都是 n &#xff0c;请你计算有多少个元组 (i, j, k, l) 能满足&#xff1a; 0 < i, j, k, l < nnums1[i] nums2[j] nums3[k] nums4[l] 0 示例 …

互联网行业的应届大学生,如何制作高水平简历?

雇主通常只会花大约25秒的时间浏览一份简历,因此,拥有一份出色的简历对于找到理想工作至关重要。如果您的简历没有令人印象深刻的特点,那么如何才能在竞争激烈的求职市场中脱颖而出呢? 如果您不知道如何在简历上有效地展示自己,或者觉得简历无论怎么修改都不够突出,那么请…

安装、配置MySQL

安装相关软件 MySQL Server、MySQL Workbench MySQL Server&#xff1a;专门用来提供数据存储和服务的软件 MySQL Workbench&#xff1a;可视化的 MySQL 管理工具 官网安装 https://www.mysql.com/ 官网 MySQL :: Download MySQL Installer 安装包路径 在这里选择版本和和对应…

多图如何导入多个二维码?图片批量导出二维码的技巧

多个图片分别生成对应的二维码怎么做&#xff1f;现在扫码看图片是一种很常用的内容预览方式&#xff0c;有些产品包装也会采用这种方式来展示对应的信息&#xff0c;怎么简单快速的将图片生成二维码&#xff0c;相信有很多的小伙伴都非常的感兴趣。那么小编通过下面这篇文章来…

力扣-28. 找出字符串中第一个匹配项的下标(内置函数或双指针)

找出字符串中第一个匹配项的下标 给你两个字符串 haystack 和 needle &#xff0c;请你在 haystack 字符串中找出 needle 字符串的第一个匹配项的下标&#xff08;下标从 0 开始&#xff09;。如果 needle 不是 haystack 的一部分&#xff0c;则返回 -1 。 示例 1&#xff1a; …

分布式微服务 - 3.服务调用 - 1.概念

分布式微服务 - 3.服务调用 - 1.概念 项目示例&#xff1a; 无 内容提要&#xff1a; 服务调用、负载均衡、框架降级熔断限流、框架网关、框架 文档&#xff1a; 无 服务调用 服务调用时&#xff0c;需要先获取服务消费者的ip和端口号等信息。因此&#xff0c;一般服务…

常见的特殊端口号及其用途

21端口&#xff1a;FTP&#xff08;文件传输协议&#xff09;服务端口。FTP允许用户进行文件传输&#xff0c;如上传和下载文件。22端口&#xff1a;SSH&#xff08;安全外壳协议&#xff09;服务端口。SSH用于远程登录到服务器&#xff0c;并提供加密的数据传输。23端口&#…

探索C++中的动态数组:实现自己的Vector容器

&#x1f389;个人名片&#xff1a; &#x1f43c;作者简介&#xff1a;一名乐于分享在学习道路上收获的大二在校生 &#x1f648;个人主页&#x1f389;&#xff1a;GOTXX &#x1f43c;个人WeChat&#xff1a;ILXOXVJE &#x1f43c;本文由GOTXX原创&#xff0c;首发CSDN&…

Python 装饰器decorator 圣经

文章目录 普通装饰器decorator0. 万能公式&#xff0c;非常重要1. 便于入门的decorator原理2. 理解函数3. 装饰器的作用:4. 装饰器的语法糖5. 装饰器顺序6. 极简的装饰器7. 装饰器的参数无参 函数装饰器有参 函数装饰器 类装饰器class decorator0. 万能公式&#xff0c;非常重要…

判断一个整数是不是2的阶次方

boolean check(){int sum 50;boolean flag true;while(sum > 1){if (sum % 2 0){sum sum % 2;}else {flag false;break;}}return flag;}

uView ScrollList 横向滚动列表

该组件一般用于同时展示多个商品、分类的场景&#xff0c;也可以完成左右滑动的列表。 #平台差异说明 App&#xff08;vue&#xff09;App&#xff08;nvue&#xff09;H5小程序√√√√ #基本使用 通过slot传入内容 <template><u-scroll-list><view v-for…