vue pc移动页面自适应

自适应布局

* @midea 媒体布局

* flex 布局

* %百分比布局

* rem 布局

* vw、vh 布局

局部自适应
接手他人的项目，把某个页面改为自适应的，若用插件，就要动配置文件，导致
全部的页面都要检查和调整，代价大。
根据屏幕宽度修改样式大小，使用js监听事件判断屏幕大小，进而修改适应的样
式

mounted(){}中添加

window.addEventListener("load",function(){ // 页面的全部资源全部加载完
后才会执行下面的window.addEventListener("resize",function(){ // 当屏幕大小改变时就会
就会被监听到if(window.inner < 1200){// 修改的样式，我用的一个变量，只判断大于1200小于1200这两种屏幕大
小的样式}else {}  })
})

全局自适应
在搭建移动或pc端项目时就应该做好自适应。移动端多用插件 lib-flexible 和
px2rem-loader(px自动转rem，也就是直接写px即可)

npm i lib-flexible
npm i px2rem-loader

没有vue.config.js文件，而有build/utils.js
在build/utils.js下添加

const px2remLoader = {loader:'px2rem-loader',options:{remUnit:136.6 // 此处按1366X768屏幕设计，分成10份}
}// 之后放进loaders数组中
function generateLoaders(loader,loaderOptions){const loaders = options.usePostCSS ?
[cssLoader,postcssLoader,px2remLoader] :[cssLoader,px2remLoader]
......
}

在main.js中引入 import "lib-flexible/flexible"

在node包中找到下载的lib-flexible文件，打开flexible.js，修改为适应PC端的
代码

vue pc移动页面自适应相关推荐

【Vue】Vue移动端页面自适应解决方案
移动端页面自适应解决方案该方案使用相当简单,把下面这段已压缩过的原生JS(仅1kb,源码已在文章底部更新,2017/5/3) 放到 HTML 的 head 标签中即可(注:不要手动设置viewpo ...
vue PC+移动端自适应布局
之前自己接了个项目 PC+移动端自动适配显示,因为手机端需要自适应,pc也是需要自适应项目里 PC用的1920px,移动端用的375px,使用媒体查询适配显示一.环境使用lib-flexibl ...
PC端页面自适应不同分辨率的方法
以1920* 1080的设计稿为例,实现PC端不同分辨率适配 <script TYPE="text/javascript"> var docEl = document. ...
vue适配PC端屏幕自适应
vue适配PC端屏幕自适应 1.下载postcss-px2rem和px2rem-loader npm i postcss-px2rem px2rem-loader 2.src目录下新建utils文件夹 ...
vue项目实现大屏PC端字体自适应
vue项目实现大屏PC端字体自适应我们字体自适应选择使用rem作为单位,通过监听窗口大小的变化,更新1rem的对应的px数来实现字体自适应. 注意该方法,我们需要在APP.vue文件中实现, 首先A ...
[html] 制作一个页面时，需要兼容PC端和手机端，你是要分别做两个页面还是只做一个页面自适应？为什么？说说你的理由
[html] 制作一个页面时,需要兼容PC端和手机端,你是要分别做两个页面还是只做一个页面自适应?为什么?说说你的理由两个页面 pc端布局和交互行为跟移动端不一样, 两个页面反而更好维护个人简介 ...
安卓+ios系统--手机端页面自适应手机屏幕大小，禁止手动放大和缩小VUE
项目需求手机端,页面自适应手机屏幕大小,不能手动放大和缩小. 1.代码在index.html中加入下面的代码:  <met ...
h5实现网页内容跟随窗口大小移动_HTML5使用四种方法实现移动页面自适应手机屏幕的方法总结...
这篇文章主要介绍了HTML5 移动页面自适应手机屏幕四类方法总结,非常具有实用价值,需要的朋友可以参考下 1.使用meta标签:viewport H5移动端页面自适应普遍使用的方法,理论上讲使用这个标 ...
h5实现网页内容跟随窗口大小移动_HTML5 移动页面自适应手机屏幕四类方法
1.使用meta标签:viewport H5移动端页面自适应普遍使用的方法,理论上讲使用这个标签是可以适应所有尺寸的屏幕的,但是各设备对该标签的解释方式及支持程度不同造成了不能兼容所有浏览器或系统. ...

vue pc移动页面自适应

vue pc移动页面自适应相关推荐

最新文章

热门文章