responsive-design 相关问题

响应式网页设计（RWD）是一种Web设计和开发方法，旨在制作网站，以便根据屏幕大小，平台和方向在各种设备上提供最佳体验。

是否有 HTML5 视频的 srcset 等效项？目前，我在一个页面上有一个视频网格，连续 3 个，共 5 行（总共 15 个视频），如下所示：是否有相当于 HTML5 视频的 srcset ？目前我在一个页面上有一个视频网格，连续 3 个，共 5 行（总共 15 个视频），都是这样的： <video width="400" poster="14.jpg" loop="loop" autoplay="autoplay"> <source src="14.webm" type="video/webm"> <source src="14.mp4" type="video/mp4"> </video> 我遇到的问题是我的页面请求大约为 6mb。由于我的视频网格是 3 宽... <div class="row"> <video width="400" poster="13.jpg" loop="loop" autoplay="autoplay"> <source src="13.webm" type="video/webm"> <source src="13.mp4" type="video/mp4"> </video> <video width="400" poster="14.jpg" loop="loop" autoplay="autoplay"> <source src="14.webm" type="video/webm"> <source src="14.mp4" type="video/mp4"> </video> <video width="400" poster="15.jpg" loop="loop" autoplay="autoplay"> <source src="15.webm" type="video/webm"> <source src="15.mp4" type="video/mp4"> </video> </div> ...很明显，对于屏幕尺寸约为 320 像素的小型设备，我不需要 3 400 像素的视频文件，我可以使用较小的视频文件。我正要开始重构来加载我的页面，如下所示： <div class="row"> <video width="400" poster="13.jpg" loop="loop" autoplay="autoplay"> </video> <video width="400" poster="14.jpg" loop="loop" autoplay="autoplay"> </video> <video width="400" poster="15.jpg" loop="loop" autoplay="autoplay"> </video> </div> 然后使用 JavaScript 基本上说： if($(window).width() < 500){ $('#video13').append('<source src="13-SMALL-FILE.mp4" type="video/mp4">') }else{ $('#video13').append('<source src="13-LARGE-FILE.mp4" type="video/mp4">') } 这是一个好的选择还是有更好的方法或已经存在的库？经过大量谷歌搜索后，我没有找到非常有用的信息。视频和图片元素长期以来都支持 media 属性，因此您可以执行多种操作，包括： <video playsinline muted preload="metadata"> <source src="" type="" media="(orientation: landscape)"> <source src="" type="" media="(orientation: portrait)"> </video> https://developer.mozilla.org/en-US/docs/Web/HTML/Element/source#using_the_media_attribute_with_video 仅当屏幕的 @media 为 max-width 时，您才可以使用 500px 查询来应用特定宽度： @media screen and (max-width:500px){ video { width:100% !important; } }

javascript video responsive-design html5-video pageload

回答 2 投票 0

为什么我的响应式设计的 HTML 结构无法正常工作？

我正在研究一种带有相关CSS的HTML响应式结构，从纸面上看，它应该非常简单，但最终对我来说一点也不简单。在该结构中有一个带有固定

html css responsive-design

回答 1 投票 0

强制柔性容器填充所有空间

当键盘打开时，如何强制我的小部件（2）填充整个屏幕空间并几乎隐藏我的小部件（1）？期望结果的示例位于期望行为图片下，我通过

flutter dart responsive-design

回答 1 投票 0

尝试为较小的设备创建响应式导航栏，但单击按钮后一切都消失了

我正在尝试创建一个示例响应式网页，带有适用于大屏幕和小屏幕的导航栏。我已经完成了大屏幕的部分。我正在尝试为较小屏幕设备创建，...

javascript html css responsive-design navbar

回答 1 投票 0

我的应用程序未检测到水平方向屏幕的布局文件夹

我创建了一个layout-land文件夹，其中保存了横向版本的特定布局的设计......问题是当我在手机上安装应用程序时，当我旋转时......

android android-studio responsive-design landscape-portrait

回答 1 投票 0

如何使标题仅响应？

有一个旧网站没有针对小屏幕进行优化（PHP + HTML/CSS/JS）。 head 部分缺少标签，因此显示页面内容...

html css responsive-design

回答 1 投票 0

右侧菜单栏和内容空间的填充是无穷无尽的

我正在尝试对齐菜单栏和内容侧空间。问题是菜单栏和内容空间的右侧没有留下侧面空间。我想给他们一些空间，就像左手一样......

html css responsive-design frontend

回答 1 投票 0

如何使用顺风CSS（响应性）将桌面优先的设计代码更改为移动优先

我用Html和tailwind css开发了一个网站，现在我需要使网站响应式。我刚刚发现 Tailwind 使用移动优先断点系统，同时我使用 ...

html responsive-design tailwind-css media-queries

回答 1 投票 0

当屏幕尺寸缩小时，如何将右栏部分定位在左栏部分下方（响应式设计）？

当屏幕较小时，我希望项目的“左侧”出现在项目左侧的上方。我遇到的问题是，随着屏幕缩小左侧

html css responsive-design vuejs3 bootstrap-5

回答 1 投票 0

通过元标签进行响应式网页设计

我想知道除了使用这个元标记之外，还有什么方法可以实现响应式网页设计：

css html responsive-design

回答 7 投票 0

如何强制Tailwind在桌面设备上使用移动课程？

我正在使用 Tailwind CSS。我的 CSS 支持两种设计尺寸：移动设备（<= 768px) desktop (> 768px）例如，我有这样的CSS：我是

css responsive-design tailwind-css

回答 1 投票 0

为什么GSAP在PC上Chrome的“移动视图”上运行良好，但在实际手机上却很混乱

所以，我正在开发一个项目，其中有一个动画，当用户滚动到它时会触发该动画。这适用于 PC，也适用于移动视图、chrome 中的“设备工具栏”，但是...

google-chrome mobile responsive-design gsap

回答 1 投票 0

如何使所有这些小图像在调整大小时停止移动

我必须制作一张包含所有这些位置点的地图。地图上已经有点，但他们想要悬停效果，所以我必须重新创建这些点，以便它们可以具有该效果，然后

html css responsive-design

回答 1 投票 0

TailwindCSS 断点在命中某些断点时不会触发

我正在开发一个 Next js + tailwindcss 项目，我试图使我的网站具有响应能力。这是我的组件：根据规则，这个div 我正在开发一个 Next js + tailwindcss 项目，我试图让我的网站具有响应能力。这是我的组件：<div className="flex md:hidden"> 根据规则，这个 div 应该首先将其显示设置为 flex，但是一旦达到屏幕尺寸“md”，它就应该隐藏。但由于某种原因它使自己隐藏起来，并且 flex 属性从未被应用。同样，第二种情况： `<div className="bg-red-200 xs:bg-blue-500 sm:bg-pink-600 md:bg-green-400 lg:bg-gray-50"` 测试时，每个屏幕尺寸仅应用“md”屏幕尺寸的背景颜色。我也尝试了自定义值，但没有解决任何问题，这是我的 tailwind.config.js 文件： /** @type {import('tailwindcss').Config} */ module.exports = { content: [ "./app/**/*.{js,ts,jsx,tsx}", "./pages/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}", ], theme: { screens: { 'xs': '320px', 'sm': '576px', 'md': '960px', 'lg': '1440px', 'xl': '1280px', '2xl': '1536px', }, extend: {}, }, plugins: [], } 我已经浏览了文档、许多 StackOverflow 问题和 Youtube 视频，但我不知道为什么会发生这种情况，请帮我找到原因，谢谢。发生这种情况是因为它不是最大显示而是最小显示，所以如果您使用md，它将影响lg和md显示，我遇到了同样的问题，我找到的解决方案是使用max-md md:hidden 到 max-md:hidden 使用 max 使其仅适用于该显示我也有同样的问题。你解决这个问题了吗？

css next.js responsive-design tailwind-css

回答 2 投票 0

如何重构此页面，使其能够响应 ipad 尺寸

我有一个登陆页面需要修复，而且我对 CSS 很生疏。目前我有一个布局，有很多固定宽度和绝对定位，我知道在尝试创建时这是有问题的......

html css responsive-design

回答 1 投票 0

制作圆边三角形对话框

我们正在开发一个应用程序，在该应用程序中，我们在 div 中显示文本，如聊天框方向，但有一条小曲线，如下面的屏幕截图所示。需求截图（紫色标记）需要...

html css responsive-design

回答 1 投票 0

为什么改变响应式布局时第一步会随着页面移动？

有问题的代码：https://jsfiddle.net/3uLj8rw6/ 首先，我想提一下，我仍在学习 HTML、CSS 和 Sass。当