怎么样建设自己网站,罗岗网站建设哪家好,顺德 网站开发 招聘,做网站能月入10万说在前面
目前很多业主在使用系统的时候都会有大屏的需求#xff0c;很多屏幕并不会像我们开发的屏幕一样标准#xff0c;比如1920*1080#xff0c;这样我们就需要根据业主的屏幕尺寸进行适配#xff0c;避免一些图表或文字在大屏中出现偏移#xff0c;影响视觉观感。
方…说在前面
目前很多业主在使用系统的时候都会有大屏的需求很多屏幕并不会像我们开发的屏幕一样标准比如1920*1080这样我们就需要根据业主的屏幕尺寸进行适配避免一些图表或文字在大屏中出现偏移影响视觉观感。
方案比选
方案一
如果希望在大屏中实现最佳的展示效果应该由设计人员针对大屏的尺寸进行单独设计然后开发人员使用如下监听方式
media screen and (max-width: 2560px) {}
media screen and (min-width: 2561px) {}以2561px为分界线在屏幕尺寸大于分界线时来让不同的样式代码生效。 这种方案可以保证最好的展示效果完美适配大屏问题就是如果屏幕发生变化或者需要适配其他尺寸的屏幕时需要针对性的进行调整。
方案二
使用vw和vh属性来表示dom节点的长宽。 举个例子我们手里的设计稿是1920*1080此时使用vw和vh,这样就可以适配大屏。 比如某个dom节点宽度为200px,高度为100px,此时设置他的宽高为
.dom {width: (200 / 1920) * 100vw;height: (100 / 1080) * 100vh;
}原理也比较简单对所有dom节点的宽高根据屏幕大小进行等比缩放这样做的麻烦点是代码中会有很多涉及到需要px单位的地方每一处都需要写成这种形式从操作上烦琐了不少。
方案三
使用rem来实现响应式的布局rem是相对于根元素的字体大小来计算的单位配合引入相应的postcss相关插件免去了设计稿中的px到rem的计算。 引入postcss-plugin-px2rem,还有很多其他类似插件或者loader引入一个即可。
.dom {width: 200px;height: 100px;
}
编译以后的代码为
.dom {width: ..rem;height: ..rem;
}这样做的优势就是可以安全按照设计稿给出的尺寸来完成css布局不需要操心转换等问题。
使用过程中的一些小坑
一些echarts图表是独立设置尺寸的
echarts总的大小会根据容器的大小调整但是字体间距等需要在代码中设置大小。 由于postcss-plugin-px2rem只能检测到css文件中的样式所以需要单独处理方案也比较简单选中宽或者高为参考进行等比缩放即可。
getSize(size) { // 这里是以高度为参考进行等比缩放return size * (window.innerHeight / 1080);
},
...ehcart legend的设置片段
legend: {orient: vertical,bottom: 10%,left: center,itemGap: this.getSize(10),itemWidth: this.getSize(8),itemHeight: this.getSize(8),itemStyle: {radius: 5,},
}选择宽度或者高度作为最佳参考标准
rem的方案是需要选择宽度或者高度为参考的如果大屏宽高较原稿变化不大可随意选择如果变化偏大需要分别设置宽和高为基准比较哪种更适合屏幕的尺寸。
// rem.js
// rem等比适配配置文件
// 基准大小
const baseSize 16
// 设置 rem 函数
function setRem () {
// 当前页面宽度相对于 1920宽的缩放比例可根据自己需要修改。const scale document.documentElement.clientHeight/ 1080
// 设置页面根节点字体大小“Math.min(scale, 2)” 指最高放大比例为2可根据实际业务需求调整document.documentElement.style.fontSize baseSize * Math.min(scale, 2) px
}
// 初始化
setRem()
// 改变窗口大小时重新设置 rem
window.onresize function () {setRem()
}如上述代码是以高度为参考基准的。
浏览器显示最小字体为12px
这里在适配小屏幕的时候会遇到问题比如业主要求需要适配他们的平板此时你可能会发现小屏幕下会有字体重叠的情况出现这是因为浏览器支持的最小字体为12px,此时需要根据实际小屏幕尺寸调整一下页面的布局。
rem实现分享
安装依赖并在配置文件中引入
npm i postcss-plugin-px2rem --save -dev
在vue.config.js中添加配置信息
module.exports {//px转rem的配置postcss-plugin-px2rem插件lintOnSave: true,css: {loaderOptions: {postcss: {plugins: [require(postcss-plugin-px2rem)({exclude: /(node_module)/, //默认false可以reg利用正则表达式mediaQuery: false, //布尔值允许在媒体查询中转换px。minPixelValue: 3 //设置要替换的最小像素值(3px会被转rem)。 默认 0}),]}}},
}还有更多的配置项详情参考官方 https://www.npmjs.com/package/postcss-plugin-px2rem。
新建rem.js文件
内容参考上方 选择宽度或者高度作为最佳参考标准 代码。
在main.js中引入
import ./utils/rem; 加载以后会调用setRem()方法来触发尺寸的初始化。
说到最后
为了实现最佳的效果以上几种方案甚至可以组合使用希望大家读完文章后能理解并动手实践大屏适配。
