responsive-design 相关问题

如何在不使用 react-native 的 Dimension 属性的情况下使 React-Native 应用响应？

我想让 React-Native 应用程序在不使用尺寸的情况下响应，因为每次它根据窗口大小计算屏幕高度和宽度，并且每次在

“反应不够”？

我正在编写我的第一个项目，我有两个问题。 我想让网页响应。 我使用了手机尺寸 (360px) 和平板电脑尺寸 (768px)，我的笔记本电脑尺寸是基本尺寸。 现在在这里...

（关闭！）当屏幕太小时，我可以让按钮出现在新的一行吗？ HTML、CSS

我不知道这篇文章是否重复，因为我没有找到其他任何东西，但是当 HTML 中的屏幕太小时，我可以更改第二个按钮进入另一“行”的按钮吗？看...

在屏幕太小的时候可以让按钮换行吗？ HTML、CSS

我不知道这篇文章是否重复，因为我没有找到其他任何东西，但是当 HTML 中的屏幕太小时，我可以更改第二个按钮进入另一“行”的按钮吗？看...

<img> 和<nav> 没有将自己推到最大宽度

我有一个带有全局导航栏的固定标题。问题是 globalnav 中的徽标和导航菜单没有将自己推到容器的最大宽度。

Bootstrap网格结构中的响应式问题

我用引导网格制作了很多按钮，我希望这些按钮在移动视图中位于侧边栏下方。 [桌面视图移动视图](https://i.stack.imgur.com/2K70m.png) 我用引导网格制作了很多按钮，我希望这些按钮在移动视图中位于侧边栏下方。 [桌面视图]() <div class="container"> <div class="row row-cols-xl-4 m-0 "> <div class="col"> <div class="p-2 m-2 bg-primary buttons rounded"> <div id="NotDurumRapor" class="tile"> <div class="tile-body"> <i class="fa fa-bar-chart-o"></i> </div> <div class="tile-object"> <div class="name"> Not Durum </div> <div class="number"> </div> </div> </div> </div> </div> <div class="col"> <div class="p-2 m-2 bg-primary buttons rounded"> <div id="NotDurumRapor" class="tile"> <div class="tile-body"> <i class="fa fa-calendar"></i> </div> <div class="tile-object"> <div class="name"> Ders Programı </div> <div class="number"> </div> </div> </div> </div> </div> 我只分享了 2 个按钮的代码，它对其他按钮重复相同的代码。当我在这个类中包含行类时，我想要的视图是部分形成的，但是在桌面视图中，它在边缘框下面。

Auto Fit inner div grid to outer column and row height with CSS

我有一个图片库，它包含的 div 溢出了。我尝试了各种解决方案都无济于事。什么 CSS 代码方法将使网格适合固定高度的外部 div，包括制作 ...

Bootstrap 网格：向“一侧”流动

我正在使用 Bootstrap 的网格系统进行布局。 我目前有这样的事情： ... 我正在使用 Bootstrap 的网格系统进行布局。 我目前有这样的东西： <div class="container"> <div class="col-xs-8">...</div> <div class="col-xs-4">...</div> </div> 我真正想要实现的是让第二列占据剩余的可用水平空间，即第二列的行为就像在流体容器中一样，但第一列仍然像在固定容器中一样。 我尝试使用 :after 伪选择器来引入一个出现在第二列旁边的块（这没关系，因为“whole-width-column”纯粹是为了美观），但我无法得到它占用all空间。 如果有人对如何以一种很好的方式实现这一点有任何想法，将不胜感激。 编辑：使事情更直观： 红色块是我目前拥有的（宽度为 4 的列），绿色块是我想要的。 我找到了一个优雅的解决方案。 包装容器类用于更改其下容器的行为，而不是全局更改它。 另外， margin-right: 0 用于从右侧设置容器流体，您可以使用 margin-left: 0 将其设置为另一侧流体。 N.B：如果容器没有到达屏幕边缘，只需从列中删除填充。 @media (min-width:768px) { .YourWrappingContainerClass .container { width: calc(((100% - 750px) / 2) + 750px) !important; margin-right: 0; } } @media (min-width:992px) { .YourWrappingContainerClass .container { width: calc(((100% - 970px) / 2) + 970px) !important; margin-right: 0; } } @media (min-width:1200px) { .YourWrappingContainerClass .container { width: calc(((100% - 1170px) / 2) + 1170px) !important; margin-right: 0; } } bootstrapcontainercontainer-fluidcss 如果您使用引导程序的 SASS，替代解决方案： // Custom mixin to generate container-fluid-left and container-fluid-right (fluid on the left/right and normal max width on the other) // For each breakpoint, define the maximum width of the container in a media query @mixin make-container-fluid-side-max-widths($side, $max-widths: $container-max-widths, $breakpoints: $grid-breakpoints) { margin-#{$side}: 0; padding-#{$side}: 0; .row{ margin-#{$side}: 0; } .col, .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col-auto, .col-lg, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-auto, .col-md, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md-auto, .col-sm, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-auto, .col-xl, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-auto{ padding-#{$side}: 0; } @each $breakpoint, $container-max-width in $max-widths { @include media-breakpoint-up($breakpoint, $breakpoints) { max-width: calc( 100% - (100% - #{$container-max-width}) / 2 ); } } } .container-fluid-left { @include make-container(); @include make-container-fluid-side-max-widths('left'); } .container-fluid-right { @include make-container(); @include make-container-fluid-side-max-widths('right'); } 生成两个类 - container-fluid-left 和 container-fluid-right - 它们在左侧/右侧是流动的，并且只占据与另一个普通容器相同的空间。 您需要做的就是将容器的右侧填充设置为 0 并覆盖引导程序放置在其上的最大宽度。 .container { padding-right: 0px; max-width: none; } 演示 编辑：您可以尝试的另一种解决方案是： .container { padding-left: 0px; padding-right: 0px; margin-right: 0px; max-width: none; } 新演示 演示：http://jsbin.com/titik/1/ HTML <div class="container"> <div class="col-xs-8">Content</div> <div class="col-xs-4"><div class="well">Words go in here words go in here Words go in here words go in here Words go in here words go in here Words go in here words go in here Words go in here words go in here </div></div> </div> CSS body {overflow-x:hidden} .well { z-index: 3; border: 0px; background: red; position: relative; } .well:after { content: ''; position: absolute; top: 0; bottom: 0; left:80%; right:-3000px; background: red; z-index: -1; } 此代码工作屏幕大小限制 1200px 到更大。仅在大于 1200 像素的设备中检查此代码。如果设备尺寸小于 1200px 布局是正常的Demo .main-box { background-color: #ccc; } .col-sm-6 { height: 50px; } .first-col { background-color: #f4b334; } @media only screen and (min-width: 1200px) { .first-col { padding-left: calc((100% - 1160px) / 2); /* 1160px is your container width or web width*/ } } <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script> <div class="container-fluid main-box"> <div class="row"> <div class="col-sm-6 first-col"> <h2>Hello World</h2> <p>this is example text</p> </div> <div class="col-sm-6"> </div> </div> </div> .container { margin: 0 0 0 auto; padding-right: 0; } 这将 0 边距应用到除左侧之外的所有边，左侧设置为自动。然后让第二列与右侧对接，移除填充物。 演示 我也为同样的事情而苦苦挣扎。我现在制作了一个版本，适用于左侧的 1/3 列和右侧的 2/3 + 全宽列。如果还有时间，我可以根据所有 col-- 选项添加所有选项。 我所做的是使用 100vw 并扣除（使用 SASS 变量）固定宽度和其中的一半以添加到左边距，并在右侧添加 0 边距。我再次将列分成 1/3 和 2/3 + 边距： .container-fluid-right { width:calc(100vw - 30px) !important; overflow-x:visible; padding-left:0px; padding-right:0px; > .row > :first-child { padding-left:15px; padding-right:15px; } > .row > :last-child { padding-right:0px; padding-left:0px; float:right; margin-right: 0px; } @include when-sm { > .row > :first-child { width:calc(#{$screen-sm-min} * 1 / 3); margin-left: calc((100vw - #{$screen-sm-min}) / 2); } > .row > :last-child { width:calc((#{$screen-sm-min} * 2 / 3) +((100vw - #{$screen-sm-min}) / 2)); } } @include when-md { > .row > :first-child { width:calc(#{$screen-md-min} * 1 / 3); margin-left: calc((100vw - #{$screen-md-min}) / 2); } > .row > :last-child { width:calc((#{$screen-md-min} * 2 / 3) +((100vw - #{$screen-md-min}) / 2)); } } @include when-lg { > .row > :first-child { width:calc(#{$screen-lg-min} * 1 / 3); margin-left: calc((100vw - #{$screen-lg-min}) / 2); } > .row > :last-child { width:calc((#{$screen-lg-min} * 2 / 3) +((100vw - #{$screen-lg-min}) / 2)); } } } 我使用了来自另一张海报的 when-sm / when-md / when-lg，这些是 mixins： @mixin when-xs() { @media (max-width: $screen-xs-max) { @content; } } @mixin when-sm() { @media (min-width: $screen-sm-min) { @content; } } @mixin when-md() { @media (min-width: $screen-md-min) { @content; } } @mixin when-lg() { @media (min-width: $screen-lg-min) { @content; } } 对于原始海报布局（8 左 4 右），唯一的区别是将 1/3 和 2/3 左右切换 我遇到了同样的问题，决定完全跳过 .container 类。我像这样创建了一个名为 .container-only-left 的类 .container-only-left { margin-left: calc(50% - 255px); @media (min-width: 768px) { margin-left: calc(50% - 345px); } @media (min-width: 992px) { margin-left: calc(50% - 465px); } @media (min-width: 1200px) { margin-left: calc(50% - 555px); } } 只要将 .container-only-left 类放在一个覆盖 100vw 的元素中，这对我有用。 Bootstrap 5 的版本，如果你使用的是预编译的 CSS。给 https://stackoverflow.com/a/64542602/1096128 的小费 .container-fluid-right { margin-right: 0; padding-right: 0; .row{ margin-right: 0; > [class*=' col-']:last-child, > [class^='col-']:last-child{ padding-right: 0; } } } @media (min-width: 576px) { .container-fluid-right { max-width: calc( 100% - (100% - 540px) / 2 ); } } @media (min-width: 768px) { .container-fluid-right { max-width: calc( 100% - (100% - 720px) / 2 ); } } @media (min-width: 992px) { .container-fluid-right { max-width: calc( 100% - (100% - 960px) / 2 ); } } @media (min-width: 1200px) { .container-fluid-right { max-width: calc( 100% - (100% - 1200px) / 2 ); } } @media (min-width: 1400px) { .container-fluid-right { max-width: calc( 100% - (100% - 1320px) / 2 ); } } https://codepen.io/sawacrow/pen/Jjmvydx <div class="container-fluid-sticky-right bg-success"><h1>sticky right container</h1></div> <div class="container "><h1>normal container</h1></div> <div class="container-fluid-sticky-left bg-warning"><h1>sticky left container</h1></div> js function containerFluidder() { var container = document.querySelector('.container'); var distanceFromWindow = container.offsetLeft; var containerStyles = window.getComputedStyle(container); var paddingOneSide = parseInt(containerStyles.paddingLeft) distanceFromWindow = distanceFromWindow + paddingOneSide; document.querySelectorAll('.container-fluid-sticky-left').forEach((el) => { el.style.marginRight = distanceFromWindow + 'px'; }); document.querySelectorAll('.container-fluid-sticky-right').forEach((el) => { el.style.marginLeft = distanceFromWindow + 'px'; }); } containerFluidder(); //add event listener to window resize and call containerFluidder window.addEventListener('resize', containerFluidder);

如何将一个视频置于另一个视频的中心

我想要一个背景视频作为我的着陆页的一部分，在该视频的顶部有一个居中的徽标（这是另一个视频）。从本质上讲，当涉及到响应能力时，我想要任何...

已解决：隐藏我的导航栏的 js 在移动设备中造成问题

已解决：我在 js 中遇到了一些问题，我得到了一些代码来在我向下滚动时隐藏顶部栏导航，并在我向上滚动时显示出来，它确实有效。当我添加一些时我遇到了一些麻烦......

搜索按钮下方的搜索栏 - 点击

我正在使用 bootstrap 3 为 angular 4 应用程序开发网页。 尝试添加一个搜索按钮（右上角/左上角），单击该按钮将在下一行中展开。请参阅右上角的搜索按钮...

隐藏我的导航栏的 js 在移动设备中造成麻烦

我在 js 上遇到了一些麻烦，我得到了一些代码来在我向下滚动时隐藏顶部导航栏，并在我向上滚动时显示出来，它实际上是有效的。当我添加一些媒体 q 时，我遇到了一些麻烦......

使用 CSS 自动缩放具有背景的 div 以适应其父元素

我正在制作一个由左右部分组成的应用程序布局。 。容器 { 显示：弹性； 弹性：1； 弹性方向：行； 证明内容：空格之间； 对齐项目：居中...

React 对话框不会在移动设备上关闭

我在 gitHub 页面上部署了一个站点（一个反应应用程序）。有卡片，当您单击其中一张时，它会打开一个模式/对话框。一旦打开点击模态应该将其关闭。在电脑上...

如何针对不同的视口尺寸将下拉内容与其按钮对齐？

我不断更改下拉内容的位置，以便它们可以与按钮对齐，但我需要让它们粘在一起，以便在不同的视口上，我不必更改它们的位置...

尝试将 CSS 网格转换为 Bootstrap5 响应式网格，为什么列没有显示为框？

所以，这是学校的作业，几天来我一直在努力解决这个问题。 这个作业的目标是：用 Bootstrap 5 替换 CSS 网格。布局的每个部分都需要使用

桌面模拟站点：如何在响应式桌面模拟站点中结合display: flex in grid system和JavaScript编写的选择工具？

我正在使用纯 HTML、CSS 和 JavaScript 开发桌面模拟网站。我使用 display: flex 和 JavaScript 创建了一个网格系统，允许用户在桌面上移动快捷方式 (

使用 CSS 自动缩放 div 以适应其父元素

我有多个 div，里面有一个背景图片。此背景图像具有一定的高度和宽度，并且在其上方放置了绝对元素。 要求是需要制作背景...

如何在弹性容器上没有固定大小的情况下为溢出的弹性项目创建滚动条？

假设我们有一些 HTML 代码，如下所示： // 我将其更改为一些固定值，例如 1500px，但没有任何变化 假设我们有一些如下所示的 HTML 代码： <div id="root" style="max-width: 85%"> // I changed this to some fixed value like 1500px but nothing changed <div id="main" style="width: 100%"> <div id="container" style="display: flex; max-width: 100%; overflow: scroll;"> <div style="width: 500px; height: 500px">1</div> <div style="width: 500px; height: 500px">2</div> <div style="width: 500px; height: 500px">3</div> <div style="width: 500px; height: 500px">4</div> <div style="width: 500px; height: 500px">5</div> <div style="width: 500px; height: 500px">6</div> <div style="width: 500px; height: 500px">7</div> <div style="width: 500px; height: 500px">8</div> <div style="width: 500px; height: 500px">9</div> </div> </div> </div> 问题是我希望弹性项目在超过其容器大小时具有水平滚动，但它们以我定义的方式溢出。我搜索了但没有找到任何东西。任何帮助将不胜感激。 编辑： 我不得不提到我不想将 flex 容器宽度设置为某个固定值，因为响应性否则在那种情况下它工作正常 <div id="root" style="max-width: 85%"> <div id="main" style="width: 100%"> <div id="container"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> <div>9</div> </div> </div> </div> <style> #container { display: flex; flex-wrap: nowrap; overflow-x: auto; } #container > div { flex: 0 0 auto; width: 500px; height: 500px; margin-right: 10px; } </style>

在这个例子中，当 srcset 中有更好的图像时，为什么 Chrome 会选择更大的图像？

我正在尝试了解响应式图像的基础知识。 我有这个非常简单的网页： http://chubby-orange-fox.s3-website.eu-north-1.amazonaws.com/test.html ...