vue项目pc端页面适配

pc端适配包括不同分辨率的适配以及放大缩小网页的适配。

适配方法如下：

1、rem适配。（依据网页根节点字体大小

根据ui设计稿计算缩放比（以1920*1080为例，顶部标题字体大小为25px）

<style lang="scss" scoped>
//1920*1080为设计稿，头部字体大小为25px
$ratio: 1920 / 76.8; // 缩放比   25// 返回对应屏幕下的rem值
@function px2rem($px) {@return $px / $ratio + rem;
}</style>

在具体使用时直接调用函数，比如设计稿高为100px，则height:px2rem(100)，即转化为相应的rem。

页面加载时设置页面默认根节点大小，监听页面变化时重设根节点字体大小。

created() {// 获取当前设备的宽度，设置rem的根字体大小let width = window.innerWidth;width = width <= 1200 ? 1200 : width;const htmlObj = document.getElementsByTagName("html")[0];htmlObj.style.fontSize = width / 76.8 + "px";// 对resize事件进行浏览器兼容处理if (document.createEvent) {var event = document.createEvent("HTMLEvents");event.initEvent("resize", true, true);window.dispatchEvent(event);} else if (document.createEventObject) {window.fireEvent("onresize");}// 监听页面resize事件，重新设置rem的根字体大小window.onresize = function () {let width = window.innerWidth;width = width <= 1200 ? 1200 : width;htmlObj.style.fontSize = width / 76.8 + "px";};},

如果只有当前页面使用，最后在切换页面是要清除数据。

destroyed() {const htmlObj = document.getElementsByTagName("html")[0];htmlObj.style.fontSize = "";window.onresize = null;},

vue项目pc端页面适配相关推荐

Vue项目pc端适配方案（scss）
前言:vue项目适配可借助于插件lib-flexible 和postcss-px2rem. lib-flexible插件的作用:根据屏幕尺寸不同设置html根标签的字体大小,1rem即等于根标签的字体 ...
PC端页面适配px转rem
rem是相对长度单位,页面布局需要在不同比例的pc端显示同样大小的页面,不希望在分辨率比较高的屏幕上页面就很小. 一般设计稿都是px单位,在开发的时候也会用到px单位.如果在开发前,可以利用vscod ...
一段代码把PC端页面适配手机端
在PC端的代码中加入这段代码,及实现手机端页面的自适应,是个人目前觉得最好用的方法! <script type="text/javascript"> ...
vue项目pc端使用rem进行适配（lib-flexible+postcss-pxtorem）
1.使用vue-cli创建项目 vue create my-app 2.安装lib-flexible与postcss-pxtorem依赖 npm install lib-flexible -Snpm ...
vue项目PC端屏幕分辨率与窗口大小自适应
效果 #mermaid-svg-O0n9N0Pq5xuLBK3e .label{font-family:'trebuchet ms', verdana, arial;font-family:var(- ...
pc端rem适配_聊聊PC端页面适配
目前pc并没有像移动端那样,可以用rem单位这种一站式解决方案,因为pc需要考虑低级浏览器,媒体查询和background-size这些新属性都不能用. 设计稿:1920/(1080-190) = 2 ...
vue实现PC端分辨率适配
简单的几步~~~ 这里讲二种方式:1.借助插件实现,2.利用css3媒体查询实现方法一:下载两个插件 1.安装 lib-flexible 和 px2rem-loader 两个插件 npm i lib ...
html,css期末项目pc端自适应适配
前期准备 1. 在vscode中下载px to rem rem适用于网页适配可以将px转换为rem(快捷键alt+z) 2. 将所有的网页代码用一个div包裹起来,写上样式,让网页自适应居中 < ...
基于 Vue JS、Element UI、Nuxt JS的项目PC端前端手册
基于 Vue JS.Element UI.Nuxt JS的项目PC端前端手册前言:笔记写于2020年5月左右,刚开始做前端时整理的笔记 1.环境搭建 1.安装nodeJs 官网下载地址:http ...
vue的PC端和移动端分辨率适配
使用lib-flexible和px2rem实现移动端和PC端界面适配注释:lib-flexbles是由阿里团队很早提出解决屏幕分辨率适配的问题.现已不被推荐(因为目前比较主流的适配方案是使用vw和v ...

vue项目pc端页面适配

vue项目pc端页面适配相关推荐

最新文章

热门文章