当前位置: 首页 > news >正文

vue-自适应布局-postcss-pxtorem

原理:
比如一个375px设计稿 其中一个320px宽度的元素 如何实现自适应布局呢?

其实可以这样理解:
我们先计算出375屏幕时候320px的大小,在屏幕变化时候,这些元素都会等比例缩放
比如屏幕从375 变为750px时候,320 应该变为640

而有一个单位就可以做到统一缩放,可以将320px写为320rem ,而html 的font-size可以写为1px
然后根据屏幕变化进行更新html 的font-size 就可以达到缩放了,比如750px屏幕下将html 的font-size修改为2px ,那么320rem 计算出的值就是640px

而postcss-pxtorem 其实就是利用了这个原理,
rootValue:设置为16 意思是 一开始是以html的font-size为16px 进行换算
也就是320px 换算为20rem
32px的元素被换算为2rem
但是仅仅配置这里还是不行的,此时不管屏幕多大还是显示的在375px下的样式
所以我们应该监听屏幕变化,比如切换到750px屏幕时候,根html的font-size应该被设置为32px ,那么20rem 对应的值才会被算为640px

import $ from 'jquery'
// 设置 rem 函数
function setRem() {// 1920 默认大小16px; 1920px = 120rem ;每个元素px基础上/16// 375 屏幕时候使用16px// 750 屏幕时候使用32pxconst screenWidth = 375const scale = screenWidth / 16const htmlWidth = document.documentElement.clientWidth || document.body.clientWidth// 得到html的Dom元素const htmlDom = document.getElementsByTagName('html')[0]// 如果太大了  就当做500 来计算if (parseInt(htmlWidth) > 500) {htmlDom.style.fontSize = 500 / scale + 'px'} else {// 设置根元素字体大小htmlDom.style.fontSize = htmlWidth / scale + 'px'}
}
// 初始化
$(function () {setRem()
})
// 改变窗口大小时重新设置 rem
window.onresize = function () {setRem()
}

相关文章:

vue-自适应布局-postcss-pxtorem

原理: 比如一个375px设计稿 其中一个320px宽度的元素 如何实现自适应布局呢? 其实可以这样理解: 我们先计算出375屏幕时候320px的大小,在屏幕变化时候,这些元素都会等比例缩放 比如屏幕从375 变为750px时候&#xff0…...

9.12|day 5|day 44 |完全背包| 518. 零钱兑换 II | 377. 组合总和 Ⅳ

● 完全背包 主要是看清01背包和完全背包的区别 //01背包 for(int i 0;i<weight.size();i){ for(int j bagWeight;j>weight[i];j--){dp[j] Math.max(dp[j],dp[j-weight[i]]value[i]); } } //完全背包 for(int i 0;i<weight.size();i){for(int j weight[i];j<…...

C++ 中的原子变量(std::atomic)使用指南

目录 C 中的原子变量&#xff08;std::atomic&#xff09;使用指南基本概念使用方法创建原子变量读取值修改值原子操作 常见应用场景1. 计数器2. 控制标志3. 链表和数据结构 示例代码结论 C 中的原子变量&#xff08;std::atomic&#xff09;使用指南 原子变量&#xff08;std…...

【用unity实现100个游戏之9】使用Unity制作类八方旅人、饥荒风格的俯视角2.5D游戏

前言 2.5D游戏 是一种介于二维和三维之间的游戏形式。它通常在二维平面上展示游戏内容&#xff0c;但利用三维技术来实现更加逼真的图像效果。 在2.5D游戏中&#xff0c;角色和环境通常是以平面的形式呈现&#xff0c;但可以在垂直方向上移动。这意味着玩家可以在一个相对较薄…...

如何在群晖中,正确配置 docker 的 ipv6 地址

参考 2023年9月12日 https://synocommunity.com/ https://github.com/wangliangliang2/fix_synology_docker_ipv6 https://post.smzdm.com/p/an3np8m7/ 正文 关于这个话题&#xff0c;国内搜索引擎得到的结果出奇的一致&#xff0c;且过时。 &#xff08;看的我脑壳痛&#…...

XSS入门 XSS Challenges

level1(直接注入) <script>alert(xss)</script>level2(双引号闭合标签) 测试 <sCr<ScRiPt>IPT>OonN"\/(hrHRefEF)</sCr</ScRiPt>IPT>发现<>"被转换&#xff0c;构造新的语句 "><script>alert(/xss/)</…...

李沐《动手学深度学习》torch.cat() 和 torch.stack()的区别及思考

一、问题引出 好久没更新啦&#xff01;最近在学习沐神《动手学深度学习》6.5节池化层的时候&#xff0c;发现沐神在两处相似的地方使用了两种Python拼接函数torch.cat()和torch.stack()&#xff1a; 百思不得其解&#xff0c;于是查阅相关文档之后终于弄清楚了两者之间的区别…...

【算法与数据结构】235、LeetCode二叉搜索树的最近公共祖先

文章目录 一、题目二、解法三、完整代码 所有的LeetCode题解索引&#xff0c;可以看这篇文章——【算法和数据结构】LeetCode题解。 一、题目 二、解法 思路分析&#xff1a;本题和这道题类似【算法与数据结构】236、LeetCode二叉树的最近公共祖先&#xff0c;相同的算法也能解…...

bboss 流批一体化框架 与 数据采集 ETL

数据采集 ETL 与 流批一体化框架 特性&#xff1a; 高效、稳定、快速、安全 bboss 是一个基于开源协议 Apache License 发布的开源项目&#xff0c;主要由以下三部分构成&#xff1a; Elasticsearch Highlevel Java Restclient &#xff0c; 一个高性能高兼容性的Elasticsea…...

JVM详细教程

JVM 前言 还在完善中先发布 JVM虚拟机厂家多钟多样&#xff0c;具体实现细节可能不一样&#xff0c;这里主要讲的是虚拟机的规范&#xff0c;以下内容融合了各个平台发布的内容和周志明老师的《深入理解java虚拟机》 JVM概述 如何理解jvm跨平台&#xff1f; 编译成汇编代码…...

Smartbi吴华夫:后疫情时代,BI发展趋势的观察与应对

沿着旧地图找不到新大陆&#xff0c;“基于指标体系的可视化分析和增强分析”成为BI发展新阶段。Smartbi V11系列新品与时俱进&#xff0c;以指标为核心&#xff0c;同时融合BI应用&#xff0c;赋能管理者和业务&#xff0c;成为引领数字化运营的新航标&#xff01; ——思迈特…...

软件设计模式系列之三———工厂方法模式

1 模式的定义 工厂方法模式是一种常见的设计模式&#xff0c;属于创建型设计模式之一&#xff0c;它在软件工程中用于对象的创建。该模式的主要思想是将对象的创建过程抽象化&#xff0c;将具体对象的实例化延迟到子类中完成&#xff0c;以便在不同情况下可以创建不同类型的对…...

pytorch 多卡分布式训练 调用all_gather_object 出现阻塞等待死锁的问题

pytorch 多卡分布式训练 torch._C._distributed_c10d中的函数all_gather_object 出现阻塞等待死锁的问题 解决办法就是 在进程通信之前调用torch.cuda.set_device(local_rank) For NCCL-based processed groups, internal tensor representations of objects must be moved …...

SpringMvc增删改查

SpringMvc增删改查 一、前期准备二、逆向生成增删改查2.2.aspect切面层2.3.Mybatis generator逆向生成2.4.根据生成代码编写Biz层与实现类 三、controller层代码编写四、前台代码与分页代码五、案例测试 一、前期准备 1.2.导入pom.xml依赖 <?xml version"1.0" …...

【计算机网络】网络编程接口 Socket API 解读(5)

Socket 是网络协议栈暴露给编程人员的 API&#xff0c;相比复杂的计算机网络协议&#xff0c;API 对关键操作和配置数据进行了抽象&#xff0c;简化了程序编程。 本文讲述的 socket 内容源自 Linux man。本文主要对各 API 进行详细介绍&#xff0c;从而更好的理解 socket 编程。…...

手动实现一个bind函数!

原文地址&#xff1a;手动实现一个bind函数&#xff01; - 知乎 1.bind函数用法 bind()方法用于创建一个新的函数&#xff0c;这个新函数接收的第一个参数代表的就是this&#xff0c;利用bind()函数我就就可以任意改变函数内部的this指向了。 官网的解释&#xff1a; bind()…...

数据结构-时间复杂度/空间复杂度

Hello&#xff0c;好久没有更新了哦&#xff0c;已经开始学习数据结构了&#xff0c;这篇文章呢就是对刚学数据结构所接触到的时间复杂度进行一个分享哦&#xff0c;如果有错误之处&#xff0c;大家记得拍拍我哦~ 既然要讨论时间/空间复杂度&#xff0c;那我们就得知道时间/空…...

英语写作中“展示”、“表明”demonstrate、show、indicate、illustrate的用法

一、demonstrate、show、indicate在论文写作中主要用法是&#xff1a;demonstrate/show/indicate 从句&#xff1a; Sb./Sth. demonstrates/shows/indicates that ……从句中一般表达事实、观点和结论等。 例句&#xff1a; The authors demonstrated/showed/indicated that…...

Redis的java客户端

在Redis官网中提供了各种语言的客户端&#xff0c;地址&#xff1a;https://redis.io/resources/clients/ redis的java客户端 https://redis.io/resources/clients/#java 1.jedis使用 引入依赖 <dependency><groupId>redis.clients</groupId><artifac…...

Android环境配置笔记

文章目录 一、各环境文档二、参考 一、各环境文档 Gradle官方的兼容性文档&#xff1a;Java Compatibility 更新日期&#xff1a;2023.9.12 Android Gradle插件版本&#xff1a;Android Gradle Plugin 二、参考 参考文章&#xff1a;Android问题记录...

element-table 行的拖拽更改顺序(无需下载sortableJs

样例展示&#xff1a;vueelement 通过阅读element文档我们发现element并不提供拖拽相关的api 本博客通过element提供的行类名 注册函数 实现行与行的拖拽 1.设置el-table 的行样式类名 这里是用的是 function <el-table:data"outputData":row-class-name&qu…...

Docker部署jenkins

目录 一、jenkins原理二、Docker部署jenkins1.下载jenkins镜像文件2.查看下载的jenkins镜像3.创建Jenkins挂载目录并授权权限4.创建并启动Jenkins容器5.查看jenkins是否启动成功6.查看docker容器日志7.配置镜像加速8.访问Jenkins页面&#xff0c;输入ip地址加上9000端口9.获取管…...

从0到1学会Git(第三部分):Git的远程仓库链接与操作

写在前面:前面两篇文章我们已经学会了git如何在本地进行使用&#xff0c;这篇文章将讲解如何将本地的git仓库和云端的远程仓库链接起来并使用 为什么要使用远程仓库:因为我们需要拷贝我们的代码给别人以及进行协同开发&#xff0c;就需要有一个云端仓库进行代码的存储和同步&a…...

虚拟机Ubuntu操作系统常用终端命令(1)(详细解释+详细演示)

虚拟机Ubuntu操作系统常用终端命令 本篇讲述了Ubuntu操作系统常用的三个功能&#xff0c;即归档&#xff0c;软链接和用户管理方面的相关知识。希望能够得到大家的支持。 文章目录 虚拟机Ubuntu操作系统常用终端命令二、使用步骤1.归档1.1创建档案包1.2还原档案包1.3归档并压缩…...

redis实战-redis实现异步秒杀优化

秒杀优化-异步秒杀思路 未优化的思路 当用户发起请求&#xff0c;此时会请求nginx&#xff0c;nginx会访问到tomcat&#xff0c;而tomcat中的程序&#xff0c;会进行串行操作&#xff0c;分成如下几个步骤 1、查询优惠卷 2、判断秒杀库存是否足够 3、查询订单 4、校验是否是一…...

Python爬虫-IP隐藏技术与代理爬取

前言 在进行爬虫程序开发和运行时&#xff0c;常常会遇到目标网站的反爬虫机制&#xff0c;最常见的就是IP封禁&#xff0c;这时需要使用IP隐藏技术和代理爬取。 一、IP隐藏技术 IP隐藏技术&#xff0c;即伪装IP地址&#xff0c;使得爬虫请求的IP地址不被目标网站识别为爬虫。…...

二刷力扣--链表

链表 链表类型&#xff1a; 单链表&#xff08;可以访问后面的一个节点&#xff09; 双链表&#xff08;可以访问前后节点&#xff09; 循环链表&#xff08;最后一个节点指向首节点&#xff09; 在Python中定义单链表节点&#xff1a; class ListNode:def __init__(self, v…...

返回值加const ,为了不拷贝得到成员的值,但被赋值的左值也要const

1. getA 函数返回值 什么都不加&#xff0c;也改不了c里面a的指针指向 why&#xff1f;返回成员变量时&#xff0c;会复制一下。 返回成员变量时&#xff0c;一般会赋值一下没有RVO_地摊书贩的博客-CSDN博客 2. getA 函数返回值 加了引用&#xff0c; 就没有复制 3. getA 函数…...

本地如何使用HTTPS进行调试

在现代前端开发中&#xff0c;HTTPS已经成为不可或缺的一部分&#xff0c;因为它在保护用户数据和确保网站安全性方面发挥着关键作用。然而&#xff0c;有时在本地开发过程中启用HTTPS可能会变得有些复杂。在本文中&#xff0c;我们将介绍如何轻松地在本地进行HTTPS调试&#x…...

观察者模式:对象之间的订阅机制

欢迎来到设计模式系列的第十三篇文章&#xff01;在之前的文章中&#xff0c;我们学习了许多常用的设计模式&#xff0c;今天我们将介绍观察者模式&#xff0c;它是一种行为型设计模式&#xff0c;用于定义对象之间的一对多依赖关系&#xff0c;当一个对象的状态发生变化时&…...

旅游网站开发需求分析目的/网站建设产品介绍

表结构现在有客户表、订单表、图书表、作者表&#xff0c;客户表Customer (id customer_name)订单表Order (id order_name customer_id book_id)图书表 (id book_name author_id)作者表 (id author_name)模型定义下面是这4个个模型的定义&#xff0c;只写出其中的关联CustomerO…...

一个网站要怎么做/谷歌浏览器官网下载

原标题&#xff1a;一个冬天没下雪的北京终于要下雪了&#xff1f;超级计算机&#xff1a;还不能完全确定1月30日&#xff0c;寒潮南下我国中东部&#xff0c;在我国黄淮江淮一线与冷空气交战掀起大范围雨雪天气&#xff0c;局地还可能有暴雪&#xff0c;这是今年新年以来出现的…...

哪个网站使用vue 做的/网络营销企业网站

1&#xff0c;背景 通过python的request下载文件&#xff0c;代码本身很简单&#xff0c;唯一需要说明的而即使需要通过session机制实现keep-alive的时候。 我使用python requests库中resue http conection的的session机制&#xff0c; 官方文档在https://requests.readthedo…...

上海建设安全生产协会网站/百度账号安全中心官网

公众号关注 「奇妙的 Linux 世界」设为「星标」&#xff0c;每天带你玩转 Linux &#xff01;11月28日&#xff0c;硅谷时间凌晨3点&#xff0c;Twitter的软件工程师们收到了一封来自公司的电子邮件&#xff0c;告诉他们当晚将进行新一轮的代码审查&#xff0c;他们必须准备好展…...

北京好一点的微网站开发公司/手机上可以创建网站吗

作用&#xff1a;持有对象 由于程序运行时才会根据某些条件去创建对象。数组也可以持有对象&#xff0c;但是由于长度固定受限严重&#xff0c;所以Java提供了一套完整的容器类来解决这个问题。最基本类型List、Set、Map、Queue。简单容器分布图&#xff08;详见thinking in Ja…...

构建企业网站/微信广告推广平台

批量生成账户信息&#xff0c;产生的账户由sina.com结尾&#xff0c;长度由用户输入&#xff0c;产生多少条也由用户输入&#xff0c;用户名不能重复&#xff0c;用户名必须由大写字母、小写字母和数字组成。 1 def Users(num,len): # num产生多少条信息&#xff0c;len账号的长…...