Vue 分辨率 自适应
document.documentElement.clientHeightresultHeight: document.documentElement.clientHeight - 610 + “px”,
·
方法一
documentClientHeight放在VueX中管理
computed: {
documentClientHeight: {
get() {
return this.$store.state.common.documentClientHeight
},
set(val) {
this.$store.commit('common/updateDocumentClientHeight', val)
}
},
设置div高度
siteShujuViewHeight () {
var height = this.documentClientHeight - 180
return { height: height + 'px' }
},
获取屏幕高度的方法
document.documentElement.clientHeight
方法2 使用erm
https://www.jianshu.com/p/02c1d9a63dc8
cnpm i lib-flexible -S
cnpm i px2rem-loader -D
方案3 wupeng 提供
-------------------- 方案一 ------------------------------------------------------------------------------------------------
1. 根据不同的分辨率，加载不同的CSS样式文件
这个方法的思路是，分别针对800、1280、1440、1600、1920等分辨率，创建不同的css文件。然后在各种分辨率下，写css样式表。
可能你会感觉针对一个页面，要写这么多不同的css样式表，这个工作量肯定很大。其实也不尽然，根据我在这个项目中的实践，发现这个工作量其实是比较小的。
首先，我们在做项目的时候，一般情况下会有一些范围限制，比如这个项目只需要适配1280~1920分辨率即可。而且各个分辨率之间，我们有的时候只是对页面上的元素进行宽高、尺寸、位置等进行调整，整体的一个框架是相似或者说是相同的。
不仅如此，有的时候项目的要求不高，没有比较1:1高度还原设计稿，那么这个时候，我们在1440分辨率下的样式表，在1280分辨率下也是实用的，这个时候，我们的工作量又进一步减少。
这个时候，我们可以先完成一个分辨率下的css样式表。然后在这个基础之上，对其他分辨率进行调整即可。这个过程我们只需要调整一些参数即可。
比如在项目里面，这对不同的分辨率，我只做了三个样式表
这个时候，我们只需要在我们的HTML页面的<head></head>标签中，使用js，根据不同的电脑分辨率，加载不同的css样式表。注意这里的js一定要写在<head></head>标签里面，这样在加载页面内容之前，可以提前把css样式表加载出来
<script>
// 分辨率大于等于1680，大部分为1920的情况下，调用此css
if(window.screen.width >= 1680){
document.write('<link rel="stylesheet" href="css/index_1920.css">');
}
// 分辨率再在1600-1680的情况下，调用此css
else if(window.screen.width >= 1600){
document.write('<link rel="stylesheet" href="css/index_1600.css">');
}
// 分辨率小于1600的情况下，调用此css
else{
document.write('<link rel="stylesheet" href="css/index.css">');
}
</script>
这样的话，就可以根据不同电脑的分辨率，就在不同的css样式表。由此我们便完成了页面使用不同的分辨率。
2.采用媒体查询
媒体查询是CSS3的新特性，绝大多数浏览器都可兼容这一特性。这个方法的思路也是根据不同的分辨率，应用不同的css样式。
这个思路和和方法一差不多，或者说方法一的思路和这个思路差不多。我们有两种使用媒体查询的方式。
1).根据不同的分辨率，引入不同的css样式表
这个方法和方法一相同，也是通过判断电脑的分辨率，来引入相对应的css样式表。
<!-- 分辨率低于1280，采用test-01.css样式表 -->
<link rel="stylesheet" media="screen and (max-device-width:1280px)" href="test-01.css">
<!-- 分辨率高于1400，采用test-02.css样式表 -->
<link rel="stylesheet" media="screen and (min-device-width:1440px)" href="test-02.css">
2).在同一个css样式表中，根据不同的分辨率，写不同的css样式
这个方法只有一个css演示表，在这个样式表里面，根据不同的分辨率，写不同的css样式。
<style media="screen">
/*分辨率低于1280，采用下面的样式*/
@media screen and (max-device-width:1280px){
div{
width: 200px;
height: 200px;
background-color: green;
}
}
/*分辨率高于1440，采用下面的样式*/
@media screen and (min-device-width: 1440px){
div{
width: 300px;
height: 300px;
background-color: red;
}
}
</style>
3. 总结
以上的方法的思路大同小异。发现根据小分辨率样式去调整大分辨率样式比较简单。当然，也许你喜欢由大到小，这都无所谓，看个人习惯。
还有就是，最好有注释，这样我们在其他分辨率下去调整的时候，不至于一头雾水。
---------------- 方案二 ----------------------------------------------------------------------------------------------------
vue实现PC端分辨率适配
依赖
项目基础配置使用 vue-cli 生成
自适应方案核心： 阿里可伸缩布局方案 lib-flexible
px转rem：px2rem，它有webpack的loader px2rem
开始
先使用vue脚手架初始化一个webpack项目
vue init webpack 项目名
项目初始化好了之后，进入项目目录中 (cd 项目名) 安装 lib-flexible 和 px2rem-loader
npm install lib-flexible --save
npm i postcss-px2rem px2rem-loader -D
安装好了之后还需要在项目的入口文件 main.js 里引入 lib-flexible
import 'lib-flexible'
但是在实际开发中，我们通过设计稿得到的单位是px，所以要将px转换成rem再进行样式中。但如果都需要手动转的话，就很麻烦，所以需要一个工具替我们完成这项工作，这个时候就需要配置px2rem了，当然，编辑器可能也要对应的插件。
在 vue-cli 生成的 webpack 配置中，vue-loader 的 options 和其他样式文件 loader 最终是都是由 build/utils.js 里的一个方法生成的。我们只需在 cssLoader 后再加上一个 px2remLoader 即可，px2rem-loader 的 remUnit 选项意思是 1rem=多少像素，结合 lib-flexible 的方案，我们将 px2remLoader 的 options.remUnit 设置成设计稿宽度的 1/10，这里我们假设设计稿宽为 1920px。
//utils.js
const cssLoader = {
loader: 'css-loader',
options: {
sourceMap: options.sourceMap
}
}
const px2remLoader = {
loader: 'px2rem-loader',
options: {
remUnit: 192
}
}
放进loaders数组中
//utils.js
function generateLoaders (loader, loaderOptions) {
const loaders = options.usePostCSS ? [cssLoader, postcssLoader, px2remLoader] : [cssLoader, px2remLoader]
if (loader) {
loaders.push({
loader: loader + '-loader',
options: Object.assign({}, loaderOptions, {
sourceMap: options.sourceMap
})
})
}
修改配置以后重启服务器。
以上是vue-cli2配置px2rem的方式。
----------vue-cli3------------------------------
如果脚手架用的是vue-cli3的话，由于vue-cli3 生成的目录结构没有build文件，所以在配置上也有一些不同。
vue-cli3配置方式：
找到文件 vue.config.js，添加规则：
// css相关配置
css: {
// 启用 CSS modules
modules: false,
// 是否使用css分离插件
extract: true,
// 开启 CSS source maps?
sourceMap: false,
// css预设器配置项
loaderOptions: {
css: {},
postcss: {
plugins: [
//remUnit这个配置项的数值是多少呢？？？ 通常我们是根据设计图来定这个值，原因很简单，便于开发。
//假如设计图给的宽度是1920，我们通常就会把remUnit设置为192，这样我们写样式时，可以直接按照设计图标注的宽高来1:1还原开发。
require('postcss-px2rem')({
remUnit: 192
})
]
}
},
},
但是有一个问题，我明明设置的宽度是按1920来的，为什么计算出来1rem=54px?
是不是插件哪里出了问题，或者在哪里定义过跟54或者540相关的东西？
找到lib-flexble/flexible.js文件看下：
获取屏幕宽度,但是当屏幕宽度大于540px的时候,屏幕宽度写死成了540
找到问题了就解决问题，既然文件把屏幕宽度写死了，那就不写死：
function refreshRem(){
var width = docEl.getBoundingClientRect().width;
if (width / dpr > 540) {
width = width * dpr; //<<<<<<<-----修改这里
}
var rem = width / 10;
docEl.style.fontSize = rem + 'px';
flexible.rem = win.rem = rem;
}
现在再重启项目，看一下运行结果。
如果觉得修改源码不方便可以把修改后的flexible.js放在 src/assets 目录下当作静态文件引用
注意：使用 px2rem-loader 后再使用px上有些不同：
直接写 px ，编译后会直接转化成rem —— 除开下面两种情况，其他长度用这个
在 px 后面添加 /*no*/ ，不会转化 px，会原样输出。 —— 一般border需用这个
在 px 后面添加 /*px*/ ，会根据 dpr 的不同，生成三套代码。—— 一般字体需用这个
前往低代码交流专区
更多推荐
1
0- 0
已为社区贡献3条内容
所有评论(0)