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()
}

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

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

相关文章

行业追踪,2023-09-14

自动复盘 2023-09-14 凡所有相,皆是虚妄。若见诸相非相,即见如来。 k 线图是最好的老师,每天持续发布板块的rps排名,追踪板块,板块来开仓,板块去清仓,丢弃自以为是的想法,板块去留让…

http实现文件分片下载

文章目录 检测是否支持HTTP Range 语法Range请求cURL示例单一范围多重范围条件式分片请求 Range分片请求的响应文件整体下载文件分片下载文本下载图片下载封装下载方法 HTTP分片异步下载是一种下载文件的技术,它允许将一个大文件分成多个小块(分片&#…

[重磅来袭] 功能强大的开源数据中台系统 DataCap 1.14.0 发布

推荐一套基于 SpringBoot 开发的简单、易用的开源权限管理平台,建议下载使用: https://github.com/devlive-community/authx 推荐一套为 Java 开发人员提供方便易用的 SDK 来与 OpenAI 的 API 进行交互组件:https://github.com/devlive-community/openai…

【黄色手套22】1话:基本数据类型

目录 前提补充: first : second: 基本数据类型: 整型: 字符型 : ASCII 码表 : 浮点型: 格式占位符 : 字符型数据的输入输出: 字符输入函数: getchar();//单个字符 gets();//…

prompt 视频收集

1.ChatGPT Prompt提示词工程 ***** 常用技巧 (基本原则,格式,角色扮演)_哔哩哔哩_bilibili

C生万物之函数

前言: 📕作者简介:热爱编程的小七,致力于C、Java、Python等多编程语言,热爱编程和长板的运动少年! 📘相关专栏Java基础语法,JavaEE初阶,数据库,数据结构和算法…

Redis Cluster集群运维与核心原理剖析

Redis集群方案比较 哨兵模式 在redis3.0以前的版本要实现集群一般是借助哨兵sentinel工具来监控master节点的状态,如果master节点异常,则会做主从切换,将某一台slave作为master,哨兵的配置略微复杂,并且性能和高可用性…

Sentinel控制台配置 持久化到nacos

sentinel控制台,使用方便,功能强大。使用官方的jar包,配置不会持久化,sentinel重启后会导致,之前的规则全部丢失,下面一起改造源码实现规则数据的持久化 sentinel源码地址 (github访问太慢&am…

git-命令行显示当前目录分支

1. 打开家目录.bashrc隐藏文件,找到如下内容 forlinxubuntu:~$ vi ~/.bashrcif [ "$color_prompt" yes ]; thenPS1${debian_chroot:($debian_chroot)}\[\033[01;32m\]\u\h\[\033[00m\]:\[\033[01;34m\]\w\[\033[00m\]\$ elsePS1${debian_chroot:($debi…

Maintaining leader role through timed lease mechanism

Continuous understanding of distributed systems design On the one hand 基于定时的租约机制来保持leader角色 基于定时的租约机制来保持leader角色的设计思想是一种在分布式系统中确保高可用性和系统一致性的解决方法。 在分布式系统中,通常会有一个角色被选举…

Python 文件和正则表达式

文章目录 Python 文件和正则表达式文件打开文件读取文件直接读取 read():逐行读取采用 **for** 循环:采用 readlines(): 正则表达式匹配规则re 模块match 方法:search 方法group 方法split 方法 Python 文件和正则表达式 文件 打…

LeetCode刷题笔记【31】:动态规划专题-3(整数拆分、不同的二叉搜索树)

文章目录 前置知识343. 整数拆分题目描述解题思路代码进一步优化 96.不同的二叉搜索树题目描述解题思路代码优化改进 总结 前置知识 参考前文 参考文章: LeetCode刷题笔记【29】:动态规划专题-1(斐波那契数、爬楼梯、使用最小花费爬楼梯&…

召回和排序的样本构造问题

精排 正样本:曝光点击负样本:曝光未点击 粗排 正样本:曝光点击负样本:如果只复用精排的负样本,粗排模型对精排模型的拟合就会出现比较大的偏差。因为粗排打分高的item可能会被精排打低分,导致不能下发曝…

算法笔记——循环链表

带环链表 算法题中,会有一种题目让我们去判断链表里的是否有循环。 力扣(LeetCode)官网 - 全球极客挚爱的技术成长平台 这里就需要我们要用快慢指针来进行搜索,直接提供代码 class Solution { public:bool hasCycle(ListNode *…

openwrt上/etc/localtime报错问题解决

笔者在openwrt上使用docker 搭建为知笔记服务端的时候碰到了/etc/localtime报错问题,解决过程记录如下: docker构建命令如下 docker run --name wiz --restartalways -it -d \ -v /opt/wizdata:/wiz/storage \ -v /etc/localtime:/etc/localtime \ -p 8666:80 \ -p…

Qt开发 入门

1.Qt概述 什么是Qt 不论我们学习什么样的知识点首先第一步都需要搞明白它是什么,这样才能明确当前学习的方向是否正确,下面给大家介绍一下什么是Qt。 Qt是一个跨平台的C应用程序开发框架 具有短平快的优秀特质: 投资少、周期短、见效快、效益高几乎支持…

VM-Linux基础操作命令

目录 基础知识: Linux的组成 命令执行的本质: 通配符: 终端 1.命令提示符 1.2.命令格式 例一:查看内核 例二: 查看内核版本 例三:查看shell类型 例四:查看IP地址 2.cd命令 3.查看帮…

蓝牙核心规范(V5.4)12.3-深入详解之LE GATT安全级别特征

蓝牙篇之蓝牙核心规范(V5.4)深入详解汇总 1.知识回顾 蓝牙协议GATT(Generic Attribute Profile)是蓝牙设备间进行数据交换的标准协议之一。GATT是一种基于服务(Service)和特性(Characteristic&…

摩尔纹是什么?如何消除摩尔纹?

相信很多小伙伴在渲染的时候会遇到各种各样的问题,比如摩尔纹,一张图片如果出现摩尔纹那基本就没法用了。那摩尔纹是什么呢?为什么会出现摩尔纹?又要如何消除摩尔纹呢?这篇文章我们就来探讨下。 一、摩尔纹是什么 官方…

记LGSVL Map Annotation(2)导入点云、以及地图

导入点云 内置的点云导入器工具提供了将最流行的点云文件格式(PCD、PLY、LAS、LAZ)转换为可用于仿真的数据所需的所有功能。 要访问点云导入器窗口,请在 Unity 编辑器中打开模拟器项目,然后导航到 Simulator/Import Point Cloud…