responsive-design 相关问题

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

我正在尝试将我的标题“Scream”居中这就是它的样子 https://codepen.io/luciajv/pen/dyaPNwB 我不明白为什么标题（titulo）在使用了 justify 后不是 Aligen，a...

html css responsive-design

回答 1 投票 0

我有这个简单的 foo.svg：我有这个简单的 foo.svg： <?xml version="1.0" encoding="UTF-8" ?> <svg xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" > <symbol id="test" viewBox="0 0 40 20" preserveAspectRatio="xMinYMin meet"> <rect width="40" height="20" fill="currentColor" /> </symbol> </svg> 此 html 中使用的是： <!DOCTYPE html> <html><head> <style> .logo {color:#f0f; border:1px solid #0f0; height:1em; width:auto;} </style> </head><body> <svg class="logo"> <use xlink:href="foo.svg#test" x="0" y="0" /> </svg> </body></html> 遗憾的是，如果我将高度设置为 1em，则 rect 会渲染为 32x16，但 svg 会渲染为 302x18。预计为 34x18。我怎样才能存档这个？ 302px 的宽度是 300px + 2*1px 边框宽度的 SVG 的标准宽度。您需要为 HTML 中的 SVG 元素指定适合符号长宽比的宽度和高度，或者为其指定与符号的 viewBox 匹配的 viewBox 属性。这里我使用viewBox： <!DOCTYPE html> <html> <head> <style> .logo { color: #f0f; border: 1px solid #0f0; height: 1em; width: auto; } </style> </head> <body> <svg class="logo" viewBox="0 0 40 20"> <use xlink:href="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiID8+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8c3ltYm9sIGlkPSJ0ZXN0IiB2aWV3Qm94PSIwIDAgNDAgMjAiIHByZXNlcnZlQXNwZWN0UmF0aW89InhNaW5ZTWluIG1lZXQiPgogICAgPHJlY3Qgd2lkdGg9IjQwIiBoZWlnaHQ9IjIwIiBmaWxsPSJjdXJyZW50Q29sb3IiIC8+CiAgPC9zeW1ib2w+Cjwvc3ZnPg==#test" x="0" y="0" /> </svg> </body> </html>

html svg responsive-design

回答 1 投票 0

卡响应问题。当我缩小屏幕尺寸时，我的卡片很薄并且无法读取

我在代码中添加了一些媒体查询，以便当我将屏幕缩小到 iPad 尺寸时，我的三卡行会下降到两张卡，而当我将屏幕缩小到移动设备尺寸时，我的三卡行会下降到一张卡。豪...

css responsive-design blogs card

回答 1 投票 0

使用 css 更改表格行布局

我有一张桌子 ... 我有一张桌子 <table> <thead> <th>Column1</th> <th>Column2</th> <th>Column3</th> </thead> <tbody> <tr> <td>Cell A1</td> <td>Cell A2</td> <td>Cell A3</td> </tr> <tr> <td>Cell B1</td> <td>Cell B2</td> <td>Cell B3</td> </tr> </tbody> </table> 我需要做的是使用CSS将整个表格显示为单列输出应该是： +---------+ | Cell A1 | +---------+ | Cell A2 | +---------+ | Cell A3 | +---------+ | Cell B1 | +---------+ | Cell B2 | +---------+ | Cell B3 | +---------+ 这背后的原因是每个表格单元格都非常宽，并且该表格是由 CouchCMS 在其管理面板中生成的。只需添加一点 CSS 即可显示为 block 表格中的每个元素，并隐藏您的 thead: table, tr, td { display: block; } thead { display: none; } <table> <thead> <th>Column1</th> <th>Column2</th> <th>Column3</th> </thead> <tbody> <tr> <td>Cell A1</td> <td>Cell A2</td> <td>Cell A3</td> </tr> <tr> <td>Cell B1</td> <td>Cell B2</td> <td>Cell B3</td> </tr> </tbody> </table> JSFIDDLE：http://jsfiddle.net/ghorg12110/k8pojm31/ 尝试这套CSS规则 table { border: 1px solid #ccc; border-collapse: collapse; } tbody, thead,tr { display: block; } th, td { padding: 4px; display: block; } <table border="1"> <thead> <th>Column1</th> <th>Column2</th> <th>Column3</th> </thead> <tbody> <tr> <td>Cell A1</td> <td>Cell A2</td> <td>Cell A3</td> </tr> <tr> <td>Cell B1</td> <td>Cell B2</td> <td>Cell B3</td> </tr> </tbody> </table> 如果您想显示单列，则不要使用多个 <th>。如果您需要列标题，请使用单个 <th> 标签。如果您不需要列标题，请尝试以下代码： <html> <head> <style> span{ color:#019ac8; } table{ border:1px dotted #000; } </style> </head> <body> <table> <tbody> <tr> <td><span>Cell</span> A1</td></tr> <tr><td><span>Cell</span> A2</td></tr> <tr><td><span>Cell</span> A3</td> </tr> <tr> <td><span>Cell</span> B1</td></tr> <tr><td><span>Cell</span> B2</td></tr> </tr> <td><span>Cell</span> B3</td> </tr> </tbody> </table> </body> </html> 第1栏第2栏第3栏

css responsive-design couch-cms

回答 3 投票 0

用户界面没有响应。用 Qt Designer 制作

我正在尝试使用 Qt-Designer 制作国际象棋 UI。我使用了布局，布局内每个小部件的水平/垂直策略都根据要求设置为首选/扩展或最小值...

python qt responsive-design pyqt5 qt-designer

回答 1 投票 0

HTML、SCSS、JSX、React、灵活网格

我需要这种使用灵活网格方法的方法，其中 768px 和 1024px 媒体屏幕的用户应该能够查看此处的确切输出，并且在移动应用程序视口上应该是...

html reactjs sass responsive-design grid

回答 1 投票 0

我不知道为什么我的网站没有响应

我是 HTML 和 CSS 的初学者，我正在开发一个关于前端导师的项目。该项目的名称是 Order Summary Component，我已经提交了该项目，但问题是我的