我有一个标题:
<v-card-text style="font-size:5em">
Some Heading Here
</v-card-text>
当视图为XS时,我想将字体大小设置为3em。 现在,我将其复制如下:
<v-card-text hidden-xs-only style="font-size:5em">
Some Heading Here
</v-card-text>
<v-card-text visible-xs-only style="font-size:3em">
Some Heading Here
</v-card-text>
但是,我想避免这种重复并单独使用 CSS 解决问题,而不必在本地.vue文件中编写自己的@media
查询。有可能吗?
或者,我可以使用预定义的类,而不是直接指定字体大小,甚至完全不指定不同的元素,例如是<h3>
的XS,而其他视口上的<h2>
。
答案 0 :(得分:8)
您可以使用由Vuetify本身提供并跟踪的Breakpoint对象。引用the docs:
Vuetify将可用的断点转换为可访问的对象 从您的应用程序中。这将允许您分配/应用 具体的属性和属性取决于视口的大小。
在同一文档页面中提到了一种可能的方法(也是直接方法)-使用计算属性来计算字体大小:
computed: {
fontSize() {
switch (this.$vuetify.breakpoint.name) {
case 'xs': return '3em';
default: return '5em';
}
}
}
...,然后直接在您的模板中使用它。当然,您可以使用动态类名来做同样的事情-例如,将其应用于$vuetify.breakpoint.xsOnly
。
答案 1 :(得分:8)
您可以基于视口应用类
:class="{'subheading': $vuetify.breakpoint.xs}"
答案 2 :(得分:1)
我也一直在尝试解决这个难题,因为接触javascript处理不同设备尺寸的简单样式更改感觉很困难。
事实证明,为不同的断点生成自定义css规则非常容易,因为Vuetify正在利用Stylus并将断点分配给Stylus变量。当然,此变量在自定义vue组件和样式文件中可用(前提是您具有正确的预处理器设置来编译笔针)。
以下一些资源可以帮助我更好地理解事物:
预处理器设置:
修改手写笔变量-Vuetify:
手写笔@media查询-http://stylus-lang.com/docs/media.html
您将看到,$ display-breakpoints手写笔对象是您的新好朋友!
将其全部煮沸,这就是您在Vue单个文件组件中获得的内容:
<template>
<v-layout column justify-center align-center>
<v-flex xs12 sm8 md6>
<v-card>
<v-card-title class="custom-selector headline">
Welcome to the Vuetify + Nuxt.js template
</v-card-title>
</v-card>
</v-flex>
</v-layout>
</template>
<script>
export default {
// ...
}
</script>
<style lang="styl">
.custom-selector
font-size 3em
@media $display-breakpoints.xs-only
font-size 2em
@media $display-breakpoints.lg-and-up
font-size 5em
</style>
在上面的代码中,我们正在更改<v-card-title>
组件的字体大小,方法是在手写笔媒体查询中将其定位为目标,并使用$ display-breakpoints对象标识所需的断点。
我认为没有UI框架在每个断点处生成每个选项的好处是加载的文件要小得多。似乎Vuetify + Stylus是一种更轻松的方法,它使编写自定义@media查询成为最简单,最有效的方法。
答案 3 :(得分:0)
使用断点宽度值检查视口宽度并确定。
constexpr int rows=3601;
constexpr int cols=3601;
std::vector<float> buffEleveation(rows*cols);
// Since we want to read all the data we set:
// nXOff/nYOff to 0
// nXSize/nYSize to 3601
// nBufXSize/nBufXSize to 3601.
poBand->RasterIO(GF_Read, 0, 0, rows, cols, buffEleveation.data(), rows, cols, GDT_Float32, 0, 0); // read all elevation values.