当前位置: 首页 > 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;…...

3层防护构建个人AI助手: Maid跨平台应用的隐私与体验革新

3层防护构建个人AI助手&#xff1a; Maid跨平台应用的隐私与体验革新 【免费下载链接】maid Maid is a free and open source application for interfacing with llama.cpp models locally, and with Anthropic, DeepSeek, Ollama, Mistral and OpenAI models remotely. 项目…...

5步搞定Qwen3-Embedding-4B向量服务:SGlang部署亲测有效

5步搞定Qwen3-Embedding-4B向量服务&#xff1a;SGlang部署亲测有效 1. Qwen3-Embedding-4B模型简介 1.1 模型核心能力 Qwen3-Embedding-4B是通义实验室推出的新一代文本嵌入模型&#xff0c;专为高效语义编码设计。作为Qwen3系列的一员&#xff0c;它在保持中等参数规模&am…...

【深度剖析】从libgomp TLS内存分配冲突到scikit-learn在ARM平台的兼容性优化

1. ARM架构下TLS内存分配的底层原理 当你在ARM服务器上跑scikit-learn模型时&#xff0c;突然蹦出"cannot allocate memory in static TLS block"错误&#xff0c;这背后其实是线程本地存储&#xff08;TLS&#xff09;在作祟。想象每个线程都有自己专属的储物柜&…...

python协同过滤算法的基于python二手物品交易网站系统

目录同行可拿货,招校园代理 ,本人源头供货商协同过滤算法在二手物品交易网站中的应用用户行为数据收集基于用户的协同过滤基于物品的协同过滤混合推荐策略冷启动问题处理实时推荐更新推荐结果评估代码实现示例系统功能整合性能优化项目技术支持源码获取详细视频演示 &#xff1…...

OFA-COCO蒸馏版部署教程:Windows WSL2环境下PyTorch服务调试全流程

OFA-COCO蒸馏版部署教程&#xff1a;Windows WSL2环境下PyTorch服务调试全流程 1. 引言&#xff1a;为什么选择OFA图像描述模型&#xff1f; 你有没有遇到过这样的场景&#xff1f;手头有一堆图片&#xff0c;需要为它们配上文字说明&#xff0c;一张张手动写描述&#xff0c…...

余姚加工中心编程培训排行榜单

舜龙模具数控培训执行标准&#xff1a;学习进度一对一、培训一人、合格一人、成就一人&#xff1b;舜龙自有模具工厂&#xff0c;全程实战教学&#xff0c;所学贴合岗位实操&#xff0c;毕业即可对接就业。1998年-2026年&#xff0c;舜龙28年匠心传承。舜龙模具数控培训&#x…...

Python智能内存回收实战:3种GC策略对比+4个生产级调优参数配置(附压测数据)

第一章&#xff1a;Python智能体内存管理策略生产环境部署在高并发、长生命周期的Python智能体服务中&#xff0c;内存管理直接影响系统稳定性与响应延迟。默认的CPython引用计数循环垃圾回收&#xff08;GC&#xff09;机制在动态对象频繁创建销毁的场景下易引发内存抖动和不可…...

**雾计算中的边缘智能:基于Python的轻量级任务调度系统设计与实现**在物联网(IoT)飞速发展的今天,传统云

雾计算中的边缘智能&#xff1a;基于Python的轻量级任务调度系统设计与实现 在物联网&#xff08;IoT&#xff09;飞速发展的今天&#xff0c;传统云计算模式已难以满足低延迟、高带宽和实时响应的需求。**雾计算&#xff08;Fog Computing&#xff09;**作为云与终端设备之间的…...

深入解析单片机通信协议:1-Wire与UART的实战应用

1. 1-Wire协议&#xff1a;从DHT11温湿度传感器说起 第一次接触1-Wire协议是在一个智能农业项目中&#xff0c;当时需要低成本监测大棚温湿度。DHT11这个20块钱的小模块让我印象深刻——只需要一根数据线就能同时传输温度和湿度数据。这种单线通信的神奇之处在于&#xff0c;它…...

Go Context 取消信号传播机制剖析

Go Context 取消信号传播机制剖析 在并发编程中&#xff0c;如何优雅地控制协程的生命周期是一个关键问题。Go语言通过Context机制提供了一种统一的取消信号传播方式&#xff0c;使得跨协程、跨层级的任务取消变得简单高效。本文将深入剖析Context的取消信号传播机制&#xff…...