responsive-design 相关问题

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

我有以下代码： document.querySelector('.矩形') .addEventListener('点击', function() { this.classList.toggle('展开'); const plus = this.querySelector('.plus'); 另外....

javascript html css reactjs responsive-design

回答 2 投票 0

按钮下拉功能 - HTML/CSS

我有以下代码： document.querySelector('.矩形') .addEventListener('点击', function() { this.classList.toggle('展开'); const plus = this.querySelector('.plus'); ...

javascript html css reactjs responsive-design

回答 2 投票 0

HTML/CSS 中的可折叠框

我有以下盒子：我有以下盒子： <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=PT+Sans+Narrow:wght@400;700&display=swap" rel="stylesheet"> <div class="tile-container"> <a class="rectangle" href=" "> <div class="plus radius"></div> <div class="tile-label"> Sample <span class="tile-accent">Text</span> </div> </a> <style> .tile-container { display: flex; } .rectangle { background-color:#0051a5; margin: 5px; display: block; cursor: pointer; height:200px; flex: 1; border-radius:23px; position: relative; /*must be relative to act a tile-container for the tile-label class*/ } .plus { display:inline-block; background: linear-gradient(#73716d 0 0), linear-gradient(#73716d 0 0), #fff; background-position:center; background-size: 60% 2.5px,2.5px 60%; background-repeat:no-repeat; } .radius { border-radius:50%; float: right; width: 25px; height: 25px; position: absolute; right: 25px; top: 25px; } .tile-label { font-family: 'PT Sans Narrow', sans-serif; font-size: 25px; text-transform: uppercase; font-weight: 600; color: white; position: absolute; bottom: 25px; left: 25px; } .tile-accent { color: white; } </style> 所以我试图通过使用切换 JavaScript 函数来实现下拉/折叠功能，但它没有按预期工作。基本上，每当用户单击蓝色框时，该框应在下方展开，并在主标题下方显示隐藏文本，因此它本质上就像一个可折叠按钮，如果您单击它，则该框会在下方展开我尝试使用 javascript 切换功能并添加隐藏列表 css 类，并使用它在用户单击该框时进行切换，但它继续在框上显示文本，而不是框展开，并且文本显示在下方主标题。相反，文本显示在框或主标题上。我怎样才能做到这样，每当用户单击该框时，该框都会平滑地向下展开，隐藏的文本出现在标题下方。这是我尝试过的： document.querySelector('.rectangle').addEventListener('click', function() { this.classList.toggle('expanded'); const plus = this.querySelector('.plus'); plus.style.transform = this.classList.contains('expanded') ? 'rotate(45deg)' : 'rotate(0)'; }); .tile-container { display: flex; } .rectangle { background-color: #0051a5; margin: 5px; display: block; cursor: pointer; height: 100px; /* Reduced height for better visibility */ flex: 1; border-radius: 23px; position: relative; transition: height 0.3s ease; /* Add a transition for smooth animation */ } .plus { display: inline-block; background: linear-gradient(#0051a5 0 0), linear-gradient(#0051a5 0 0), #fff; background-position: center; background-size: 60% 2.5px, 2.5px 60%; background-repeat: no-repeat; transition: transform 0.3s ease; /* Add a transition for smooth animation */ } .radius { border-radius: 50%; float: right; width: 25px; height: 25px; position: absolute; right: 25px; top: 25px; } .tile-label { font-family: 'PT Sans Narrow', sans-serif; font-size: 25px; text-transform: uppercase; font-weight: 600; color: #fff; position: absolute; bottom: 25px; left: 25px; } .tile-accent { color: #FFC72C; } .hidden-text { display: none; font-family: 'PT Sans Narrow', sans-serif; font-size: 18px; color: #000; /* Change text color as needed */ padding: 10px 25px; position: absolute; bottom: 0; left: 0; width: 100%; background-color: #fff; /* Background color for the hidden text area */ } .expanded .rectangle { height: 200px; /* Adjust the expanded height as needed */ } .expanded .hidden-text { display: block; } <head> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=PT+Sans+Narrow:wght@400;700&display=swap" rel="stylesheet"> </head> <body> <div class="tile-container"> <a class="rectangle" href=" "> <div class="plus radius"></div> <div class="tile-label"> Sample <span class="tile-accent">Text</span> </div> </a> <div class="hidden-text"> <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul> </div> </div> </div> </body> 建议你把锚（a）变成div并移除“方块” .expanded.rectangle {删除空格 .expanded+.hidden-text 添加同级组合器参考：https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_combinator document.querySelector('.rectangle') .addEventListener('click', function() { this.classList.toggle('expanded'); const plus = this.querySelector('.plus'); plus.style.transform = this.classList.contains('expanded') ? 'rotate(45deg)' : 'rotate(0)'; }); .tile-container { display: flex; } .rectangle { background-color: #0051a5; margin: 5px; cursor: pointer; height: 100px; /* Reduced height for better visibility */ flex: 1; border-radius: 23px; position: relative; transition: height 0.3s ease; /* Add a transition for smooth animation */ } .plus { display: inline-block; background: linear-gradient(#0051a5 0 0), linear-gradient(#0051a5 0 0), #fff; background-position: center; background-size: 60% 2.5px, 2.5px 60%; background-repeat: no-repeat; transition: transform 0.3s ease; /* Add a transition for smooth animation */ } .radius { border-radius: 50%; float: right; width: 25px; height: 25px; position: absolute; right: 25px; top: 25px; } .tile-label { font-family: 'PT Sans Narrow', sans-serif; font-size: 25px; text-transform: uppercase; font-weight: 600; color: #fff; position: absolute; bottom: 25px; left: 25px; } .tile-accent { color: #FFC72C; } .hidden-text { display: none; font-family: 'PT Sans Narrow', sans-serif; font-size: 18px; color: #000; /* Change text color as needed */ padding: 10px 25px; position: absolute; bottom: 0; left: 0; width: 100%; background-color: #fff; /* Background color for the hidden text area */ } .expanded.rectangle { height: 200px; /* Adjust the expanded height as needed */ } .expanded+.hidden-text { display: block; } <head> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=PT+Sans+Narrow:wght@400;700&display=swap" rel="stylesheet"> </head> <body> <div class="tile-container"> <div class="rectangle"> <div class="plus radius"></div> <div class="tile-label"> Sample <span class="tile-accent">Text</span> </div> </div> <div class="hidden-text"> <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul> </div> </div> </div> </body> 也许你真正想要的是这样的简单1em;基于容器25px字体没有时髦的定位容器上没有花哨的尺寸 - 内容决定了将“事物”放入网格中，并根据网格调整行和列的大小。 auto 表示使用内容尺寸。更少的 CSS“花哨”东西 - 除了网格之外，一切都与视觉风格有关 document.querySelector('.rectangle') .addEventListener('click', function() { this.classList.toggle('expanded'); const plus = this.querySelector('.plus'); plus.style.transform = this.classList.contains('expanded') ? 'rotate(45deg)' : 'rotate(0)'; }); .tile-container { padding: 5px; font-size: 25px; } .rectangle { background-color: #0051a5; padding-right: 1em; padding-top: 1em; cursor: pointer; border-radius: 1em; display: grid; grid-template-rows: 1fr auto; grid-template-columns: auto 1em; grid-template-areas: "sample plus" "extratext extratext"; } .plus { grid-area: plus; background: linear-gradient(#0051a5 0 0), linear-gradient(#0051a5 0 0), #fff; background-position: center; background-size: 60% 2.5px, 2.5px 60%; background-repeat: no-repeat; transition: transform 0.3s ease; } .radius { border-radius: 50%; width: 1em; height: 1em; margin-right: 1em; } .tile-label { grid-area: sample; font-family: 'PT Sans Narrow', sans-serif; font-size: 1em; text-transform: uppercase; font-weight: 600; color: #fff; padding-left: 1em; height: 2em; } .tile-accent { color: #FFC72C; } .hidden-text { grid-area: extratext; display: none; font-family: 'PT Sans Narrow', sans-serif; font-size: 0.75em; background-color: #fff; color: #000; margin: 1em; padding-top: 0.5em; padding-left: 1em; } .expanded>.hidden-text { display: block; animation: fade-in 1s; } @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes fade-out { from { opacity: 1; } to { opacity: 0; } } <head> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=PT+Sans+Narrow:wght@400;700&display=swap" rel="stylesheet"> </head> <body> <div class="tile-container"> <div class="rectangle"> <div class="plus radius"></div> <div class="tile-label"> Sample <span class="tile-accent">Text</span> </div> <div class="hidden-text"> <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul> </div> </div> </div> </body>

javascript html css reactjs responsive-design

回答 1 投票 0

在文本之前添加额外的空格 - Angular 树视图 CSS

我正在 Angular 中创建这个嵌套树视图组件。所有样式都工作正常，但对于嵌套树的第一个元素，在文本之前添加了额外的空间，这是我无法做到的

css angular sass flexbox responsive-design

回答 2 投票 0

将图像与响应式容器的底部对齐

我正在尝试将图像与容器底部对齐。然而，由于该网站是响应式的，当我更改窗口大小时，图像会在容器中上下移动，因为它似乎固定在一个cer上......

css responsive-design containers fluid-layout

回答 2 投票 0

如何使 noWrap 与面包屑一起工作？

我正在尝试使 MUI 组件面包屑具有响应能力：当 Breadcrumbs 组件占用其所有空间时，其项目会使用省略号缩小，就像任何具有 noWrap 属性的 Typography 组件一样...