标签: responsive
响应式iframe,下方有固定div
给定以下DOM结构:
<div>
<iframe src="https://www.youtube.com/embed/OYbXaqQ3uuo></iframe>
</div>
<div id="bottom-bar">Lorem Ipsum</div>
(有关详细信息和我已经使用的样式,请参阅此JSFiddle)
如何将#bottom-bar固定在底部,同时其顶部的视频保持响应并调整到可用空间,而不会干扰底栏？我正在考虑使用始终位于其下方的滚动/信息栏来实现典型的视频播放器体验.
我更喜欢只有CSS的解决方案.
推荐指数
解决办法
查看次数
响应断点不适用于光滑的滑块
我已经实现了光滑的滑块,可以正常工作而无需调整浏览器的大小.但是当我将浏览器的大小调整为1024时,响应断点设置不起作用.
Jquery--
$('.slider').slick({
centerMode: true,
slidesToShow: 1,
slidesToScroll: 1,
dots: true,
infinite: true,
cssEase: 'linear',
variableWidth: true,
variableHeight: true,
mobileFirst: true,
responsive: [{
breakpoint: 1024,
settings: {
slidesToShow: 4,
slidesToScroll: 1,
centerMode: false
}
}]
});
演示 - https://jsfiddle.net/squidraj/hn7xsa4y/4/
任何帮助都非常感谢.
推荐指数
解决办法
查看次数
父元素的 CSS vmin 等效项
是否有一个 CSS 相当于相vmin对于父元素而不是视口的较小尺寸？
我有一个左侧有导航面板的页面，因此只有部分视口宽度可用于主要内容，并且我试图拥有一个不会从 main 溢出的响应式正方形<div>。我找到了响应式方块的代码作为这个问题的答案，但是在横向模式下，方块的高度会溢出。
我可以使用 JavaScript 通过侦听窗口大小调整来重新计算正方形的宽度作为父级宽度和高度之间的最小尺寸，但在我的实际网站中，父级大部分时间都在，display: none因此它没有宽度，我想避免当它出现时需要重新计算尺寸。
这是一个 JsFiddle，其中包含突出问题的示例和背景： https: //jsfiddle.net/wy874pqv/4/。下面是我使用的代码。
HTML：
<body>
<div id="main">
<div class="wrapper">
<div class="one-by-one aspect-ratio"></div>
<div class="content">
<div class="circle">
</div>
</div>
</div>
</div>
<div id="leftPanel">
</div>
</body>
CSS：
body {
height: 100vh;
padding: 0;
margin: 0;
}
div#leftPanel {
height: 100%;
width: 20%;
position: absolute;
left: 0;
margin: 0;
background: red;
}
div#main {
height: 100%;
width: 80%;
position: absolute;
right: 0;
margin: …推荐指数
解决办法
查看次数
CSS 保持纵横比不起作用
这是最奇怪的事情，我以前曾多次使用过这种方法，但现在它似乎对我来说不起作用。
这是一个重复的问题，提供了此方法作为答案：
但由于某种未知的原因，它在 Firefox 和 Chrome 中对我来说是崩溃的。据我所知，它是根据我应用样式的元素的父元素计算填充...
在这种情况下，它不会查看.test，而是查看.parent计算填充：
.parent {
width: 200px;
}
.test {
width: 50px;
background: red;
padding-top: 100%;
}<div class='parent'>
<div class='test'></div>
</div>推荐指数
解决办法
查看次数
默认情况下是角度响应吗？
我有一个用 Angular 4 开发的应用程序，但它没有响应，所以想知道： 1. 默认情况下最新版本的 Angular 响应。2. 使 angular 4 应用程序响应的最佳方法是什么。Bootstrap 或媒体查询？或者有没有其他更简单更好的方法。
推荐指数
解决办法
查看次数
bulma - 有效地调整排版大小
我很难找出调整移动文本大小的最有效方法。我知道根据文档，使文本大小响应屏幕非常简单，只需将is-size-*-mobile类添加到元素中即可将*移动设备的文本大小重置为(1-7)的值。什么元素是最好的地方呢？例如，我希望能够在移动设备上将屏幕上的所有文本更改为 7 大小，但到目前为止，我不得不将该is-size-7-mobile类添加到页面上的几乎每个文本容器中。虽然这并非不可能，但它似乎违背了通过 CSS 提供这样一个类的目的。
任何提示将非常感谢。
推荐指数
解决办法
查看次数
基于元素大小的 Material UI 响应式
我正在使用 React 和 MaterialUI 来构建一个系统，该系统将在另一个（不是基于 React 的）网站中显示小部件。我想让小部件具有响应性，但它们需要响应自己的容器宽度而不是窗口宽度，因为我不知道小部件将占用多少页面。
我考虑过的选项：
- 按时间间隔轮询容器大小
- 在窗口调整大小事件上轮询容器大小
- 在启动时根据容器和窗口大小设置主题断点
这些对我来说似乎都是相当丑陋的解决方案。有没有一种优雅的方式来做我想做的事？
推荐指数
解决办法
查看次数
SwiftUI：在 iPhone 8 上进行测试会削减部分视图，在某些组件上增加太多高度会导致白屏
我一直在做一个项目并使用模拟器和预览，一切顺利，直到我将应用程序加载到我的 iPhone X。结果是一个白屏。似乎如果我添加了许多超过屏幕高度的组件，应用程序就会崩溃。模拟器不适用于 iPhone X 仅适用于 Max 版本。我设法通过删除框架属性上的高度和宽度来修复它，但感觉它不应该发生。
此外，当使用 iPhone 8 和 iPhone X 的模拟器进行测试时，对于 8，它的内容比屏幕大，但无法向下滚动。 
- 如何使 iPhone 8 屏幕可滚动但较大的设备不能滚动？
- 您是否遇到过添加太多内容而屏幕会变黑或变白的情况？
推荐指数
解决办法
查看次数
如何使列宽不均匀的 CSS 网格具有响应性？
我创建了一个 CSS 网格，每行有 2 列。第一列占宽度的 25%，第二列占宽度的 75%。我已经实现了这个使用
.grid-container{
display:inline-grid;
grid-template-columns: 1fr 3fr;
}
现在，我想让它具有响应能力，以便当屏幕尺寸减小到超过某一点时，该列应该彼此重叠，并且每一列应该占据宽度容器的 100%。
我在网上遇到的每个解决方案都使其具有响应性，但它也会将我的初始列宽从 25%:75% 更改为 50%:50%，我想避免这种情况。任何建议或提示将不胜感激。谢谢大家！
推荐指数
解决办法
查看次数
Google Lighthouse：使用了错误的 SRCSET 图像
我正在使用图像滑块（猫头鹰旋转木马 2）并实现了图像，如下所示：
<img loading="lazy" itemprop="image" srcset="
image-320.jpg 320w,
image-480.jpg 480w,
image-640.jpg 640w"
sizes="(max-width: 680px) 320px, 480px"
src="image-640.jpg"
width="480" height="720">
在 Chrome 开发工具中针对移动视图运行 Lighthouse 时，我收到（除其他外）以下“投诉”：
**Properly size images**
Serve images that are appropriately-sized to save cellular data and improve load time.
由此 Lighthouse 引用image-640.jpg
然而，根据我的图像标签中的定义，应该考虑 image-320.jpg 。至于 SRC 属性，我想保留 image-640.jpg 变体。
我的图片标签的结构有问题吗？
预先非常感谢并致以最良好的祝愿，亚历克斯
推荐指数
解决办法
查看次数
标签 统计
responsive ×10
css ×5
angular ×1
aspect-ratio ×1
browser-bugs ×1
bulma ×1
css-grid ×1
full-width ×1
grid-layout ×1
html ×1
iframe ×1
image ×1
jquery ×1
lighthouse ×1
material-ui ×1
reactjs ×1
sizing ×1
slick.js ×1
srcset ×1
swift ×1
swiftui ×1
widget ×1
xcode ×1