responsive-design 相关问题

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

如何将篮球记分牌的得分文本居中?

我正在制作篮球记分板,我想知道如何将记分板容器内的得分文本居中? 虽然主 div 已设置为 Flex 容器,但 p 分数文本位于...

回答 1 投票 0

div位于底部中心而不滚动

我想创建一个静态页面,其中包含完全没有内容的 YouTube 视频。我需要将视频 div 放在页面的中心底部,无需滚动,也无需提及高度和宽度{因为我是你...

回答 2 投票 0

为什么在编辑器中显示良好而在模拟器中显示完全不同?

我正在 Android studio 中设计我的 Android 应用程序。在设计视图中,它看起来像我想要的,但在模拟器中完全不同。所有约束均已添加。 我想知道如何解决...

回答 1 投票 0

使用 Flexbox 和其他 div 进行 CSS 格式化

我正在尝试使用CSS格式化网页,使其看起来像这样: 这个想法是页面响应如下;红色和蓝色列(左和右)应各自具有设定的宽度。

回答 1 投票 0

如何让我的网站响应手机?

我无法让我的网站在手机上正确显示。它应该是这样的(来自我正在关注的教程): 不幸的是,这就是我的 Samsung Galaxy S5 上的样子: 我是...

回答 2 投票 0

我如何确定是否使用手机或ipad来处理不同的选择

我的 Web 应用程序有一个多重选择字段,但它由 100 个值组成,因此在我的 PC 上测试时,必须使用滚动来查看整个列表,并按住 Control 键单击来选择多个值...

回答 1 投票 0

将云图标居中到导航边框背景的右中

我正在构建一个垂直导航栏,并且想要添加一个以右边框为中心、直接在背景线上的云图标。 ... 我正在构建一个垂直导航栏,并且想要添加一个以右边框为中心、直接在背景线上的云图标。 <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> <div class="cloud-icon"> <svg>...</svg> </div> </nav> 这是code-pen示例。我非常努力地完成这项工作,因此我们将不胜感激任何和所有反馈。 我尝试过使用 flex-box、css-grid 和边距来做到这一点,老实说,只是让它定位并保持在右侧,我就陷入困境,更不用说移动响应了。 我编辑了 svg 视图框以使其居中 :root { --beige: #d9d9d9; } .contents { height: 100vh; width: 115%; margin: 0; display: grid; grid-template-columns: 1fr auto; } body { margin: 0; } nav { background-color: var(--beige); width: 50%; display: flex; } nav ul { list-style-type: none; margin: 0; overflow: hidden; height: 100%; display: flex; flex-direction: column; justify-content: center; } nav li { padding: 3%; } nav a { text-decoration: none; font-size: 1rem; letter-spacing: 11px; } .cloud { grid-column: 2; align-self: center; } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="style.css" /> </head> <body> <nav> <div class="contents"> <ul> <li><a href="index.html">Home</a></li> <li><a href="about.html">About</a></li> <li><a href="contact.html">Contact</a></li> </ul> <span class="cloud"> <svg width="132" height="60" viewBox="127.037 138.437 123.778 64.061" xmlns="http://www.w3.org/2000/svg"> <path d="M 238.358 176.764 C 236.657 179.93 233.537 182.461 229.622 183.849 C 225.707 185.238 221.287 185.382 217.246 184.252 L 216.805 184.121 C 214.807 183.557 213.071 182.515 211.827 181.134 C 210.583 179.752 209.892 178.097 209.845 176.389 C 209.851 175.101 210.242 173.832 210.985 172.692 C 211.729 171.551 212.802 170.572 214.114 169.837 C 214.538 169.602 214.846 169.253 214.981 168.852 C 215.117 168.451 215.073 168.024 214.856 167.647 C 214.67 167.34 214.384 167.081 214.028 166.896 C 213.672 166.711 213.261 166.608 212.838 166.599 C 212.425 166.599 212.022 166.697 211.678 166.88 C 209.859 167.899 208.354 169.24 207.276 170.801 C 206.199 172.361 205.577 174.1 205.46 175.884 C 205.379 178.154 206.104 180.395 207.552 182.342 C 208.999 184.29 211.107 185.862 213.627 186.873 C 212.264 189.048 210.205 190.889 207.664 192.205 C 205.122 193.522 202.191 194.266 199.173 194.361 C 197.476 194.407 195.791 194.104 194.278 193.482 C 192.765 192.86 191.472 191.939 190.519 190.804 C 190.308 190.565 190.03 190.369 189.708 190.232 C 189.385 190.096 189.028 190.022 188.663 190.018 C 188.303 190.032 187.952 190.114 187.638 190.257 C 187.324 190.4 187.055 190.6 186.854 190.842 C 185.012 193.329 182.069 195.16 178.618 195.965 C 175.168 196.769 171.468 196.487 168.266 195.174 C 165.064 193.862 162.598 191.618 161.367 188.896 C 160.136 186.174 160.232 183.176 161.635 180.508 C 162.29 178.927 163.634 177.592 165.418 176.752 C 167.202 175.911 169.304 175.623 171.333 175.94 C 173.416 176.327 175.236 177.346 176.414 178.786 C 176.699 179.071 177.082 179.283 177.515 179.394 C 177.948 179.505 178.413 179.512 178.85 179.412 C 179.287 179.312 179.679 179.111 179.976 178.833 C 180.273 178.556 180.462 178.214 180.52 177.85 C 180.521 177.552 180.416 177.26 180.219 177.008 C 179.043 175.502 177.398 174.272 175.45 173.439 C 173.502 172.607 171.316 172.2 169.113 172.261 C 166.909 172.322 164.764 172.847 162.89 173.785 C 161.016 174.723 159.48 176.04 158.433 177.607 C 156.666 180.278 155.954 183.322 156.392 186.33 C 152.473 186.747 148.489 186.189 144.974 184.731 C 141.458 183.272 138.578 180.983 136.718 178.168 C 135.866 176.895 135.397 175.477 135.349 174.031 C 137.943 174.637 140.698 174.622 143.281 173.987 C 145.864 173.352 148.162 172.125 149.896 170.455 C 151.056 169.18 152.686 168.235 154.554 167.754 C 156.421 167.273 158.429 167.282 160.289 167.778 C 160.619 167.859 160.967 167.875 161.306 167.826 C 161.644 167.778 161.964 167.665 162.238 167.497 C 162.514 167.33 162.735 167.112 162.885 166.861 C 163.034 166.61 163.107 166.334 163.097 166.056 C 163.014 163.528 163.809 161.031 165.392 158.848 C 166.974 156.665 169.281 154.882 172.052 153.701 C 173.237 153.196 174.536 152.889 175.872 152.799 C 177.207 152.709 178.552 152.837 179.824 153.177 C 179.824 153.42 179.639 153.626 179.569 153.85 C 178.811 156.349 179.088 158.979 180.358 161.338 C 181.29 163.093 182.746 164.633 184.596 165.822 C 186.446 167.011 188.633 167.812 190.96 168.153 C 191.816 168.287 192.686 168.356 193.559 168.358 C 196.505 168.334 199.373 167.584 201.777 166.209 C 204.182 164.834 206.009 162.9 207.015 160.665 C 207.117 160.424 207.152 160.168 207.12 159.915 C 207.087 159.661 206.987 159.417 206.826 159.198 C 206.665 158.979 206.447 158.791 206.187 158.647 C 205.927 158.502 205.632 158.405 205.321 158.362 C 204.812 158.306 204.295 158.388 203.85 158.594 C 203.405 158.801 203.057 159.121 202.862 159.504 C 202.158 161.026 200.885 162.334 199.219 163.248 C 198.084 163.885 196.797 164.324 195.44 164.54 C 194.084 164.755 192.686 164.74 191.337 164.498 C 189.987 164.255 188.715 163.789 187.6 163.129 C 186.485 162.469 185.551 161.63 184.859 160.665 C 183.57 158.411 183.339 155.857 184.209 153.476 L 184.557 152.746 C 185.903 149.933 188.362 147.556 191.552 145.985 C 194.742 144.414 198.485 143.736 202.201 144.056 C 205.918 144.376 209.399 145.676 212.107 147.755 C 214.814 149.833 216.596 152.575 217.176 155.554 C 217.289 155.98 217.583 156.36 218.006 156.63 C 218.43 156.9 218.957 157.043 219.496 157.033 C 223.003 156.986 226.483 157.541 229.704 158.662 C 233.809 160.152 237.021 162.889 238.641 166.278 C 240.261 169.667 240.159 173.435 238.358 176.764 Z" fill="black" transform="matrix(1, 0, 0, 1, -3.552713678800501e-15, -3.552713678800501e-15)"/> </svg> </span> </body> </html>

回答 1 投票 0

具有不同文件的 HTML5 视频,用于响应式设计

是否有 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; } }

回答 2 投票 0

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

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

回答 1 投票 0

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

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

回答 1 投票 0

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

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

回答 1 投票 0

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

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

回答 1 投票 0

如何使标题仅响应?

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

回答 1 投票 0

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

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

回答 1 投票 0

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

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

回答 1 投票 0

当屏幕尺寸缩小时,如何将右栏部分定位在左栏部分下方(响应式设计)?

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

回答 1 投票 0

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

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

回答 7 投票 0

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

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

回答 1 投票 0

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

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

回答 1 投票 0

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

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

回答 1 投票 0

© www.soinside.com 2019 - 2024. All rights reserved.