标签: responsive

对不起,如果我错过任何解决问题的方法,我已经阅读并尝试了许多解决方案,而没有任何解决方案.

我在一个页面上有几个图表(来自chart.js),但我不能成功地使它们响应,尽管:

responsive: true,

我可以获得的最佳响应显示是在放大画布宽度和高度时,但在桌面版本图表上显示整个屏幕.

这是一个小提琴网

有人帮我吗？非常感谢你.

我正在使用ngx-admin，并且正在尝试使ngx-line-chart响应。

我的图表在nb卡中，当我调整窗口大小时，nb卡完全响应。因此，我希望调整图表大小以适合nb卡。

我的html代码：

<div style="margin: 100px auto auto">
    <nb-card>
        <nb-card-header>XXXXXXXXXX</nb-card-header>
            <nb-card-body>
                <ngx-line-chart></ngx-line-chart>
            </nb-card-body>
    </nb-card>
</div>

我的组件：

import { Component } from '@angular/core';

@Component({
    selector: 'ngx-line-chart',
    template: `
    <ngx-charts-line-chart
      [scheme]="colorScheme"
      [results]="multi"
      [xAxis]="showXAxis"
      [yAxis]="showYAxis"
      [showXAxisLabel]="showXAxisLabel"
      [showYAxisLabel]="showYAxisLabel"
      [xAxisLabel]="xAxisLabel"
      [yAxisLabel]="yAxisLabel">
    </ngx-charts-line-chart>
  `,
})
export class LineChartComponent {
    showXAxis = true;
    showYAxis = true;
    showXAxisLabel = true;
    xAxisLabel = 'Date';
    showYAxisLabel = true;
    yAxisLabel = 'Services effectués';
    colorScheme = {
        domain: ['blue'],
    };
    themeSubscription: any;
    multi = [
        {
            name: 'Services effectués',
            series: [
                { …

我一直在搜索响应式图像帖子和示例，但找不到解决方案。看起来这应该很容易，我可能只是错过了一些东西：我如何根据容器宽度而不是屏幕宽度提供适当的图像大小？

即我有一个桌面屏幕，1980px 宽，但弹性容器是屏幕的 1/3，因此最大图像尺寸只需为 660px 宽，因此它应该显示 800w 图像。但 srcset 只会超出屏幕尺寸，所以即使我显示缩略图，它也会加载 1200w 的图像。有没有办法动态地做到这一点。即仍然使用 flebox 和动态宽度，但它是否根据容器宽度而不是屏幕宽度提供适当的尺寸？任何帮助将不胜感激，谢谢！

<div class="flex justify-center w-1/3 mx-auto">
<img
  srcset=" srcset="size-1.jpg 400w,
  size-2.jpg 800w,
  size-3.jpg 1200w,"
  sizes=" (min-width: 1200px) 1200px, (min-width: 800px) 800px, 400px"
/></div>

我想imageList根据显示宽度（又称媒体查询）减少列数，但它无法正常工作。例如：

<ImageList variant="masonry" cols={{ xl: 3, md: 2, sm: 1 }} gap={18}>
  {images.map((image) => (
    <ImageListItem key={image.id}>
      <img
        src={image.urls.regular}
        srcSet={image.urls.regular}
        alt={image.alt_description}
        loading="lazy"
      />
    </ImageListItem>
  ))}
</ImageList>

如果我这样做，我只会得到 1 列，如果我尝试cols={3}，我会得到 3 列。有小费吗？

我正在尝试创建一个既可以水平滚动又可以垂直滚动的弹性框，以备需要时使用。这是一种 Flexbox 中的表格布局。在下图中，您可以看到我想要实现的概念。当视口不太小或太短时，此功能可以正常工作。

然后我们可以调整视口的大小。这对于垂直溢出是正确的。出现一个滚动条，我们可以向下滚动。遗憾的是，这在水平方向上不能正常工作。我们还得到了水平部分的滚动条。但黄色行（带测试）不是我需要的完整宽度。

const groups = [];
for (let i = 0; i < 15; i++) {
  const rows = [];
  for (let j = 0; j < 15; j++) {
    rows.push({
      cols: [
        "col 1",
        "col 2",
        "col 3",
        "col 4",
        "col 5",
        "col 6",
        "col 7",
        "col 8",
        "col 9",
      ]
    });
  }

  groups.push({
    group: 'test' + i,
    open: false,
    rows
  });
}

var app = new Vue({
  el: '#app',
  data: {
    rows: groups
  }
})

.container …

如何使用Bootstrap使内联svg图标响应？这是一个示例代码:

<svg id="mute-audio" xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewbox="-10 -10 68 68">
    <circle cx="24" cy="24" r="34">
        <title>Mute Audio</title>
    </circle>
    <path class="on" transform="scale(0.6), translate(17,18)" d="M38 22h-3.4c0 1.49-.31 2.87-.87 4.1l2.46 2.46C37.33 26.61 38 24.38 38 22zm-8.03.33c0-.11.03-.22.03-.33V10c0-3.32-2.69-6-6-6s-6 2.68-6 6v.37l11.97 11.96zM8.55 6L6 8.55l12.02 12.02v1.44c0 3.31 2.67 6 5.98 6 .45 0 .88-.06 1.3-.15l3.32 3.32c-1.43.66-3 1.03-4.62 1.03-5.52 0-10.6-4.2-10.6-10.2H10c0 6.83 5.44 12.47 12 13.44V42h4v-6.56c1.81-.27 3.53-.9 5.08-1.81L39.45 42 42 39.46 8.55 6z" fill="white"/>

    <path class="off" transform="scale(0.6), translate(17,18)"  d="M24 28c3.31 0 5.98-2.69 5.98-6L30 10c0-3.32-2.68-6-6-6-3.31 0-6 2.68-6 6v12c0 3.31 2.69 6 …

I've created this website on codepen. While trying to make it responsive for all platforms I ran into a problem. It appears a single div covers the whole page (only on IOS) and not all heights are working properly (meaning nothing fits).

I've been at it for days and still have no clue, why all the heights and rules don't apply on IOS.

I've tried removing the video-section which reveals most of the page except the eind section which is …

我正在使用semantic-ui做出反应来呈现数据表.我的要求是当页面在移动视图上时,我隐藏了某些列.我试着用className="mobile hidden"了上Table.Cell元素,但是这似乎并没有在所有的工作.

然后我尝试使用Responsive下面的组件,但我收到一个错误.我在这里错过了什么吗？无法找到有此问题的其他人...

  <Responsive as={Table.Cell} minWidth={Responsive.onlyMobile.minWidth}>
     {record.datapoint}
  </Responsive>

调整窗口大小时,我在控制台中收到此错误...

index.js:2177 Warning: Can only update a mounted or mounting component. This usually means you called setState, replaceState, or forceUpdate on an unmounted component. This is a no-op.

Please check the code for the Responsive component.

我正在使用Material-UI版本1在我的React应用程序中制作网格UI。我想使网格响应。GridList组件API具有cols属性，默认情况下为2。

例如，如下所示。

<GridList cols={1} spacing={32} className="list"></GridList>

我可以动态更改道具吗？还是有其他方法使其具有响应性？

我正在尝试使页面响应，但是我无法使图像响应，因为它正在脱离材质 UI 中的网格容器。有什么方法可以使图像具有响应性吗？我正在尝试将图像添加到网格容器中，但它仍然显示相同的内容。

import React from "react";
import "./styles.css";
import {
  Typography,
  Container,
  Grid,
  Button,
  CssBaseline
} from "@material-ui/core";
import useStyles from "./styles";
import Pic from "../../Assets/Images/manOnTable.svg";

const Home = props => {
  const classes = useStyles;

  return (
    <React.Fragment>
      <CssBaseline />

      <Grid container className={classes.root} style={{ height: "auto" }}>
        <Grid container sm={6} xs={12}>
          <Grid container style={{ padding: "20%" }}>
            <Grid item sm={12} xs={12}>
              <Typography variant="h3" color="textPrimary" gutterBottom>
                Hello, there.
              </Typography>
              <Typography variant="h5" paragraph>
                Lorem ipsum dolor sit amet, consectetur adipiscing …