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

PC适配移动端

**手机端适配**
媒体查询
组件统一样式  
媒体查询写四套样式 
手机 屏幕宽小于768px 
平板 屏幕宽 大于等于768px 小于992px 
桌面显示器  屏幕宽大于等于992px  小于1200px
大屏幕 屏幕宽大于等于1200px 

**页面整体及页面内容**
页面看是需要主PC还是主移动端
主移动端的话 一般需要另外做页面 然后页面渲染的时候 获取视口宽度 选择加载哪个页面
主PC端的话  中屏幕适配做样式切换
小屏幕适配做页面切换 样式切换 内容隐藏
(内容隐藏可以用css做 用css做直接display:none;  也可以用js做 用js做的话需要 页面内容也是动态渲染的 组件过滤)

**页面整体导航头适配**
中屏幕和大屏幕可以保持原有样式不变 或者在中屏幕就切换成 导航侧拉 或下拉
移动端不需要显示的页面可以过滤路由 不需要显示的块可以用css隐藏

**筛选值表单**
小屏幕可以放统一按钮  按钮侧拉或下拉里面放表单内容  

**媒体查询 **
所有css样式宽度不能写死  高度尽量不写死   
至于字体需要定义一个统一的标准 小屏幕的字号 中屏幕的字号 大屏幕的字号和超大屏幕的字号
页面布局尽量使用弹性盒子 不推荐浮动  非必要情况不定义页面样式过高的层级
页面板块边距使用外包盒子的padding充当边距 不使用margin


//bootstrap标准
/* 超小屏幕(手机,小于 768px) */
默认样式 
/* 小屏幕(平板,大于等于 768px) */
@media screen and (max-width: 768px) {}/* 中等屏幕(桌面显示器,大于等于 992px) */
@media screen and (max-width: 992px) {}/* 大屏幕(大桌面显示器,大于等于 1200px) */
@media screen and (min-width: 1200px) {}

//我们一般是先大屏幕再小屏幕适配
默认大屏幕   样式层级要和默认样式严格保持一致   大屏幕适配就要用下面这种顺序  在css中下面的权重较高

//中等
@media screen and (max-width: 1200px) {}
//平板
@media screen and (max-width: 992px) {}
//手机
@media screen and (max-width: 768px) {}

**echarts图表适配**
(包含图表内容适配和图表容器适配 容器适配需要通过媒体查询实现)
所有px单位进行转换 方法如下
 //单位转换
 

  echartsfontSize(res) {const clientWidth =window.innerWidth ||document.documentElement.clientWidth ||document.body.clientWidth;if (!clientWidth) return;const designWidth = 1920; // 设计稿宽度const minWidth = 1024; // 最小适配的屏幕宽度const screenWidth = Math.max(clientWidth, minWidth); // 当前屏幕宽度与最小适配宽度比较const fontSize = screenWidth / designWidth;return res * fontSize;},

//在图表配置项里

 label: {normal: {show: true,lineHeight: _that.echartsfontSize(20),formatter: '{c}',position: 'top',textStyle: {color: '#00D6F9',fontSize: _that.echartsfontSize(14)}}}

还有一种很古早的适配方案 就是不管那个屏幕显示的都是同一种页面样式
需要手指放大页面具体查看的那种

相关文章:

PC适配移动端

**手机端适配** 媒体查询 组件统一样式 媒体查询写四套样式 手机 屏幕宽小于768px 平板 屏幕宽 大于等于768px 小于992px 桌面显示器 屏幕宽大于等于992px 小于1200px 大屏幕 屏幕宽大于等于1200px **页面整体及页面内容** 页面看是需要主PC还是主移动端 主移动端的话…...

springboot+vue+mybatis灵活就业服务平台+PPT+论文+讲解+售后

随着网络科技的不断发展以及人们经济水平的逐步提高,网络技术如今已成为人们生活中不可缺少的一部分,而微信小程序是通过计算机技术,针对用户需求开发与设计,该技术尤其在各行业领域发挥了巨大的作用,有效地促进了灵活…...

Android 13 系统自定义安全水印

效果 源码实现 frameworks/base/services/core/java/com/android/server/am/ActivityManagerService.java public final void showSafeModeOverlay() {View v LayoutInflater.from(mContext).inflate(com.android.internal.R.layout.safe_mode, null);WindowManager.Layout…...

C# WCF服务(由于内部错误,服务器无法处理该请求。)

由于内部错误&#xff0c;服务器无法处理该请求。有关该错误的详细信息&#xff0c;请打开服务器上的 IncludeExceptionDetailInFaults (从 ServiceBehaviorAttribute 或从 <serviceDebug> 配置行为)以便将异常信息发送回客户端&#xff0c;或打开对每个 Microsoft .NET …...

利用github pages建立Serverless个人博客

利用github pages建立Serverless个人博客 概述 使用github pages&#xff0c;可以在github上部署静态网站。利用这个功能&#xff0c;可以很方便地实现个人博客的发布托管。 比如我的个人博客&#xff1a;Buttering’s Blog 对应代码仓库&#xff1a;buttering/EasyBlog: 自…...

Spring Boot 集成 sa-token 实践教程

Spring Boot 集成 sa-token 实践教程 sa-token 是一个轻量级且功能强大的权限认证框架&#xff0c;它基于Java语言&#xff0c;专为Java开发者设计&#xff0c;以简化权限管理的复杂性。在Spring Boot项目中集成sa-token&#xff0c;可以快速实现会话管理、权限控制等功能。本文…...

CSS:盒子模型

目录 ▐ box—model概述 ▐ 盒子的组成 ▐ 内容区 ▐ 内边距 ▐ 边框 ▐ 外边距 ▐ 清除浏览器默认样式 ▐ box—model概述 • CSS处理网页时&#xff0c;它认为每个标签都包含在一个不可见的盒子里. • 如果把所有的标签都想象成盒子&#xff0c;那么我们对网…...

django中的cookie与session

获取cookie request.COOKIE.GET 使用cookie response.set-cookie views.py from django.http import HttpResponse from django.shortcuts import render# Create your views here. def cookie_test(request):r HttpResponse("hello world")r.set_cookie(lan, py…...

环形链表(判断链表中是否有环)的讲解

一&#xff1a;题目 二&#xff1a;思路讲解 1&#xff1a;采用快慢指针的方法&#xff0c;一个fast指针一次移动两个节点&#xff0c;一个slow指针一次移动一个节点。 2&#xff1a;两个指针从头指针开始往后遍历&#xff0c;如果fast指针或者fast->next 有一个为空&…...

NLP(14)--文本匹配任务

前言 仅记录学习过程&#xff0c;有问题欢迎讨论 步骤&#xff1a; * 1. 输入问题 * 2. 匹配问题库&#xff08;基础资源,FAQ&#xff09; * 3. 返回答案文本匹配算法&#xff1a; 编辑距离算法(缺点) 字符之间没有语义相似度; 受无关词/停用词影响大; 受语序影响大 Jaccar…...

MySQL——系统变量

使用 #最大连接用户数 select MAX_CONNECTIONS; #临时存放构成每次事务的SQL的缓冲区长度 select BINLOG_CACHE_SIZE; #SQL Server的版本信息 select VERSION; 查询结果...

「 网络安全常用术语解读 」漏洞利用预测评分系统EPSS详解

1. 概览 EPSS&#xff08;Exploit Prediction Scoring System&#xff0c;漏洞利用预测评分系统&#xff09; 提供了一种全新的高效、数据驱动的漏洞管理功能。EPSS是一项数据驱动的工作&#xff0c;使用来自 CVE 的当前威胁信息和现实世界的漏洞数据。 EPSS 模型产生 0 到 1&…...

理解python中的Iterator 和 Iterable 迭代器和可迭代对象

为什么有些对象可以用for … in 循环 我们先看一段代码&#xff1a; list [1, 2, 3, 4, 5]for i in list:logger.info(i)这代码定义了1个数组object list, 然后用 for … in 来遍历这个list 看起来合理没什么值得注意 但其实 for … in 后面对象还可以是个String for i in …...

C语言实现动态加载.so动态库,使用,错误捕获以及卸载

动态库 概述 动态库的扩展名是.so。 动态库是被加载&#xff0c;调用的时候是根据内存地址去调用&#xff0c;而不是将代码复制到文件中。 动态库可以同时被多个进程使用。 实战案例&#xff1a;构建 libmath.so 动态库 准备源文件 calc.h 定义加法&#xff1a;int add…...

《动手学深度学习》V2(11-18)

文章目录 十一、二 模型选择与过拟合和欠拟合1、模型的选择2、过拟合和欠拟合3、估计模型容量4、线性分类器的VC维5、过拟合欠拟合的代码实现 :fire:①生成数据集②定义评估损失③定义训练函数④三阶多项式函数拟合⑤线性函数拟合(欠拟合)⑤高阶多项式函数拟合(过拟合) 十三、权…...

web前端之excel转pdf、小黄人发送请求、base64、jspdf、xlsx

MENU 前言方案一方案二结束语 前言 在前端将Excel转换为PDF有多种方案&#xff0c;本文介绍两种简单方案。 方案一 使用jspdf库&#xff0c;先将Excel文件转成Base64格式&#xff0c;然后再使用jspdf库将其转换为PDF格式&#xff0c;最后使用saveAs函数下载PDF文件。 步骤一: 安…...

【面试题】音视频流媒体高级开发(2)

面试题6 衡量图像重建好坏的标准有哪些&#xff1f;怎样计算&#xff1f; 参考答案 SNR&#xff08;信噪比&#xff09; PSNR10*log10((2n-1)2/MSE) &#xff08;MSE是原图像与处理图像之间均方误差&#xff0c;所以计算PSNR需要2幅图像的数据&#xff01;&#xff09; SSIM…...

数据与结构--堆

堆 堆的概念 堆&#xff1a;如果有一个关键码的集合K{k0,k1,k2,…,kn-1}&#xff0c;把它的所有元素按完全二叉树的顺序存储方式存储在一个一维数组中&#xff0c;并满足ki<k2i1且ki<k2i2&#xff08;或满足ki>k2i1且ki>k2i2&#xff09;&#xff0c;其中i0,1,2,…...

Github的使用教程(下载项目、寻找开源项目和上传项目)

根据『教程』一看就懂&#xff01;Github基础教程_哔哩哔哩_bilibili 整理。 1.项目下载 1&#xff09;直接登录到源码链接页或者通过如下图的搜索 通过编程语言对搜索结果进一步筛选。 如何去找开源项目&#xff1a;(Github 新手够用指南 | 全程演示&个人找项目技巧放…...

Linux-线程概念

1. 线程概念 线程&#xff1a;轻量级进程&#xff0c;在进程内部执行&#xff0c;是OS调度的基本单位&#xff1b;进程内部线程共用同一个地址空间&#xff0c;同一个页表&#xff0c;以及内存中的代码和数据&#xff0c;这些资源对于线程来说都是共享的资源 进程&#xff1a;…...

新手避坑指南:用STC89C51和DHT11搭建温湿度报警器(附Keil5代码调试心得)

从零搭建温湿度报警器&#xff1a;STC89C51与DHT11实战避坑手册 第一次接触51单片机项目时&#xff0c;那种既兴奋又忐忑的心情至今记忆犹新。看着网上的开源项目资料&#xff0c;满心以为按部就班就能成功&#xff0c;结果从元器件选型到代码烧录&#xff0c;几乎每一步都踩了…...

自动药片装瓶机 No.360 三菱 组态王 基于PLC的药片装瓶自动控制系统 我们主要的后发送...

自动药片装瓶机 No.360 三菱 组态王 基于PLC的药片装瓶自动控制系统 我们主要的后发送的产品有&#xff0c;带解释的梯形图接线图原理图图纸&#xff0c;io分配&#xff0c;组态画面车间里那些药片装瓶机&#xff0c;以前人工摆瓶子、数药片&#xff0c;慢就算了&#xff0c;…...

从“看见光点”到“看懂世界”:视觉重建让这个世界变得更近一些

三十多年前&#xff0c;“让盲人重新看见”更像一句带有未来感的科学想象。而今天&#xff0c;这件事已经进入临床试验和真实的人体研究。视觉重建之所以被视为脑机接口里最具挑战性的方向之一&#xff0c;不只是因为它要解决“能不能刺激大脑”的问题&#xff0c;更因为它要回…...

3个高效功能让视频创作者轻松生成专业字幕

3个高效功能让视频创作者轻松生成专业字幕 【免费下载链接】video-srt-windows 这是一个可以识别视频语音自动生成字幕SRT文件的开源 Windows-GUI 软件工具。 项目地址: https://gitcode.com/gh_mirrors/vi/video-srt-windows 工具概述 VideoSrt是一款基于Golang开发的…...

告别手动调参:Neural MHE如何让无人机在风扰中‘稳如老狗’

Neural MHE&#xff1a;无人机抗风扰控制的智能调参革命 四旋翼无人机在物流配送、农业喷洒、电力巡检等场景的应用日益广泛&#xff0c;但突发的风场扰动始终是飞控系统面临的严峻挑战。传统移动视界估计(MHE)虽能有效处理状态估计问题&#xff0c;却困在手动调参的泥潭中——…...

菊水PBZ40电源协议详解:从‘*IDN?’到波形设置,一份给硬件测试新人的避坑指南

菊水PBZ40电源协议实战手册&#xff1a;从基础指令到复杂波形配置的工程指南 第一次接触菊水PBZ40可编程电源时&#xff0c;面对满屏的协议指令和参数配置&#xff0c;不少硬件测试工程师都会感到无从下手。这台看似简单的设备&#xff0c;实际上隐藏着许多需要特别注意的细节…...

Windows11状态栏图标失效?手把手教你修复注册表关联(附一键脚本)

Windows 11状态栏图标失效的终极修复指南&#xff1a;从原理到实战 Windows 11以其现代化的界面设计吸引了不少用户&#xff0c;但系统自定义过程中难免会遇到各种"小脾气"。最近不少用户反馈&#xff0c;在尝试去除桌面图标小箭头后&#xff0c;状态栏的应用程序图标…...

告别‘夜盲症’:用Python+OpenCV手把手教你实现红外与可见光图像融合(附完整代码)

实战指南&#xff1a;PythonOpenCV实现红外与可见光图像融合技术 夜间监控画面总是模糊不清&#xff1f;自动驾驶系统在低光照环境下识别率骤降&#xff1f;这些问题本质上都是"视觉夜盲症"的表现。今天我们将用最实用的方式&#xff0c;带你用Python和OpenCV构建一个…...

2025年9月中国电子学会青少年软件编程(图形化)等级考试试卷(一级)答案 + 解析

25年3月一级真题在线测评&#xff1a;http://jw.52coding.site/s/mwIJDR 青少年软件编程&#xff08;图形化&#xff09;等级考试试卷&#xff08;一级&#xff09; 一、单选题(共25题&#xff0c;共50分) 1.当前舞台背景为最后一个背景“背景3”&#xff0c;使用“下一个背景”…...

KOReader 2025.04:重新定义电子墨水屏阅读

KOReader 2025.04&#xff1a;重新定义电子墨水屏阅读 【免费下载链接】koreader An ebook reader application supporting PDF, DjVu, EPUB, FB2 and many more formats, running on Cervantes, Kindle, Kobo, PocketBook and Android devices 项目地址: https://gitcode.co…...