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

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

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

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

相关文章

探索设计模式的魅力:权力集中,效率提升,中心化模式的优势与挑战

​🌈 个人主页:danci_ 🔥 系列专栏:《设计模式》 💪🏻 制定明确可量化的目标,坚持默默的做事。 ✨欢迎加入探索中心化模式之旅✨ 大家好啊!👋 这次我们要聊的是IT界一…

AI绘画动漫转真人详细教程

从小到大,我们看过的动漫、玩过的游戏有很多很多 但我们会发现里面的角色或者人物都是二次元的 我就会好奇这些动漫人物在现实中会长什么样 而现在,我们通过AI绘画竟然就能还原出来他们现实中的样子 除了动漫角色和游戏人物,古代的画像、经典…

day11-StreamFile

1.Stream流 1.1 体验Stream流 需求:按照下面的要求完成集合的创建和遍历 创建一个集合,存储多个字符串元素 把集合中所有以"杨"开头的元素存储到一个新的集合 把"杨"开头的集合中的长度为3的元素存储到一个新的集合 遍历上一步得到…

【笔记】从零开始做一个男性人体的流程/躯干篇(超级详细)

躯干整体 大体 1.创建一个正方体,摆好位置 2.实例呀啥的都搞好 3.胸部它是一个前窄后宽的结构 斜方肌 臀部 1.臀部是前宽后窄的结构 2.我们再去侧面调整以下 胸椎向上倾斜,盆骨向下倾斜。脊椎是s形的 3.真实的身体没有这么方正,所以微调…

青少年软件编程(Python)等级考试试卷(三级)2024年3月

2024.03电子学会青少年软件编程(Python)等级考试试卷(三级) 一、单选题 1.在 Python 中,hex(2023)的功能是? ( ) A.将十进制数 2023 转化为十六进制数 B.将十进制数 2023 转化为八进制数 C.将十六进制数 2023…

第四步->手撕spring源码之bena注入实现和依赖

本步骤目标 上述几个步骤 定义和注册Bean (opens new window)、实例化Bean (opens new window),按照是否包含构造函数实现不同的实例化策略 (opens new window),那么在创建对象实例化这我们还缺少什么?其实还缺少一个关于类中是否有属性的问题…

Android 13.0 系统限制上网系列之iptables用IOemNetd实现app某个时间段禁止上网的功能实现

1.前言 在13.0的系统rom定制化开发中,对于系统限制网络的使用的这块需求开发中,在system中netd网络这块的产品需要中,会要求设置app某个时间段禁止上网的功能, liunx中iptables命令也是比较重要的,接下来就来在IOemNetd这块实现app某个时间段禁止上网的的相关功能,就是在…

ctfshow web274

web274 thinkphp框架序列化漏洞 EXP <?php namespace think; abstract class Model{protected $append[];private $data[];function __construct(){$this->append["lin">["ctf","show"]];$this->data["lin">new Req…

Linux is命令参数和选项

在Linux系统中&#xff0c;命令行是一个非常重要且强大的工具&#xff0c;能够通过命令来完成各种任务。在使用Linux命令时&#xff0c;命令通常会有一些参数和选项&#xff0c;它们可以对命令的行为进行指定和调整&#xff0c;让我们更灵活地使用命令。 首先&#xff0c;让我…

前端笔记-day02

文章目录 01-无序列表02-有序列表03-定义列表04-表格06-表格-合并单元格07-表单-input08-表单-input占位文本09-表单-单选框10-表单-上传多个文件11-表单-多选框12-表单-下拉菜单13-表单-文本域14-表单-label标签15-表单-按钮16-无语义-span和div17-字体实体19-注册登录页面 01…

JavaScript Dom 事件绑定与处理

JavaScript中的DOM事件是在HTML元素上发生的特定动作或事件。事件可以是鼠标点击、键盘按下、窗口调整大小等。JavaScript提供了一系列的方法来处理或绑定这些事件。 事件绑定 在JavaScript中&#xff0c;可以通过以下几种方法来绑定事件&#xff1a; 使用HTML属性&#xff1…

Gitee仓库创建与使用

Gitee仓库创建与使用 git config --global user.name 用户名 git config --global user.email 邮箱# 添加.gitignore git config --global core.excludesfile ~/.gitignore# 初始化仓库 cd myproject git init# 添加远程仓库&#xff0c;首次 git remote add origin https:…

LeetCode 题目 121:买卖股票的最佳时机

作者介绍&#xff1a;10年大厂数据\经营分析经验&#xff0c;现任字节跳动数据部门负责人。 会一些的技术&#xff1a;数据分析、算法、SQL、大数据相关、python&#xff0c;欢迎探讨交流 欢迎加入社区&#xff1a;码上找工作 作者专栏每日更新&#xff1a; LeetCode解锁1000题…

MySQL优化-03索引

索引 一.索引的作用 一个索引就是一颗B树&#xff0c;索引让我们可以快速定位和扫描到我们想要的数据&#xff0c;增加查询速度。在一个select查询语句中最多用到一个二级索引&#xff0c;即使在where条件中使用了多个二级索引。 二.InnoDB存储引擎支持的索引 B树索引、哈希索…

Rust :给数据类型起一个别名

在 Rust 中&#xff0c;你可以为类型定义别名&#xff0c;以便简化代码和提高可读性。类型别名使用 type 关键字来定义。这在你想要给复杂的类型&#xff0c;如闭包类型、结果类型&#xff08;Result&#xff09;或迭代器类型等&#xff0c;定义一个更具描述性的名称时特别有用…

“知识世界”项目的自动化测试

目录 1.项目介绍 1.1 项目功能介绍 2. 项目测试 2.1 需求分析 2.2 测试计划 2.3 设计测试用例 &#xff08;1&#xff09; 设计 登录 的测试用例 &#xff08;2&#xff09;设计 文章列表页 的测试用例 &#xff08;3&#xff09;设计 详情页 的测试用例 &#xff08…

恒定导通时间控制COT

核心是让反馈脚上的文波电压与电感电流文波同相位

车载测试系列:车载常见面试题

自我介绍项目介绍项目具体是怎么测试的&#xff1f;CANoe是怎么使用的&#xff1f;台架是怎么搭建的&#xff1f;台架怎么测试的&#xff1f;诊断服务是怎么测试的&#xff1f;功能寻址和物理寻找的区别10服务有什么会话&#xff1f;11服务怎么确定软件复位和硬件复位是什么&am…

Redis缓存的基本概念和使用

Redis缓存的基本概念和使用 什么是缓存Redis缓存缓存更新策略缓存穿透缓存雪崩缓存击穿缓存工具类封装 什么是缓存 缓存时数据交换的缓冲区&#xff0c;存储数据的临时区&#xff0c;读写性能较好。 例如计算机的三级缓存。CPU的计算速度超过内存的读写速度&#xff0c;为了平…

Gauge32类型的数据转换成int类型的数据

提前编译号snmp的库 #include <iostream> #include <libsnmp.h>#include "snmp_pp/snmp_pp.h"#ifdef WIN32 #define strcasecmp _stricmp #endif#ifdef SNMP_PP_NAMESPACE using namespace Snmp_pp; #endifusing namespace std; using namespace Snmp_pp…