移动端布局
参考链接:抖音-移动端适配
一、移动端布局
-
flexible+postcss-pxtorem
vue-h5-template- 老版本:动态去计算scale,并不影响rem的计算,好处是解决了1px的问题,但是第三方库一般都用dpr为1去做的,这就导致地图或者图标变小,另外老版本对android不支持高清方案,是个缺陷。
- 新版本:新版本2.0里面则去掉了动态计算scale的方式,改为检测是否支持0.5px的特性,通过添加类名hairlines来向下兼容。
body的font-size大小和dpr有关系,dpr=1则为12px, dpr=2,则为24px,dpr=3,为36px。
flexible的变化参考链接
- hotcss.js
hotcss移动端布局
demo示例 - viewport+postcss-px-to-viewport 适配方案
vue-h5-template - 媒体查询@media
二、1px问题解决:
主要是因为设计图的1px和我们实际效果出来的不一致,dpr为2的屏幕1px里其实渲染了2个物理像素,导致会很粗,我们只需要它渲染1个物理像素,也就是0.5px。
- border-image
- background-image
- transform:scale(0.5) (推荐)
- svg
- 设置viewport
相关文章:
移动端布局
参考链接:抖音-移动端适配 一、移动端布局 flexiblepostcss-pxtorem vue-h5-template 老版本:动态去计算scale,并不影响rem的计算,好处是解决了1px的问题,但是第三方库一般都用dpr为1去做的,这就导致地图或…...
前端无感登录,大文件上传
后端设置token的一个失效时间,前端在token失效后不用重新登录 1,在相应中拦截,判断token返回过期后,调用刷新token的方法 2,后端返回过期的时间,前端判断过期的时间,然后到期后调用对应的方法…...
Spring Boot系列03--自动配置原理
目录1. 相关注解2. 自动配置原理分析3. 自动配置图示Spring Boot的核心优势:自动装配、约定大于配置。 1. 相关注解 ConfigurationProperties(prefix "前缀名")该注解用于自动配置的绑定,可以将application.properties配置中的值注入到 Bean…...
Java多线程(四)---并发编程容器
1.经常使用什么并发容器,为什么?答:Vector、ConcurrentHashMap、HasTable一般软件开发中容器用的最多的就是HashMap、ArrayList,LinkedList ,等等但是在多线程开发中就不能乱用容器,如果使用了未加锁&#…...
Apache Hadoop生态部署-Flume采集节点安装
目录 Apache Hadoop生态-目录汇总-持续更新 一:安装包准备 二:安装与常用配置 2.1:下载解压安装包 2.2:解决guava版本问题 2.3:修改配置 三:修复Taildir问题 3.1:Taildir Source能断点续…...
【OpenFOAM】-算例解析合集
【OpenFOAM】-算例解析合集OlaFlowinterFoamOlaFlow 【OpenFOAM】-olaFlow-算例1- baseWaveFlume 【OpenFOAM】-olaFlow-算例2- breakwater 【OpenFOAM】-olaFlow-算例3- currentWaveFlume 【OpenFOAM】-olaFlow-算例4- irreg45degTank 【OpenFOAM】-olaFlow-算例5- oppositeS…...
数据库|(一)数据库和SQL概述
(一)数据库和SQL概述1.1 数据库的好处1.2 数据库的概念1.3 数据库结构特点1.1 数据库的好处 实现数据持久化使用完整的管理系统统一管理,便于查询 1.2 数据库的概念 DB 数据库(database),存储数据的仓库&…...
【java基础】自定义类
文章目录基本介绍自定义类字段方法构造器main方法基本介绍 什么是类这里就不过多赘述了,这里来介绍关于类的几个名词 类是构造对象的模板或蓝图由类构造对象的过程称为创建类的实例封装就是将数据和行为组合在一个包中,并对对象的使用者隐藏具体的实现…...
7、STM32 FSMC驱动SRAM
本次使用CubeMx配置FSMC驱动SRAM,XM8A51216 IS62WV51216 原理图: 注意:FSMC_A0必须对应外部设备A0引脚 一、FSMC和FMC区别 FSMC:灵活的静态存储控制器 FMC:灵活存储控制器 区别:FSMC只能驱动静态存储控制器(如&…...
七、虚拟机栈
虚拟机栈出现的背景 1.由于跨平台性的设计,Java的指令都是根据栈来设计的,不同平台CPU架构不同,所以不能设计为基于寄存器的。 2.优点是跨平台,指令集小,编译器容易实现,缺点是性能下降,实现同…...
Linux其他常用命令
Linux其他常用命令查找文件find 命令功能非常强大,通常用在特定目录下搜索符合条件的文件如果省略路径,表示在当前文件夹下查找之前学习的通配符,在使用 find 命令时同时可用演练目标1.搜索桌面目录下,文件名包含1的文件find Desk…...
一次性打包学透 Spring
不知从何时开始,Spring 这个词开始频繁地出现在 Java 服务端开发者的日常工作中,很多 Java 开发者从工作的第一天开始就在使用 Spring Framework,甚至有人调侃“不会 Spring 都不好意思自称是个 Java 开发者”。 之所以出现这种局面…...
1080T、2080T、4070T显卡的深度学习性能测试和结论
先说结论: 4070T显卡FP32的训练和推理速度跟3090应该基本类似。但由于显存12G偏低,4070T不太适合如今的深度学习模型训练(新手列外,大部分模型都能训练起来,耗电也相对很低),更适合测试最新的一…...
SpringBoot搭建SpringMVC项目
前言据我的了解,现在不管是大公司或是小公司,如果使用java开发一个web项目,大部分都会选择使用SpringBoot,关于Springboot的好处,就不在这里过多赘述,总之Springboot有一套完整的生态,从项目构建…...
Prescriptive Analytics for Flexible Capacity Management
3 本节根据Netessine等人(2002年)和Bassok等人(1999年)对我们解决的容量规划问题进行了正式描述。考虑一家以pi(I1,…,I)的单价提供I服务的公司。在每个计划周期t∈{1,……...
超简单的待办事项列表管理器todo
什么是 todo ? todo 是一个自托管的 todo web 应用程序,可让您以简单且最少的方式跟踪您的 todo。📝 老苏觉得和之前介绍的 KissLists 比较像 文章传送门:最简单的共享列表服务器KissLists 官方提供了 Demo 演示站点:https://tod…...
在C#中初测OpencvSharp4
一、配置OpenCV 首先,我们新建一个工程,然后就是给这个工程配置OpenCV了,最简单的方法还是Nuget,来我们右键一个Nuget: 打开Nuget后,你可以直接输入OpenCVSharp4来查找,当然,如果你…...
洛谷P1123 取数游戏(C++)(DFS)
目录 1.题目 题目描述 输入格式 输出格式 输入输出样例 说明/提示 2.AC 1.题目 题目描述 一个N \times MNM的由非负整数构成的数字矩阵,你需要在其中取出若干个数字,使得取出的任意两个数字不相邻(若一个数字在另外一个数字相邻88个格…...
Python Qt6快速入门-嵌入PyQtGraph图表
嵌入PyQtGraph 文章目录 嵌入PyQtGraph1、PyQtGraph介绍2、创建PyQtGraph小部件3、绘图样式配置3.1 背景颜色3.2 线条颜色、线宽和样式配置3.3 线标记(Line Markers)3.4 绘制标题3.5 轴标题3.6 图例(Legends)3.7 轴范围限制3.8 绘制多组数据3.10 画布清空4、更新数据5、总结1、…...
Mac电脑_GitHub提交项目至仓库
第一步(准备工作): Mac 电脑自带 git , 无需安装 1. 创建一个项目 demo1 在 github 上 2. 创建 ssh 密钥 打开终端: ssh-keygen -t rsa -C "your_emailyouremail.com" 此处输入两次密码, 直接…...
网络编程(Modbus进阶)
思维导图 Modbus RTU(先学一点理论) 概念 Modbus RTU 是工业自动化领域 最广泛应用的串行通信协议,由 Modicon 公司(现施耐德电气)于 1979 年推出。它以 高效率、强健性、易实现的特点成为工业控制系统的通信标准。 包…...
龙虎榜——20250610
上证指数放量收阴线,个股多数下跌,盘中受消息影响大幅波动。 深证指数放量收阴线形成顶分型,指数短线有调整的需求,大概需要一两天。 2025年6月10日龙虎榜行业方向分析 1. 金融科技 代表标的:御银股份、雄帝科技 驱动…...
eNSP-Cloud(实现本地电脑与eNSP内设备之间通信)
说明: 想象一下,你正在用eNSP搭建一个虚拟的网络世界,里面有虚拟的路由器、交换机、电脑(PC)等等。这些设备都在你的电脑里面“运行”,它们之间可以互相通信,就像一个封闭的小王国。 但是&#…...
黑马Mybatis
Mybatis 表现层:页面展示 业务层:逻辑处理 持久层:持久数据化保存 在这里插入图片描述 Mybatis快速入门  g++ helloSLAM.cpp ./a.out运行 二、使用cmake编译 mkdir build cd build cmake .. makeCMakeCache.txt 文件仍然指向旧的目录。这表明在源代码目录中可能还存在旧的 CMakeCache.txt 文件,或者在构建过程中仍然引用了旧的路…...
比较数据迁移后MySQL数据库和OceanBase数据仓库中的表
设计一个MySQL数据库和OceanBase数据仓库的表数据比较的详细程序流程,两张表是相同的结构,都有整型主键id字段,需要每次从数据库分批取得2000条数据,用于比较,比较操作的同时可以再取2000条数据,等上一次比较完成之后,开始比较,直到比较完所有的数据。比较操作需要比较…...
【LeetCode】3309. 连接二进制表示可形成的最大数值(递归|回溯|位运算)
LeetCode 3309. 连接二进制表示可形成的最大数值(中等) 题目描述解题思路Java代码 题目描述 题目链接:LeetCode 3309. 连接二进制表示可形成的最大数值(中等) 给你一个长度为 3 的整数数组 nums。 现以某种顺序 连接…...
django blank 与 null的区别
1.blank blank控制表单验证时是否允许字段为空 2.null null控制数据库层面是否为空 但是,要注意以下几点: Django的表单验证与null无关:null参数控制的是数据库层面字段是否可以为NULL,而blank参数控制的是Django表单验证时字…...
客户案例 | 短视频点播企业海外视频加速与成本优化:MediaPackage+Cloudfront 技术重构实践
01技术背景与业务挑战 某短视频点播企业深耕国内用户市场,但其后台应用系统部署于东南亚印尼 IDC 机房。 随着业务规模扩大,传统架构已较难满足当前企业发展的需求,企业面临着三重挑战: ① 业务:国内用户访问海外服…...
