宝塔里面一个服务器做多个网站,分销微信小程序,品牌的佛山网站建设价格,建设网站需要**手机端适配** 媒体查询 组件统一样式 媒体查询写四套样式 手机 屏幕宽小于768px 平板 屏幕宽 大于等于768px 小于992px 桌面显示器 屏幕宽大于等于992px 小于1200px 大屏幕 屏幕宽大于等于1200px
**页面整体及页面内容** 页面看是需要主PC还是主移动端 主移动端的话…**手机端适配** 媒体查询 组件统一样式 媒体查询写四套样式 手机 屏幕宽小于768px 平板 屏幕宽 大于等于768px 小于992px 桌面显示器 屏幕宽大于等于992px 小于1200px 大屏幕 屏幕宽大于等于1200px
**页面整体及页面内容** 页面看是需要主PC还是主移动端 主移动端的话 一般需要另外做页面 然后页面渲染的时候 获取视口宽度 选择加载哪个页面 主PC端的话 中屏幕适配做样式切换 小屏幕适配做页面切换 样式切换 内容隐藏 内容隐藏可以用css做 用css做直接displaynone 也可以用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)}}}
还有一种很古早的适配方案 就是不管那个屏幕显示的都是同一种页面样式 需要手指放大页面具体查看的那种
