Компания хочет разработать большой экран для визуализации данных, изучить данные в течение нескольких дней и опубликовать результаты собственных исследований, надеясь всем помочь (контент длинный).
Способ 1. Используйте свойство CSS преобразования, процент дизайна и метод масштабирования():
Первый шаг: сначала напишите компонент, ширина = 100vw, высота = 100%, как фон большого экрана.
<template>
<div class="screen-adapter">
<div class="content-wrap" :style="style">
<slot />
</div>
</div>
</template>
<style lang="scss">
.screen-adapter {
width: 100vw;
min-height: 100%;
max-height: 100vh;
overflow: hidden;
background: url("../../assets/charts/icon-bg.png") no-repeat;
background-size: 100% 100%;
}
</style>
Шаг 2: В соответствии с чертежами, предоставленными студентами-дизайнерами, можно рассчитать процентное соотношение каждой части площади, например, общий размер равен w*h, а ширина и высота одного из значков равны w1 * h1, для реализации обычного разрезания, в это время на 1-- >2 дает:
<template>
<div class="screen-adapter">
<div class="content-wrap" :style="style">
<slot />
</div>
</div>
</template>
<script>
export default {
name: 'ScreenAdapter',
data() {
return {
style: {
width: `${this.w}px`,
height: `${this.h}px`,
transform: 'scale(1) translate(-50%, -50%)', // 默认不缩放，垂直水平居中
},
};
},
props: {
w: { // 设计图尺寸宽
type: Number,
default: 1600,
},
h: { // 设计图尺寸高
type: Number,
default: 1200,
},
},
};
</script>
<style lang="scss">
.screen-adapter {
width: 100vw;
min-height: 100%;
max-height: 100vh;
overflow: hidden;
background: url("../../assets/charts/icon-bg.png") no-repeat;
background-size: 100% 100%;
.content-wrap {
transform-origin: 0 0;
position: absolute;
top: 50%;
left: 50%;
padding: 18px 64px;
}
}
</style>
Шаг 3: На основе второго шага вам необходимо рассчитать коэффициент масштабирования в соответствии с конкретным размером большого экрана и установить коэффициент масштабирования.Следует отметить, что при привязке события изменения размера не забывайте избегать тряски , и когда страница будет уничтожена, не забудьте удалить событие монитора:
<template>
<div class="screen-adapter">
<div class="content-wrap" :style="style">
<slot />
</div>
</div>
</template>
<script>
export default {
name: 'ScreenAdapter',
data() {
return {
style: {
width: `${this.w}px`,
height: `${this.h}px`,
transform: 'scale(1) translate(-50%, -50%)', // 默认不缩放，垂直水平居中
},
};
},
props: {
w: { // 设计图尺寸宽
type: Number,
default: 1600,
},
h: { // 设计图尺寸高
type: Number,
default: 1200,
},
},
mounted() {
this.setScale();
this.onresize = this.debounce(() => this.setScale(), 100);
window.addEventListener('resize', this.onresize);
},
methods: {
// 防抖
debounce(fn, t) {
const delay = t || 500;
let timer;
// eslint-disable-next-line func-names
return function () {
// eslint-disable-next-line prefer-rest-params
const args = arguments;
if (timer) {
clearTimeout(timer);
}
const context = this;
timer = setTimeout(() => {
timer = null;
fn.apply(context, args);
}, delay);
};
},
// 获取缩放比例
getScale() {
console.log(window.innerHeight, window.innerWidth);
const w = window.innerWidth / this.w;
const h = window.innerHeight / this.h;
return w < h ? w : h;
},
// 设置缩放比例
setScale() {
this.style.transform = `scale(${this.getScale()}) translate(-50%, -50%)`;
},
},
beforeDestroy() {
window.removeEventListener('resize', this.onresize);
},
};
</script>
<style lang="scss">
.screen-adapter {
width: 100vw;
min-height: 100%;
max-height: 100vh;
overflow: hidden;
background: url("../../assets/charts/icon-bg.png") no-repeat;
background-size: 100% 100%;
.content-wrap {
transform-origin: 0 0;
position: absolute;
top: 50%;
left: 50%;
padding: 18px 64px;
}
}
</style>
Шаг 4: Большая часть этого сделана, просто поместите компоненты в слот
Объяснение каждого .vue в папке данных:
chart.vue — страница визуализации данных;
ScreenAdapter.vue — адаптивный компонент страницы;
Card.vue — это внешняя рамка каждой диаграммы;
Все остальное по схеме
Страница Chart.vue выглядит следующим образом:
Эффект адаптации страницы выглядит следующим образом
2000*1500
1600*1200
Способ 2: Схема адаптации vw и vh для большого экрана:
Общие разрешения экрана
- 1280*720: Экран старого компьютера, который сейчас редко встретишь
- 1366*768: обычный ЖК-монитор
- 1920*1080: HD ЖК-дисплей
- 2560*1440: дисплей 2K HD
- 3840*2160: дисплей 4K HD
Сложность адаптации
- Совместимость с разрешениями экрана разных размеров, так что страница сохраняет нормальный эффект отображения и пропорции при разных разрешениях экрана.
- Различные разрешения, разные сцены отображения, не могут быть исправлены для записи мертвых единиц пикселей.
- Адаптивный способ некоторых графиков требует специальной обработки
О вв и вх
- Ширина области просмотра экрана = 100vw
- высота области просмотра экрана = 100vh
- vw и vh также являются стандартными единицами измерения в css, такими же, как px, rem, %
схема адаптации vw и vh
- В зависимости от размера эскизного проекта,
pxМасштабируется доvwа такжеvh - Формула преобразования выглядит следующим образом
` Предположим, что размер эскиза дизайна составляет 1920 * 1080 (не забудьте узнать размер эскиза дизайна пользовательского интерфейса, прежде чем делать это)
即：
网页宽度=1920px
网页高度=1080px
我们都知道
网页宽度=100vw
网页宽度=100vh
所以，在1920x*1080px的屏幕分辨率下
1920px = 100vw
1080px = 100vh
这样一来，以一个宽300px和200px的div来说，其作所占的宽高，以vw和vh为单位，计算方式如下:
vwDiv = (300px / 1920px ) * 100vw
vhDiv = (200px / 1080px ) * 100vh
所以，就在1920*1080的屏幕分辨率下，计算出了单个div的宽高
当屏幕放大或者缩小时，div还是以vw和vh作为宽高的，就会自动适应不同分辨率的屏幕
` Но каждый раз вручную считать нереально, поэтому мне нужно инкапсулировать функцию обработки и пусть она автоматически вычисляет за меня
Здесь я использую scss
- существует
src/stylesсоздать новыйutils.scssфайл, определите две переменные ширины и высоты проекта проекта - Используйте встроенный scss здесь
math.divфункция, определите дваvwа такжеvhФункция расчета - Передаем в определенные значения пикселей, которые помогают нам автоматически рассчитать значения VW и VH
utils.scss
Наш большой экран имеет соотношение сторон 4:3; `
//使用scss的math函数，https://sass-lang.com/documentation/breaking-changes/slash-div
@use "sass:math";
//默认设计稿的宽度
$designWidth:1600;
//默认设计稿的高度
$designHeight:1200;
//px转为vw的函数
@function vw($px) {
@return math.div($px , $designWidth) * 100vw;
}
//px转为vh的函数
@function vh($px) {
@return math.div($px , $designHeight) * 100vh;
}
`
Как использовать зависимости
Установите соответствующую версию пакета узла перед использованием
- "sass": "^1.26.5",
- "sass-loader": "^8.0.2",
конфигурация пути
Я использую проект vue, созданный vue2.6 и vue-cli3, поэтому мне нужно толькоvue.config.jsнастроить егоutils.scsspath, его можно использовать глобально
vue.config.js (показывает только конфигурацию, связанную с этим методом)
`
const path = require('path');
const StyleLintPlugin = require('stylelint-webpack-plugin');
const CompressionPlugin = require('compression-webpack-plugin');
const defaultSettings = require('./src/settings.js');
function resolve(dir) {
return path.join(__dirname, dir);
}
const name = defaultSettings.title; // page title
const port = process.env.port || process.env.npm_config_port || 8066; // dev port
const devUrl = process.env.DEV_URL; // dev url
module.exports = {
publicPath: '/',
outputDir: 'dist',
assetsDir: 'static',
lintOnSave: process.env.NODE_ENV === 'development',
productionSourceMap: false,
devServer: {
port,
open: true,
overlay: {
warnings: false,
errors: true,
},
proxy: {
// detail: https://cli.vuejs.org/config/#devserver-proxy
[process.env.VUE_APP_BASE_API]: {
target: devUrl,
changeOrigin: true,
ws: false,
},
},
},
configureWebpack: {
// provide the app's title in webpack's name field, so that
// it can be accessed in index.html to inject the correct title.
name,
resolve: {
alias: {
'@': resolve('src'),
},
},
performance: {
maxEntrypointSize: 400000,
maxAssetSize: 250000,
},
},
css: {
loaderOptions: {
//全局配置utils.scss,详细配置参考vue-cli官网
sass: {
prependData: '@import "@/styles/utils.scss";',
},
less: {
javascriptEnabled: true,
},
},
},
};
` использовать в файле .vue
`
<script>
export default{
name: "Box",
}
</script>
<style lang="scss" scoped="scoped">
/* 直接使用vw和vh函数，将像素值传进去，得到的就是具体的vw vh单位*/
.chart-wrapper{
width: vw(400);
height: vh(300);
font-size: vh(16);
background-color: black;
margin: vw(20);
border: vh(2) solid red;
}
</style>
`
особые случаи использования
иногда не только.vueИспользуется в файлах, таких как элементы DOM, динамически создаваемые в js.
Он может быть отображен непосредственно в html
let oDiv = document.createElement('div')
document.body.appendChild(oDiv)
В этом случае я использую следующие два метода обработки, чтобы установить стиль созданного div.
1. Определите несколько глобальных классов
создать новыйglobal.scssфайл, представленный в main.js
global.scss
.global-div{
width: vw(300);
height: vw(200);
background-color: green;
}
main.js
import './styles/global.scss'
При использовании установите className для созданного div,
let oDiv = document.createElement('div')
oDiv.className = "global-div"
2. Определите функцию обработки в стиле js
Этот метод обработки аналогичен функции обработки scss, за исключением того, что для преобразования px в vw и vh используется чистый js.
создать новыйstyleUtil.jsфайл, содержание следующее
//定义设计稿的宽高
const designWidth = 1920;
const designHeight = 1080;
let styleUtil = {
// px转vw
px2vw: function (_px) {
return _px * 100.0 / designWidth + 'vw';
},
// px转vh
px2vh: function (_px) {
return _px * 100.0 / designHeight + 'vh';
},
};
export default styleUtil;
При использовании установите свойства ширины и высоты отдельно
import styleUtil from "./src/utils/styleUtil.js"
let oDiv = document.createElement('div')
oDiv.style.width = styleUtil.px2vw(300)
oDiv.style.height = styleUtil.px2vh(200)
oDiv.style.margin = styleUtil.px2vh(20)
Однако у этого способа использования есть недостаток, то есть после изменения размера экрана его нужно обновлять вручную, чтобы завершить адаптивную настройку.
Способ 3: вы можете использовать DataV
Для конкретного использования DataV, пожалуйста, обратитесь к
Каждый может выбрать, какой метод может быть выбран в соответствии с конкретными потребностями проекта во время использования.