css - 移动设备上的固定内容,一个好的解决方法?

标签 css grid popup media-queries user-experience

我目前正在使用 CSS Grid 开发一个网站,并且我一直试图在响应式设计方面对其进行尽可能好的调整。它在 width: 320px 及以上的所有设备上看起来都很棒,但是,我现在唯一的问题是我的网站上有几个按钮可以创建模式/弹出窗口,即固定的覆盖。在有点大的屏幕上它看起来不错,对于 width: 320px 也是如此,但是如果屏幕高度太小,我现在无法做更多的事情来从弹出窗口中删除内容通过媒体查询而不使其无用。正如您可能知道的那样,它不可滚动,所以我现在有点走投无路了。

那么,对于较小屏幕上的弹出窗口是否有某种很酷的解决方案,或者是不创建弹出窗口的唯一方法?

最佳答案

首先:尽量不要在模态窗口中放置过多的内容和功能。尤其是在移动设备上,它们通常会被用户认为是负面的。相反,尝试解决页面上的简单任务(可能是渐进式的)或单独页面上的复杂任务。如果模态窗口的内容超出了小屏幕的内容,那么您的任务对于模态窗口来说可能太大了。

关于实现:有不同的方法来实现模态窗口/弹出窗口,它们也应该提供滚动。您能否告诉我们您是如何实现的,以及您尝试过哪些替代方案?

关于css - 移动设备上的固定内容,一个好的解决方法?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50340375/

相关文章:

未强制 WPF 网格列 MaxWidth

javascript - 如何检测弹出窗口是否在 chrome 中被阻止

javascript - 在 JavaScript 中打开新的浏览器窗口而不使其处于事件状态

javascript - Gulp less 未正确处理包括未定义的包含变量

java - 在 GXT 3.0 中合并值(value)提供者

前面带有标签的 JavaFX ImageView

javascript - 有没有办法使用 javascript 检测元素在哪个 CSS 网格列和行中?

javascript - 如何聚焦弹出窗口?

html - 电子邮件中的横向/纵向图像

javascript - 如何调整光滑轨道上图像的宽度