标签: responsive

DataTables 允许您创建“复杂标题”（这需要跨越多个列或行）。如果您按照文档添加一些额外的 CSS，响应式插件与此兼容。

这是一个工作小提琴：https : //jsfiddle.net/hmr9qtx3/1/

如您所见，调整渲染输出帧的大小会正确地<th>从行中删除标签。这是1.10.1DataTables 和1.0.0Responsive 的版本。

最新的 DataTables 版本是1.10.12，它附带的 Responsive 版本是2.1.0. 这是换出这些版本的相同小提琴：https : //jsfiddle.net/hmr9qtx3/

在工作和非工作版本号之间，数据表和响应式插件的使用是相同的。

您会注意到响应式插件对于非跨越表头和表体正常工作。但是，当页面大小调整到足以添加滚动条/溢出时，不会从 DOM 中删除跨越标头。

如何修复或修补我的代码，以便跨标头像在工作小提琴中一样响应？我宁愿不使用旧版本的插件。

我正在尝试使用 Bootstrap 创建一个具有以下属性的瓷砖网格：

• 所有瓷砖都应该是正方形
• 水平和垂直间隙应该相同（即使在不同屏幕宽度上比较相同）
• 图块应始终居中在屏幕中间（从网站的左边缘到最左边的图块的左边框的距离 = 从网站的右边缘到最右边的图块的右边框的距离）

它应该是这样的：

body{
	   background: #a5b5c5;
	   background:lightblue !important;
    }

    .box{
	   height: 180px;
	   width: 180px;
	   background: #fff;
	   border-radius: 4px;
    }

    .col-lg-2, .col-md-3, .col-xs-6{
	     margin-top: 12px !important;
    }

<div class="container">
	<div class="row">
		
		<div class="col-lg-2 col-md-3 col-xs-6 ">
			<div class="box"></div>
		</div>
		<div class="col-lg-2 col-md-3 col-xs-6 ">
			<div class="box"></div>
		</div>
		<div class="col-lg-2 col-md-3 col-xs-6 ">
			<div class="box"></div>
		</div>
		<div class="col-lg-2 col-md-3 col-xs-6 ">
			<div class="box"></div>
		</div>
		<div class="col-lg-2 col-md-3 col-xs-6 ">
			<div class="box"></div>
		</div>
		<div class="col-lg-2 col-md-3 col-xs-6 …

我正在尝试使用固定位置在 iOS 设备上正常工作。

这是键盘未打开时的样子：

屏幕截图：键盘未处于活动状态

对于上面的聊天窗口我使用了这段代码：

    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

当我点击输入框（写消息）时，键盘打开，顶部部分随着屏幕放大而隐藏，如下所示：

屏幕截图：当键盘处于活动状态时

我认为 ios 会忽略top: 0键盘何时打开。我可以做什么来避免这种情况？

chrome 上不存在这样的问题。

我希望导航栏始终在移动设备上展开，但像正常切换折叠的导航栏时一样垂直显示。由于导航栏总是扩展的，我也想删除汉堡包按钮的可见性。

在桌面上，导航栏应始终扩展和水平，这已经在我的代码中起作用。

我认为在导航栏切换器上简单地使用 aria-expanded="true" 应该可以工作，但它似乎不起作用。

小提琴： https: //jsfiddle.net/fegq670m/1/

代码：

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <div class="container">
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#footerResponsive" aria-controls="footerResponsive" aria-expanded="true" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span><!-- I want to remove this -->
        </button>
        <div id="footerResponsive" class="collapse navbar-collapse">
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link" href="#">item 1</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">item 2</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

我有一个图像，里面有两个按钮。我希望这些按钮具有响应性，并且文本始终居中并在图像调整大小时调整大小。这些按钮内的文本未居中，并且在调整浏览器大小或在移动设备上浏览时变得更糟。我错过了什么？下面是图片和按钮的 CSS 代码：

.container {
  position: relative;
  width: 100%;
  max-width: 2400px;
}

.container img {
  width: 150%;
  opacity: 0.85;
  height: auto;
}

.container .btn {
  width: 30%;
  height: 10%;
  opacity: 0.8;
  filter: alpha(opacity=80);
  position: absolute;
  top: 80%;
  left: 70%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  background-color: #555;
  color: white;
  font-size: 1.5vw;
  padding: 12px 24px;
  border: none;
  cursor: pointer;
  border-radius: 5px;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  line-height: 100%;
}

.container .btns {
  width: 30%;
  height: 10%;
  opacity: 0.8;
  filter: alpha(opacity=80); …

我一直在尝试用谷歌搜索这个问题，但我要么没有使用正确的术语，要么还没有人问我的问题。

问题：有没有办法在 TailwindCSS 中堆叠响应式类？我想做的是改变类似的东西：

class="grid gap-12 md:grid-cols-2 md:col-gap-12 md:py-16 lg:grid-cols-3 lg:py-12"

更像是：

class="grid gap-12 md:grid-cols-2:col-gap-12:py-16 lg:grid-cols-3:py-12"

我意识到它并没有减少太多的行长度，但对我来说，将响应类分组在一起似乎更明智一些。我是 TailwindCSS 的新手，只是想问一下这是否可行。

我最初是为 iPad 设计的应用程序，现在也想为 iPhone 添加功能。有没有办法检查正在使用的设备是什么，然后相应地显示视图？

结构化英语：

IF current_device == iPhone THEN
    DISPLAY iPhoneView
ELSE IF current_device == iPad THEN
    DISPLAY iPadView

如果可能的话，我还希望 iPad 视图仅水平可用，然后 iPhone 视图仅在可能的情况下垂直可用。

我一直在使用 Expo 和 React-navigation 在移动设备和桌面设备上进行开发，到目前为止，它非常棒！但是，我需要在移动设备和桌面抽屉中显示底部选项卡。我在较小和较大的屏幕上应用不同的导航器时遇到了一些麻烦。我们希望在移动设备中显示选项卡，并在大屏幕中显示侧边栏。移动设备和大屏幕之间的路线结构不同。例如： 在移动屏幕中：

• 主导航器
  • 选项卡导航器
    • 屏幕A
    • 屏幕B
    • 屏幕C
  • 配置文件堆栈导航器
  • 设置堆栈导航器 在移动设备中，我们只希望 3 个屏幕位于选项卡内，而另一个屏幕不应显示选项卡。在较大的屏幕中：
• 主导航器
  • 抽屉导航器
    • 堆栈A
      • 屏幕A
      • 配置文件堆栈导航器（将堆栈放在这里，因为我们不希望配置文件堆栈导航器显示在抽屉项目列表中）
    • 堆栈B
      • 屏幕B
      • 设置堆栈导航器
    • 堆栈C
      • 屏幕 C 请注意，在较大的屏幕中，我们希望每个屏幕都位于抽屉导航器内（因为侧边栏将是持久的）

我们可以做的第一件事是进行条件渲染（基于尺寸），但是会出现几个问题：

1. 我们如何在屏幕上输入这个内容？
2. 结构不同，我们该如何导航？（路径也会不同，对吗？）

我正在考虑创建某种导航包装器，它将接收导航和当前屏幕作为参数。但对此并不确定。如果大家有什么想法或经历过，请分享！提前致谢！

我有一个从汉堡打开的简单导航菜单。当它打开时，如何防止屏幕上的所有滚动？导航栏是 100vh，我想防止在它打开时滚动经过它？

到目前为止导航菜单的 Js（没有滚动功能）

const navSlide = () => {
    const burger = document.getElementById('burger')
    const nav = document.getElementById('nav')
    const navLinks = document.querySelectorAll('.nav-links li')
    
    burger.addEventListener('click', () => {
        nav.classList.toggle('nav-active')
        navLinks.forEach( (link, index) => {
            if (link.style.animation) {
                link.style.animation = ''
            } else {
                link.style.animation = `navLinkFade 0.7s ease forwards ${index / 7 + 0.4}s`
                }
    })
    burger.classList.toggle('toggle')
  })
}

navSlide()

我正在尝试制作一个在移动设备和桌面设备上运行良好的响应式页面。我在 NestedScrollView 中使用 SliverAppBar。问题是 NestedScrollView 中完全忽略了对容器的 maxwidth 约束。此行为也与 CustomScrollView 相同。

如何限制 NestedScrollView 主体小部件中容器的大小。

下面是代码：

import "dart:math";
import "package:flutter/material.dart";

class ResponsiveSliver extends StatefulWidget {
  static const routeName = 'responsive-sliver';

  @override
  _ResponsiveSliverState createState() => _ResponsiveSliverState();
}

class _ResponsiveSliverState extends State<ResponsiveSliver> with SingleTickerProviderStateMixin {
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: NestedScrollView(
        floatHeaderSlivers: true,
        headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
          return <Widget>[
            SliverAppBar(
              title: Text(
                "Responsive Sliver",
              ),
              centerTitle: true,
              pinned: true,
              floating: true,
            ),
          ];
        },
        body: ConstrainedBox(
          constraints: BoxConstraints(maxWidth: 200), …