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)

 

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

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

相关文章

html5移动端开发面试,2024年Android开发者常见面试题

Java相关 无论什么级别的Android从业者&#xff0c;Java作为Android开发基础语言。不管是工作还是面试中&#xff0c;Java都是必考题。如果不懂Java的话&#xff0c;薪酬会非常吃亏&#xff08;美团尤为重视Java基础&#xff09; 详细介绍了Java泛型、注解、并发编程、数据传…

“智农”-数字乡村可视化

“智农”打造数字乡村可视化&#xff0c;结合乡村区域实际情况&#xff0c;以规划完善乡村机制体系和更好服务乡村振兴为目标&#xff0c;坚持可持续、可复制、可扩展的建设原则&#xff0c;着力解决农村信息孤岛&#xff0c;提高农村种植技术&#xff0c;加快农村信息化和产业…

Tomcat安装,配置文件、组件

一、Tomcat的基本功能 1.1.Tomcat是什么&#xff1f; Tomcat服务器是一个免费的开放源代码的Web应用服务器&#xff0c;属于轻量级应用服务器&#xff0c;在中小型系统和并发访问用户不是很多的场合下被普遍使用&#xff0c;是开发和调试JSP程序的首选。一般来说&#xff0c;T…

GitOps实践之Argo CD

文章目录 GitOps什么是GitOpsGitOps是用于构建云原生应用程序的操作模型使用GitOps的前置条件声明式描述整个应用系统,并使用Git进行版本化控制Git Approved Changes后自动更新通过GitOps确保正确性以及分歧报警不可变基础设施、IaC与GitOpsGitOps的工作模式Git对环境配置进行…

【数仓】基本概念、知识普及、核心技术

一、数仓基本概念 数仓的定义&#xff1a; 数据仓库&#xff08;Data Warehouse&#xff0c;简称DW或DWH&#xff09;是一个面向主题的、集成的、相对稳定的、反映历史变化的数据集合&#xff0c;用于支持管理决策。简言之&#xff0c;它是一个大型存储库&#xff0c;用于存储来…

《Redis 设计与实现》读书概要

注&#xff1a; 《Redis 设计与实现》一书基于 Redis 2.9 版本编写&#xff0c;部分内容已过时&#xff0c;过时之处本文会有所说明。本文为读书笔记&#xff0c;部分简单和日常使用较少的知识点未记录。原书网页版地址 https://redisbook.com/ 一、底层数据结构 SDS(Simple Dy…

动态规划总结

参考来源&#xff1a;代码随想录 文章目录 基础概念具体应用的问题基础问题背包问题0-1背包完全背包 打家劫舍问题股票买卖问题子序列问题 基础概念 状态推导&#xff1a;动态规划中每一个状态一定是由上一个状态推导出来的。 动规五部曲&#xff1a; 确定dp[i]或者dp[i][j]…

吴恩达机器学习全课程笔记第四篇

目录 前言 P61-P68 激活函数 Softmax算法 P69-P73 Adam算法 更多类型的层 模型评估 P74-P79 偏差和方差 建立表现基准 学习曲线 偏差和方差与神经网络 前言 这是吴恩达机器学习笔记的第四篇&#xff0c;第三篇笔记请见&#xff1a; 吴恩达机器学习全课程笔记第…

react使用@reduxjs/toolkit和react-redux实现store状态管理

一、概述 reduxjs/toolkit和react-redux是用于在React应用中管理全局状态的工具库 1、reduxjs/toolkit&#xff1a; reduxjs/toolkit是Redux官方推荐的工具库&#xff0c;是对 Redux 的二次封装&#xff0c;它提供了一些便捷的API和工具&#xff0c;帮助开发者更快速地编写R…

上海雷卯推出USB4接口的静电浪涌保护方案

一、 USB4技术性能特点 USB4是USB3.2 的后继版本,是最新的USB规范。USB4是通信协议&#xff0c;采用的硬件接口是USB Type-C 接口&#xff0c;USB Type-C 端口根据 USB3.x 和 USB4 协议传输数据。它的接口标准是由 USB Promoter Group 制定的&#xff0c;主要规范了USB4 接口的…

服务端开发遇到的冷门问题

一、网关返回错误码502或504 返回504可能是服务接口确实是超时了。有的时候接口返回一些网关不能识别的http code时&#xff0c;譬如0&#xff0c;网关不能识别&#xff0c;网关产品不通可能返回意想不到的http code。 亲自遇到istio网关&#xff0c;接口返回http code 为0 &am…

基于x86架构的OpenHarmony应用生态挑战赛等你来战!

为了更快速推进OpenHarmony在PC领域的进一步落地&#xff0c;加快x86架构下基于OpenHarmony的应用生态的繁荣&#xff0c;为北向应用开发者提供一个更加便捷的开发环境&#xff0c;推动OpenHarmony北向应用开发者的增加&#xff0c;助力OpenHarmony在PC领域实现新的突破&#x…

2023年第十四届蓝桥杯JavaB组省赛真题(A、阶乘求和)

2023年第十四届蓝桥杯JavaB组省赛真题&#xff08;A、阶乘求和&#xff09; 一、题目内容 题目描述&#xff1a; ​ 令 S 1! 2! 3! … 202320232023! ​ 求 S 的末尾 9 位数字。 ​ 提示&#xff1a;答案首位不为 0 。 二、思路分析 ​ 直接使用BigInteger进行求解&…

加速创新:API接口如何帮助您的电商业务领先一步

在今天快节奏、竞争激烈的电子商务市场中&#xff0c;企业需要不断寻找新方法来优化运营、提升用户体验并增加收入。API&#xff08;应用程序编程接口&#xff09;已经成为推动创新和维持竞争力的关键工具。本文将探讨API接口是如何成为电商业务发展的强大加速器&#xff0c;并…

【c语言】探索结构体---解锁更多选择

前言 结构体属于自定义类型的一种&#xff0c;这增加了我们写代码的选择&#xff0c;跟着我的脚步一起来探索结构体吧~ 欢迎关注个人主页&#xff1a;逸狼 创造不易&#xff0c;可以点点赞吗~ 如有错误&#xff0c;欢迎指出~ 认识结构体 结构是⼀些值的集合&#xff0c;这些值…

iMazing3安全吗?好不好用?值不值得下载

一、安全性 iMazing在设计和开发过程中&#xff0c;始终把用户数据的安全性放在首位。它采用了多种先进的安全技术来确保用户数据在传输、备份和存储过程中的安全。 iMazing3Mac-最新绿色安装包下载如下&#xff1a; https://wm.makeding.com/iclk/?zoneid49816 iMazing3Wi…

深度学习 精选笔记(6)模型选择与正则化

学习参考&#xff1a; 动手学深度学习2.0Deep-Learning-with-TensorFlow-bookpytorchlightning ①如有冒犯、请联系侵删。 ②已写完的笔记文章会不定时一直修订修改(删、改、增)&#xff0c;以达到集多方教程的精华于一文的目的。 ③非常推荐上面&#xff08;学习参考&#x…

【编程】Rust语言入门第6篇——模式匹配

模式匹配 match匹配 功能类似于C、Python中的switch case语句。 结合例子来介绍&#xff0c; enum Direction {East,West,South,North,}#[derive(Debug)]enum UsState {Alabama,Alaska,}enum Coin {Penny,Nickel,Dime,Quarter(UsState), // 25美分硬币}#[derive(Debug)]enum …

vue3基础教程(1)——nodejs环境搭建

博主个人小程序已经上线&#xff1a;【中二少年工具箱】 小程序二维如下&#xff1a; 正文开始 专栏简介1. 环境菜单2.为什么下载node3. nodejs简介4. nodejs安装5. 编辑器选择 专栏简介 本系列文章由浅入深&#xff0c;从基础知识到实战开发&#xff0c;非常适合入门同学。…

sql面试题--业务培训(一)

题目 为管理业务培训信息&#xff0c;现需建立3个表&#xff1a; 表S(S#,SN,SD,SA)S#,SN,SD,SA分别代表学号&#xff0c;学员姓名&#xff0c;所属单位&#xff0c;学员年龄、 表C(C#,CN)C#,CN分别代表课程编号&#xff0c;课程名称 表SC(S#,C#,G)S#,C#,G分别代表学号&#xf…