解决方案 pc端与移动端适配 (解决方案ppt)

本文目录导航：

• pc端与移动端适配 解决方案
• 静态、自适应、流式、响应式四种网页布局有什么区别？
• Echarts大屏展示，实现响应式比较常用的方式

pc端与移动端适配 解决方案

一般网站在实现pc端与移动端适配的需求时，主要采用两种方案：1、响应式方案：设计一个页面，通过媒体查询自动调整样式，以适应不同设备尺寸。

这种方案使用一套代码实现pc端和移动端的适配。

例如，可以设置宽度的比率而非具体的数字，以确保在不同分辨率下网页内部空间的比例保持最佳状态。

我的博客采用的就是响应式方案。

2、两套页面方案：开发针对pc端和移动端的两个页面，根据设备尺寸加载相应的资源。

尽管这种方案不常见，但在特定情况下仍然适用。

响应式方案的案例包括：1、个人博客用户端：在移动端上，只保留核心功能，如文章列表，并隐藏其他辅助功能，如热门文章排序、文章分类等。

2、管理后台：调整菜单布局，例如将侧边导航栏转换为折叠式菜单，以适应移动设备屏幕大小。

在开发过程中，需要注意以下几点：1、使用浏览器的F12功能，配合调整浏览器大小，来测试页面在不同宽度下的展示效果。

2、利用各大浏览器的移动端模拟器进行开发，但需注意模拟器偶尔会出现定位问题，如fixed定位失效，这通常是模拟器本身的bug。

3、在获取浏览器分辨率时，要区分实际分辨率与用户在浏览器中设置的缩放比例。

js获取的分辨率是用户缩放后的，因此可能与实际分辨率不同。

4、动态计算元素高度时，应使用浏览器的可视窗口尺寸，例如，以确定实际的页面展示区域。

静态、自适应、流式、响应式四种网页布局有什么区别？

静态布局，作为一种传统网页设计方式，完全缺乏灵活性，如今已逐渐被淘汰。

相比之下，自适应布局则是一种升级版的静态布局，凭借其强大的适应性，成为高端网站的代表。

而流式布局，进一步提升了灵活性，适用于包括静态布局、自适应布局在内的多种网站设计。

响应式布局则是自适应布局的进阶版，旨在使网站能够适应不同屏幕尺寸和设备类型，其开发难度和工作量巨大，因此开发成本也较高。

在设计方法上，静态布局通常采用居中布局，所有样式使用绝对宽度和高度（px）定义，设计一个固定的布局。

当屏幕尺寸发生变化时，页面内容会被隐藏，用户需要使用横向和纵向滚动条来查看被遮挡的内容。

自适应布局则利用@media媒体查询，根据不同设备和屏幕尺寸切换不同的样式。

流式布局则以百分比定义宽度，高度通常使用px固定，可以随着可视区域和父元素的实时尺寸进行调整，从而尽可能适应各种分辨率。

响应式布局则结合了媒体查询和流式布局的理念，通过CSS为单一网页在不同设备上提供不同的样式。

静态布局的特点是，所有元素尺寸固定，使用px作为单位，页面布局始终保持原始设计状态，不受浏览器尺寸的影响。

流式布局则通过百分比定义宽度，根据屏幕分辨率动态调整页面元素宽度，但整体布局保持不变。

自适应布局则为不同分辨率屏幕定义了多种布局方案，每个布局对应一个分辨率范围。

而响应式布局则结合了自适应和流式布局的特点，为不同分辨率屏幕定义布局，并应用流式布局理念，使页面元素宽度能够根据窗口调整自动适应。

Echarts大屏展示，实现响应式比较常用的方式

以前写过一些大屏可视化的实现方式，发现有点落后了，更新下。

能学到的知识

1、PC数据可视化项目，实现响应式一篇搞定

2、配合蓝湖使用，主要是取元素的样式、色值，完美还原

3、基于vue2、vuecli4、ECharts5

效果图浏览器默认状态1920xxxx768实现

主要思路就是，根据设计图的尺寸，用css的transform:scale缩放页面。

实现缩放主要代码changeScale(){constbody=1=/2=/=scale1<scale2?=`scale(${scale})translate(-50%,-50%)`}

translate，是为了让页面的缩放保持宽高比，要配合对应容器的css实现，例如本项目的：

{width:1920px;height:1080px;overflow:hidden;position:fixed;top:50%;left:50%;transform-origin:lefttop;}

上面的实现，其实不用translate也行的，但是页面的高度在某些屏幕下会被压扁，因为屏幕尺寸和设计图的宽高比不一致，有兴趣的自己尝试了

关于绑定数据

为了可读性，一般都把页面按模块分割成组件引入使用的。数据的绑定，一般2种情况：

1、大屏的数据一个接口全部返回

这种情况，给每个需要数据的组件设置props属性，然后在主页面请求数据，传参就行，具体看代码了，不复杂。

2、每个图表模块都单独一个接口返回数据

这种情况就在对应组件请求数据，绑定数据就行了

代码总览

涉及的文件如下（具体参考代码）：

|--src|--views|--bigscreen//实例所在||||--components||--leftView||||--rightView||||--centerView||||--bottomView||||--utils||--styles|//大屏共用样式代码

按代码总览的目录去代码里找着看就行了。

总结

大屏的布局，各种各样，自己看情况修改了，这里只是做个例子。

这里的方案，可以保证设定尺寸下的页面，以设定尺寸为基础缩放，达到响应式的效果。

现在做的项目，大多数都是以1920x1080的设计图来做，和蓝湖配合，基本可以很简单的就达到设计图90%+的效果，剩下的10%，主要是因为地图无法百分百的随意还原，其它部分都是可以完美实现的。

拓展

数据可视化，图表的实现，用的是Echarts，至今做了不少大屏项目，总结的一套用法，比较成熟和稳定了，Echarts的使用可参考以下

1、vue项目中封装echarts的比较优雅的方式

2、vue2项目中封装echarts地图比较优雅的方式

3、vue2项目中给echarts地图设置背景图和打点

原文：