pc端如何做自适应呢?
<!-- 默认html的font-size的大小是16px 1rem = 16px -->
<!-- 想要实现自适应的前提条件是 当浏览器的窗口发生变化的时候, html的font-size将会跟着发生改变 -->
<!-- 实现的步骤如下 -->
<!-- 1 借助flexble.js文件 -->
<!-- 2 将flexble.js文件中的屏幕适配分为24份。 那么随着屏幕不断发生变化的时候 屏幕的fonst-size的大小就是当前屏幕的尺寸/24了 -->
<!-- 3 屏幕适配 当设计稿为1920的时候,而我的屏幕是1240, 而设计稿的盒子尺寸是500的时候,那么我的盒子尺寸应该(500/1920)*1240; 基于这样的运算会比较复杂 -->
<!-- 4 下载插件帮助计算 pxtorem; -->
<!-- 5 因为我们量尺寸都是基于设计稿去量的 所有我们要将pxtorem的尺寸进行修改 在设置里面找到修改尺寸的地方也就设计稿的尺寸1920/24 = 80 -->
<!-- 6 这样我们就可以基于原设计稿的尺寸来进行测量,而在我们这里转化为rem就可以了 -->
(function flexible(window, document) {var docEl = document.documentElementvar dpr = window.devicePixelRatio || 1// adjust body font sizefunction setBodyFontSize() {if (document.body) {document.body.style.fontSize = 12 * dpr + 'px'} else {document.addEventListener('DOMContentLoaded', setBodyFontSize)}}setBodyFontSize()// set 1rem = viewWidth / 10// pc端屏幕适配 一般将flexble分为24份// 默认情况下是将屏幕大小分为了100份// 原理 不管屏幕是多大 反正默认指定的分数function setRemUnit() {// 这里默认是10等份,手动改为24,此时1rem=1920/24px即80px。(设计稿是1920px的)var rem = docEl.clientWidth / 24docEl.style.fontSize = rem + 'px'}setRemUnit()// reset rem unit on page resizewindow.addEventListener('resize', setRemUnit)window.addEventListener('pageshow', function (e) {if (e.persisted) {setRemUnit()}})// detect 0.5px supportsif (dpr >= 2) {var fakeBody = document.createElement('body')var testElement = document.createElement('div')testElement.style.border = '.5px solid transparent'fakeBody.appendChild(testElement)docEl.appendChild(fakeBody)if (testElement.offsetHeight === 1) {docEl.classList.add('hairlines')}docEl.removeChild(fakeBody)}
})(window, document)
相关文章:
pc端如何做自适应呢?
<!-- 默认html的font-size的大小是16px 1rem 16px --> <!-- 想要实现自适应的前提条件是 当浏览器的窗口发生变化的时候, html的font-size将会跟着发生改变 --> <!-- 实现的步骤如下 --> <!-- 1 借助flexble.js文件 --> <!-- 2 将fle…...
c语言经典测试题8
在c语言经典测试题6的第一题,大家是否想过可不可以将递归参数改为s呢?或许有的人已经试过了,但是发现好像不会有结果,其实是因为s为后置,先试用后加1,然而我们这个是在s出了函数之后才会运行加1操作&#x…...
解决GitHub无法访问的问题:手动修改hosts文件与使用SwitchHosts工具
✨✨ 欢迎大家来访Srlua的博文(づ ̄3 ̄)づ╭❤~✨✨ 🌟🌟 欢迎各位亲爱的读者,感谢你们抽出宝贵的时间来阅读我的文章。 我是Srlua,在这里我会分享我的知识和经验。&#x…...
ETL数据仓库的使用方式
一、ETL的过程 在 ETL 过程中,数据从源系统中抽取(Extract),经过各种转换(Transform)操作,最后加载(Load)到目标数据仓库中。以下是 ETL 数仓流程的基本步骤:…...
POST参数里加号+变成空格的问题处理
今天遇到个这样的问题,从前端传到后端的加密报文,里面包含了号,但在后端日志输出看出,变成空格。这个是由于经过RSA加密后引起的 解决办法: 1.前端转码:使用encodeURIComponent对参数进行转码 2.后端解码…...
【华为面试基础题】检查是否存在满足条件的数字组合
描述 给定一个正整数数组检查数组中是否存在满足规则的数组组合 规则: AB2C 输入描述: 第一行输出数组的元素个数,接下来一行输出所有数组元素,用空格隔开 输出描述: 如果存在满足要求的数 在同一行里依次输出 规则…...
亚信安慧AntDB数据并行加载工具的实现(一)
1.概述 数据加载速度是评判数据库性能的重要指标,能否提高数据加载速度,对文件数据进行并行解析,直接影响数据库运维管理效率。基于此,AntDB分布式数据库提供了两种数据加载方式: 一是类似于PostgreSQL的Copy命令&am…...
面经 | Java创建线程的三种方式
利用JUC包创建线程的三种方式: 通过继承Thread类创建线程类实现Runnable接口创建线程类通过Callable和Future接口创建线程 继承Thread类创建线程 class Thread1 extends Thread {Overridepublic void run() {System.out.println("启动线程1");} }实现R…...
【计算机网络】五种IO模型与IO多路转接之select
文章目录 一、五种IO模型二、非阻塞IO1.fcntl2.实现函数SetNoBlock3.轮询方式读取标准输入 三、I/O多路转接之select1.初识select2.select函数原型3.socket就绪条件4.select的特点5.select缺点6.select使用案例--只读取数据的server服务器1.err.hpp2.log.hpp3.sock.hpp4.select…...
通过一篇文章让你了解数据结构和算法的重要性
通过一篇文章让你了解数据结构和算法的重要性 前言一、 什么是数据结构?二、什么是算法?三、数据结构和算法的重要性在校园招聘的笔试中:在校园招聘的面试中:在未来的工作中: 四、如何学好数据结构和算法4.1 死磕代码&…...
python代码优化学习
代码优化对比: 优化前: # 登录系统 xxljob_login() start_time time.time() # 循环处理需要补数的数据 for item in authId_lists: preSettleInfoHandler(item) count 1 print("运行了第" str(count) "个") …...
C#,数值计算,求解微分方程的吉尔(Gear)四阶方法与源代码
1 微分方程 微分方程,是指含有未知函数及其导数的关系式。解微分方程就是找出未知函数。 微分方程是伴随着微积分学一起发展起来的。微积分学的奠基人Newton和Leibniz的著作中都处理过与微分方程有关的问题。微分方程的应用十分广泛,可以解决许多与导数…...
2024年新提出的算法|LEA爱情进化算法(Love Evolution Algorithm)
Love Evolution Algorithm: a stimulus–value–role theory-inspired evolutionary algorithm for global optimization 爱情进化算法Love Evolution Algorithm,LEA,于2024年2月发表在中科院3区SCI期刊 The Journal of Supercomputing。 1、简介 本文提…...
javaWeb个人学习02
会话技术 会话: 用户打开浏览器,访问web服务器的资源,会话建立,直到有一方断开连接,会话结束.在一次会话中包含多次请求和响应 会话跟踪: 一种维护浏览器状态的方法,服务器需要识别多次请求是否来自于同一个浏览器,以便在同一次会话的多次请求之间共享数据 会话跟踪方案: …...
EchoServer回显服务器封装与测试
目录 类实现 编译测试 这一篇本质上是为了TcpServer而做的一层封装,让外界调用更加简洁 参考上文 TcpServer服务器管理模块(模块十)-CSDN博客 类实现 echo.hpp #include "../server.hpp"class EchoServer { private:TcpServer _server;private:void OnConnect…...
详解POCV/SOCV的时序报告
POCV/SOCV的时序报告中有如下变量: Mean: 高斯分布中的μ值(平均值) Sensit: sensitivity,也就是1个Sigma的值; Corner: Sigma边界的最差值 cell的delay Delay mean N * Delay sigma; cell 的Transition Sl…...
[VNCTF2024]-PWN:preinit解析(逆向花指令,绕过strcmp,函数修改,机器码)
查看保护: 查看ida: 这边其实看反汇编没啥大作用,需要自己动调。 但是前面的绕过strcmp还是要看一下的。 解题: 这里是用linux自带的产生随机数的文件urandom来产生一个随机密码,然后让我们输入密码,用st…...
网络通信技术
▶1.分组交换技术 在网络通信中,数据通过网络节点的某种转发方式,实现从一个端系统到另一个端系统之间的数据传输技术称为数据交换技术。数据交换技术有电路交换、报文交换和分组交换,计算机网络采用分组交换技术。 分组就是源主机(如服务器…...
【刷题】位运算
消失的两个数字 消失的两个数字 “单身狗”进阶版思路 class Solution { public:vector<int> missingTwo(vector<int>& nums) {int ret 0;int n nums.size();for(int i 0; i < n; i){ret ^ (nums[i] ^ i);}ret ^ (n ^ (n 1) ^ (n 2));// 按位异或的…...
C++重新入门-string容器
目录 1.包含头文件 2.创建字符串 3.获取字符串长度 4.字符串拼接 5.字符串比较 相等性比较 大小比较 使用比较函数 6.访问字符串 7.查找子串 8.字符串修改 替换子串 插入字符或子串 删除字符或子串 9.提取子串 10.总结 当谈到C中的字符串时,std::str…...
观成科技:隐蔽隧道工具Ligolo-ng加密流量分析
1.工具介绍 Ligolo-ng是一款由go编写的高效隧道工具,该工具基于TUN接口实现其功能,利用反向TCP/TLS连接建立一条隐蔽的通信信道,支持使用Let’s Encrypt自动生成证书。Ligolo-ng的通信隐蔽性体现在其支持多种连接方式,适应复杂网…...
Day131 | 灵神 | 回溯算法 | 子集型 子集
Day131 | 灵神 | 回溯算法 | 子集型 子集 78.子集 78. 子集 - 力扣(LeetCode) 思路: 笔者写过很多次这道题了,不想写题解了,大家看灵神讲解吧 回溯算法套路①子集型回溯【基础算法精讲 14】_哔哩哔哩_bilibili 完…...
线程同步:确保多线程程序的安全与高效!
全文目录: 开篇语前序前言第一部分:线程同步的概念与问题1.1 线程同步的概念1.2 线程同步的问题1.3 线程同步的解决方案 第二部分:synchronized关键字的使用2.1 使用 synchronized修饰方法2.2 使用 synchronized修饰代码块 第三部分ÿ…...
3403. 从盒子中找出字典序最大的字符串 I
3403. 从盒子中找出字典序最大的字符串 I 题目链接:3403. 从盒子中找出字典序最大的字符串 I 代码如下: class Solution { public:string answerString(string word, int numFriends) {if (numFriends 1) {return word;}string res;for (int i 0;i &…...
视频行为标注工具BehaviLabel(源码+使用介绍+Windows.Exe版本)
前言: 最近在做行为检测相关的模型,用的是时空图卷积网络(STGCN),但原有kinetic-400数据集数据质量较低,需要进行细粒度的标注,同时粗略搜了下已有开源工具基本都集中于图像分割这块,…...
初探Service服务发现机制
1.Service简介 Service是将运行在一组Pod上的应用程序发布为网络服务的抽象方法。 主要功能:服务发现和负载均衡。 Service类型的包括ClusterIP类型、NodePort类型、LoadBalancer类型、ExternalName类型 2.Endpoints简介 Endpoints是一种Kubernetes资源…...
CVE-2020-17519源码分析与漏洞复现(Flink 任意文件读取)
漏洞概览 漏洞名称:Apache Flink REST API 任意文件读取漏洞CVE编号:CVE-2020-17519CVSS评分:7.5影响版本:Apache Flink 1.11.0、1.11.1、1.11.2修复版本:≥ 1.11.3 或 ≥ 1.12.0漏洞类型:路径遍历&#x…...
AI+无人机如何守护濒危物种?YOLOv8实现95%精准识别
【导读】 野生动物监测在理解和保护生态系统中发挥着至关重要的作用。然而,传统的野生动物观察方法往往耗时耗力、成本高昂且范围有限。无人机的出现为野生动物监测提供了有前景的替代方案,能够实现大范围覆盖并远程采集数据。尽管具备这些优势…...
Redis:现代应用开发的高效内存数据存储利器
一、Redis的起源与发展 Redis最初由意大利程序员Salvatore Sanfilippo在2009年开发,其初衷是为了满足他自己的一个项目需求,即需要一个高性能的键值存储系统来解决传统数据库在高并发场景下的性能瓶颈。随着项目的开源,Redis凭借其简单易用、…...
在鸿蒙HarmonyOS 5中使用DevEco Studio实现企业微信功能
1. 开发环境准备 安装DevEco Studio 3.1: 从华为开发者官网下载最新版DevEco Studio安装HarmonyOS 5.0 SDK 项目配置: // module.json5 {"module": {"requestPermissions": [{"name": "ohos.permis…...
