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

html页面缩放自适应

news 2026/3/30 6:28:28

html页面缩放自适应

一、为什么页面要进行缩放自适应

在我们一般web端进行页面拼接完成后，在web端的显示正常（毕竟我们是按照web端进行页面拼接完成的），那么要是用其他设备打开呢，比如手机或者平板，这时候显示的比例和尺寸跟我们看到的就大相径庭了。

由于手机屏幕尺寸不一样，分辨率不一样，或者你需要考虑横竖屏的问题，这时候你也就不得不解决在不同手机上，不同情况下的展示效果了。

另外一点，UI一般输出的视觉稿只有一份，比如淘宝就会输出：750px 宽度的（高度是动态的一般不考虑）（详情），这时候开发人员就不得不针对这一份设计稿，让其在不同屏幕宽度下显示 一致。

这样做的好处在于：

  1. 降低了开发成本**：**原本要涉及iOS、Android、PC（PC和Mac用同一套Qt实现）、H5这4个端的开发人员，现在采用内嵌页的方式，可以做到完全不涉及移动端和桌面端，或者仅是入口放置这类比较简单的工作。
  2. 降低了维护成本：如果有优化调整，可以只改H5页面，不用各个端都动手。

举个栗子：

在 1080px 的视觉稿中，左上角有个logo，宽度是 180px（高度问题同理可得）。

那么logo在不同的手机屏幕上等比例显示应该多大尺寸呢？

其实按照比例换算，我们大致可以得到如下的结果：

在CSS像素是 375px 的手机上，应该显示多大呢？结果是：375px * 180 / 1080 = 62.5px
在CSS像素是 360px 的手机上，应该显示多大呢？结果是：360px * 180 / 1080 = 60px
在CSS像素是 320px 的手机上，应该显示多大呢？结果是：320px * 180 / 1080 = 53.3333px

在这里插入图片描述

二、自适应需要解决什么问题

主要有如下几个问题：

元素自适应问题
文字rem问题
高清图问题
1像素问题
横竖屏显示问题
手机字体缩放问题

这些问题具体分析可以看看这篇网上文章（未测试）：移动端H5解惑-页面适配_h5移动端适配原理-CSDN博客

三、屏幕适配方案

到目前为止，开始实操一种方式进行简单的屏幕适配操作，以达到想要的界面效果！

适用框架：Vue2/Vue3
适用设备：pc端/移动端
适配策略：动态rem+动态scale
方案效果：可让页面在不同屏幕下、放大缩小时保持页面不变形

屏幕拉伸：

动图

项目配置：

Vue项目中使用postcss-pxtorem插件自动化px转rem的过程。

要在 Vue 项目中使用 postcss-pxtorem，你需要按照以下步骤操作：

  1. 安装 postcss-pxtorem：
npm install postcss-pxtorem --save
  1. 新建 rem.js 文件，内容为：
const baseSize = 14;function setRem() {const scale = document.documentElement.clientWidth / 750;document.documentElement.style.fontSize =baseSize * Math.min(scale, 1.2) + "px";
}setRem();
window.onresize = function() {setRem();
}
  1. 在main.js中导入rem.js文件：
import "./config/rem";
  1. 在vite.config.js中添加
import path from 'path'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import postCssPxToRem from 'postcss-pxtorem'// https://vitejs.dev/config/
export default defineConfig({plugins: [vue(),AutoImport({resolvers: [ElementPlusResolver()]}),Components({resolvers: [ElementPlusResolver()],}),],resolve: {// 配置路径别名alias: {'@': path.resolve(__dirname, './src'),},},css:{postcss:{plugins:[postCssPxToRem({rootValue:14,propList:['*'],})]}},server:{host:'0.0.0.0'}
})
  1. 在index.html添加：
<head>...<meta name="viewport" content="width=device-width, initial-scale=1.0" />...
</head>

配置好后就可以直接在css文件中用px单位

相关文章：

html页面缩放自适应

html页面缩放自适应 一、为什么页面要进行缩放自适应 在我们一般web端进行页面拼接完成后&#xff0c;在web端的显示正常&#xff08;毕竟我们是按照web端进行页面拼接完成的&#xff09;&#xff0c;那么要是用其他设备打开呢&#xff0c;比如手机或者平板&#xff0c;这时候…...

编程日记 2024/8/16 16:14:11

024.自定义chormium-修改屏幕尺寸

自定义chormium-修改屏幕尺寸 屏幕尺寸信息雷同太大&#xff0c;用作指纹信息&#xff0c;作用不多。 但多个类似小信息组合在一起的话&#xff0c;也就是成唯一指纹了。积少成多吧。 一、如何使用js获取屏幕信息 将下面的代码复制进F12控制台 console.log("screen.widt…...

编程日记 2024/8/16 16:11:07

测试环境搭建整套大数据系统（十九：kafka3.6.0单节点做 sasl+acl）

1. 增加配置配文件信息 vim /opt/kafka_2.13-3.6.1/config/server.properties listenersPLAINTEXT://192.168.50.240:9092,OUTER://192.168.50.240:9094# Listener name, hostname and port the broker will advertise to clients. # If not set, it uses the value for &quo…...

编程日记 2024/8/16 16:10:06

小白零基础学数学建模应用系列(五）：任务分配问题优化与求解

文章目录 一. 分配问题1.1 问题背景1.2 假设条件1.3 问题要求1.4 数学建模 二. 实际案例2.1 问题背景2.2 假设条件2.3 问题要求2.4 模型建立2.5 求解代码2.6 结果分析2.6.1 分配方案的解释2.6.2 总时间的优化2.6.3 潜在的现实应用 一. 分配问题 1.1 问题背景 分配问题&#x…...

编程日记 2024/8/16 16:06:01

怎么防止源代码泄露？十种方法杜绝源代码泄密风险

源代码是软件开发的核心资产之一&#xff0c;保护其不被泄露对企业的安全至关重要。源代码泄露不仅可能导致知识产权的丧失&#xff0c;还可能给企业带来经济损失和品牌形象的损害。以下是十种有效的方法&#xff0c;可以帮助企业杜绝源代码泄密的风险。 1. 代码加密 对源代码…...

编程日记 2024/8/16 16:00:53

uniapp left right 的左右模态框

标题 这是组件 <template><div class"content-wrapper"><divv-for"(vla, i) in products":key"i":class"[content-page, getPageClass(i)]"><slot :data"vla"><!-- 用户自定义的内容 --><…...

编程日记 2024/8/16 15:58:51

Docker Compose与私有仓库部署

一、Docker Compose工具 1.1什么是Docker Compose Docker Compose 的前身是 Fig&#xff0c;它是一个定义及运行多个 Docker 容器的工具。使用Docker Compose 时&#xff0c;只需要在一个配置文件中定义多个 Docker 容器&#xff0c;然后使用一条命令启 动这些容器。Docker Co…...

编程日记 2024/8/16 15:57:50

Layout 布局组件快速搭建

文章目录 设置主题样式变量封装公共布局组件封装 Logo 组件封装 Menu 菜单组件封装 Breadcrumb 面包屑组件封装 TabBar 标签栏组件封装 Main 内容区组件封装 Footer 底部组件封装 Theme 主题组件 经典布局水平布局响应式布局搭建 Layout 布局组件添加 Layout 路由配置启动项目 …...

编程日记 2024/8/16 15:56:49

北京城市图书馆-非遗文献馆：OLED透明拼接屏的璀璨应用

在数字化与传统文化深度融合的今天&#xff0c;北京城市图书馆的非遗文献馆以一场前所未有的视觉盛宴&#xff0c;向世人展示了OLED透明拼接屏的非凡魅力与无限可能。这座集阅读、展示、体验于一体的非遗文献馆&#xff0c;通过2*7布局的OLED透明拼接屏&#xff0c;不仅为传统非…...

编程日记 2024/8/16 15:55:48

OpenCV图像滤波(12)图像金字塔处理函数pyrDown()的使用

操作系统&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 编程语言&#xff1a;C11 算法描述 函数主要是对图像进行模糊处理并将其降采样。 默认情况下&#xff0c;输出图像的大小计算为 Size((src.cols1)/2, (src.rows1)/2)&#xff0c;但…...

编程日记 2024/8/16 15:53:44

css如何使一个盒子水平垂直居中

方法一&#xff1a;利用定位(常用方法,推荐&#xff09; <style> .parent{width: 500px;height: 500px;border: 1px solid #000;position:relative; }.child {width: 100px;height: 100px;border: 1px solid #999;position:absolute;top: 50%;left: 50%;margin-top: -50…...

编程日记 2024/8/16 15:52:43

机器人等方向学习和研究的目标

核心目标类似&#xff1a; 学习一个知识点用时越来越短&#xff0c;研究一个系统效率越来越高。 目标 没有目标是常态&#xff0c;十分普遍。 但其实&#xff0c;目标也可以很宽泛。 感谢朋友们一直以来的鼓励帮助&#xff0c;倍感荣幸&#xff0c;非常感谢。-CSDN blink-…...

编程日记 2024/8/16 15:50:41

封装一个细粒度的限流器

文章目录 原因限流对象限流后的做法怎么确定限流阈值观测业务性能数据压测借鉴链路上的其他服务手动计算 四种静态限流算法令牌桶漏桶固定窗口与滑动窗口 手写限流算法令牌桶漏桶固定窗口滑动窗口 分布式限流的具体实现 原因 尽管云原生网关里有统一入口的限流&#xff08;根据…...

编程日记 2024/8/16 15:46:35

【Spring Boot - 注解】@ResponseBody 注解：处理 JSON 响应

文章目录 一、ResponseBody 注解概述1. 注解的功能2. 主要功能 二、ResponseBody 的工作原理1. 接口定义2. 消息转换器3. 自动配置与默认行为 三、ResponseBody 的应用场景1. RESTful API 的实现2. 返回复杂数据结构3. 错误处理和异常处理 四、ResponseBody 的配置和自定义1. 自…...

编程日记 2024/8/16 15:45:34

无人机航拍与ArcGIS融合实战：从地表观测到空间数据可视化的全方位指南！无人机图像拼接数据处理与分析、可视化与制图

目录 第一章 无人机航拍基本流程、航线规划与飞行实践 第二章 无人机图像拼接软件的学习与操作实践 第三章 无人机图像拼接典型案例详解 第四章 无人机图像拼接数据在GIS中的处理与分析 第五章 无人机图像拼接数据在GIS中的可视化与制图 第六章 综合案例:无人机航拍植被动…...

编程日记 2024/8/16 15:44:33

日期转时间濯

tfunction(date_str) local code ,time World:getTimeFromDateString(date_str) return time/(60*60*24) end print(t(2024-08-16)-t(2024-08-3))...

编程日记 2024/8/16 15:42:31

【计算机网络】TCP实战

其实有了UDP的基础&#xff0c;TCP不管怎么说学习起来都还是比较舒服的&#xff0c;至少是比直接就学习TCP的感觉好。 这篇文章最多就是介绍一下起手式&#xff0c;如果想带业务的话和UDP那篇是完全一样的&#xff0c;就不进行演示了。 总的来说还是很简单的。 目录 Echo服务端…...

编程日记 2024/8/16 15:37:25

使用Python制作贪吃蛇小游戏

引言 贪吃蛇游戏是一款经典的电子游戏&#xff0c;玩家通过控制一条不断增长的蛇在格子内移动&#xff0c;并吃掉随机出现的食物来获得分数。随着分数的增加&#xff0c;蛇的身体也会越来越长&#xff0c;游戏的难度也随之提升。在本文中&#xff0c;我们将详细介绍如何使用Py…...

编程日记 2024/8/16 15:36:24

线程的退出

方式1 pthread_exit Void pthread_exit (void *retval) 功能&#xff1a; 结束调用的线程 参数&#xff1a; retval //退出状态值 //需要传的是&#xff0c;退出状态值的地址 注意&#xff1a; 1.pthread_exit 本身表示结束线程 如果用在main函数中 表示结束主线程…...

编程日记 2024/8/16 15:35:21

【AI 绘画】Q版人物定制生成

AI 绘画-PulID手办定制 1. 效果展示 本次测试主要结果展示如下： 牛仔风 古风 2. 基本原理 PuLID是一种类似于 ip-adapter 的恢复面部特征的方法。它同时使用 insightface 嵌入和 CLIP 嵌入，类似于 ip-adapter faceid plus 模型所做的。但是，在将图像传递给 CLIP 之前，还…...

编程日记 2024/8/16 15:32:12

OpenClaw飞书机器人配置：Qwen3-32B私有镜像对话触发详解

OpenClaw飞书机器人配置&#xff1a;Qwen3-32B私有镜像对话触发详解 1. 为什么选择OpenClaw飞书Qwen3-32B组合 去年底我开始尝试用AI自动化处理团队日常事务时&#xff0c;发现市面上大多数方案要么需要将敏感数据上传到第三方平台&#xff0c;要么只能完成简单的问答交互。直…...

编程新知 2026/3/30 4:29:45

OpenClaw+nanobot故障排查：模型加载失败的5种解决方法

OpenClawnanobot故障排查&#xff1a;模型加载失败的5种解决方法 1. 问题背景与排查思路 上周我在本地部署nanobot镜像时&#xff0c;遇到了模型加载失败的问题。这个镜像内置了Qwen3-4B-Instruct-2507模型&#xff0c;理论上应该开箱即用&#xff0c;但实际启动时却卡在了vL…...

编程新知 2026/3/30 4:19:28

OpenClaw技能市场巡礼：百川2-13B-4bits模型适配的10个实用插件

OpenClaw技能市场巡礼&#xff1a;百川2-13B-4bits模型适配的10个实用插件 1. 为什么选择百川2-13B-4bits作为OpenClaw的推理引擎 去年冬天我第一次尝试将量化模型接入OpenClaw时&#xff0c;显存不足的报错让我在MacBook Pro前坐了整整三个晚上。直到遇到百川2-13B-4bits这个…...

编程新知 2026/3/30 4:11:23

AsyncAPI消息版本兼容性终极指南：如何优雅处理API变更

AsyncAPI消息版本兼容性终极指南&#xff1a;如何优雅处理API变更 【免费下载链接】spec The AsyncAPI specification allows you to create machine-readable definitions of your asynchronous APIs. 项目地址: https://gitcode.com/gh_mirrors/spec/spec AsyncAPI是描…...

编程新知 2026/3/30 3:37:04

韩式健康板供应商筛选：企业采购决策策略深度解析

韩式健康板供应商筛选&#xff1a;企业采购决策6步策略&#xff0c;避开80%行业坑点“韩式健康板供应商筛选不是只看价格&#xff0c;掌握6个关键步骤才能选到靠谱伙伴”——这是行业内资深采购的共识。本文针对企业采购韩式健康板的核心痛点&#xff0c;从需求梳理到持续监控&…...

编程新知 2026/3/30 1:11:57

一、Cisco（静态端口映射实战：从零搭建外网可访问的多服务内网环境）

1. 环境准备与拓扑设计 第一次接触端口映射时&#xff0c;我也被那些专业术语搞得晕头转向。直到自己动手在Cisco Packet Tracer里搭了一套环境&#xff0c;才发现原来原理这么简单。这次我们就用最基础的设备&#xff0c;还原企业里常见的多服务发布场景。 实验设备清单就像搭…...

编程新知 2026/3/30 0:09:26

Python内存修复不靠猜：用objgraph+gc.get_referrers+自定义Allocator实现可视化追踪（工业级方案）

第一章&#xff1a;Python内存修复不靠猜&#xff1a;用objgraphgc.get_referrers自定义Allocator实现可视化追踪&#xff08;工业级方案&#xff09;Python内存泄漏常表现为对象持续增长却无法被回收&#xff0c;传统日志与print调试效率低下。本章提供一套可落地的工业级诊断…...

编程新知 2026/3/29 23:59:24

WebRtcStreamer避坑指南：解决RTSP视频流延迟高、卡顿的7个优化方案

WebRTCStreamer实战优化&#xff1a;7种方案彻底解决RTSP流媒体高延迟与卡顿问题 当我们在监控系统或视频会议中遇到画面卡成PPT、声音延迟到像看译制片时&#xff0c;那种抓狂感技术人员都懂。最近在部署某智慧园区项目时&#xff0c;我们通过WebRTCStreamer将200路RTSP监控流…...

编程新知 2026/3/29 23:49:20

太阳能电池阵列监测实战：用AMC1301搞定200V共模电压下的单体电压采集

太阳能电池阵列单体电压监测&#xff1a;基于AMC1301的高压隔离采集方案设计指南 光伏电站的电池阵列通常由数十至数百块单体电池串联组成&#xff0c;系统电压可达600-1500V。在这种高压堆叠场景下&#xff0c;如何准确监测每块单体电池的电压&#xff08;通常仅0.5-0.7V&…...

编程新知 2026/3/29 22:47:00

深度解析Wiki.js操作日志系统：构建企业级安全监控的完整方案

深度解析Wiki.js操作日志系统&#xff1a;构建企业级安全监控的完整方案 【免费下载链接】wiki- Wiki.js | A modern and powerful wiki app built on Node.js 项目地址: https://gitcode.com/GitHub_Trending/wiki78/wiki- 当团队协作编辑Wiki内容时&#xff0c;你是否…...

编程新知 2026/3/29 22:38:52