responsive-design 相关问题

我正在制作全屏弹出窗口以适用于一个应用程序。 /* 全屏弹出窗口 */ .fullscreen-popup { 位置：固定；顶部：0；左：0；宽度：100%； </desc> <question vote="0"> <p>我正在制作全屏弹出窗口以适用于一个应用程序。</p> <pre><code><!DOCTYPE html> <style> /* Full Screen Popup */ .fullscreen-popup { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(255, 255, 255); display: flex; justify-content: center; align-items: center; } .close-button { position: absolute; top: 10px; right: 10px; padding: 8px 16px; border: none; border-radius: 4px; background-color: #f44336; color: #fff; cursor: pointer; } .popup-content { position: relative; padding: 20px; background-color: #ffffff; border-radius: 8px; text-align: justify; max-width: 80vw; /* Adjust max width for smaller screens */ overflow-y: auto; /* Allow vertical scrolling if needed */ } /* Media Queries for Responsive Design */ /* Tablet and Larger Screens */ @media screen and (min-width: 768px) { .details-container { grid-template-columns: repeat(2, minmax(300px, 1fr)); } } /* Mobile Screens */ @media screen and (max-width: 767px) { .details-container { grid-template-columns: repeat(1, minmax(100%, 1fr)); } /* Full Screen Popup Adjustments */ .fullscreen-popup { padding: 20px; } .close-button { top: 5px; right: 5px; } .popup { width: 90%; max-width: 90vw; } } img{ height: 50%; width: 50%; } </style> <body> <div class="fullscreen-popup"> <div class="popup-content"> <h2>This is title of h2</h2> <img src="https://wallpapers.com/images/hd/720p-nature-background-7dtz4pan3cr3ot5v.jpg"> <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sint assumenda, nihil voluptas adipisci dolor quisquam totam doloremque corrupti laudantium ad consectetur quaerat, optio quidem, nulla possimus laborum tempore atque. Ab.Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sint assumenda, nihil voluptas adipisci dolor quisquam totam doloremque corrupti laudantium ad consectetur quaerat, optio quidem, nulla possimus laborum tempore atque. Ab.Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sint assumenda, nihil voluptas adipisci dolor quisquam totam doloremque corrupti laudantium ad consectetur quaerat, optio quidem, nulla possimus laborum tempore atque. Ab.</p> <button class="close-button">Close</button> </div> </div> </body> </code></pre> <p>我已经实现了关闭按钮以正常工作，并且我已从项目中删除了工作代码以简化我的问题。</p> <p>我遇到的问题是，有时 h2、弹出内容和关闭按钮不会在移动屏幕尺寸上显示。另外，垂直和水平滚动在移动设备上不起作用。</p> <p>我尝试过位置属性、最大宽度、最大高度，但似乎在移动设备上不起作用。页面在手机上的行为非常奇怪。</p> <p>你能帮我解决这个问题吗？</p> </question> <answer tick="false" vote="0"> <pre><code><!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> /* Full Screen Popup */ .fullscreen-popup { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background-color: rgba(255, 255, 255); display: flex; justify-content: center; align-items: center; box-sizing: border-box; } .close-button { position: absolute; top: 10px; right: 10px; padding: 8px 16px; border: none; border-radius: 4px; background-color: #f44336; color: #fff; cursor: pointer; } .popup-content { position: relative; padding: 20px; background-color: #ffffff; border-radius: 8px; text-align: justify; max-width: 80vw; /* Adjust max width for smaller screens */ overflow-y: auto; /* Allow vertical scrolling if needed */ max-height: 90vh; } /* Media Queries for Responsive Design */ /* Tablet and Larger Screens */ @media screen and (min-width: 768px) { .details-container { grid-template-columns: repeat(2, minmax(300px, 1fr)); } } /* Mobile Screens */ @media screen and (max-width: 767px) { .details-container { grid-template-columns: repeat(1, minmax(100%, 1fr)); } /* Full Screen Popup Adjustments */ .fullscreen-popup { padding: 20px; } .close-button { top: 5px; right: 5px; } .popup { width: 90%; max-width: 90vw; } } img{ height: 50%; width: 50%; } </style> </head> <body> <div class="fullscreen-popup"> <div class="popup-content"> <h2>This is title of h2</h2> <img src="https://wallpapers.com/images/hd/720p-nature-background-7dtz4pan3cr3ot5v.jpg"> <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sint assumenda, nihil voluptas adipisci dolor quisquam totam doloremque corrupti laudantium ad consectetur quaerat, optio quidem, nulla possimus laborum tempore atque. Ab.Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sint assumenda, nihil voluptas adipisci dolor quisquam totam doloremque corrupti laudantium ad consectetur quaerat, optio quidem, nulla possimus laborum tempore atque. Ab.Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sint assumenda, nihil voluptas adipisci dolor quisquam totam doloremque corrupti laudantium ad consectetur quaerat, optio quidem, nulla possimus laborum tempore atque. Ab.</p> <button class="close-button">Close</button> </div> </div> </body> </html> </code></pre> <p>试试这个</p> </answer> </body></html>

html css responsive-design

回答 0 投票 0

如何使我的 HTML 代码具有响应能力？是否需要弹性代码或响应式代码？

所以我正在制作一个新城市，而且我对 HTML 还比较陌生（但我很快就学会了），所以我从互联网上得到了很多帮助，哈哈。我已经磨练了大约一个星期了。对不对...

html flexbox responsive-design

回答 1 投票 0

如何在移动设备上将视频 div 调整为 100% 宽度

当我使浏览器窗口变薄以复制移动设备大小时 - 图像会精细调整大小并填充 100% 宽度... 但我无法将视频发送到填充 100% 宽度与顶部对齐 - 由于某种原因

css responsive-design

回答 1 投票 0

根据浏览器宽度正确调整特定位置的div的大小

有没有一种方法可以让 div 容器在容器开始触及浏览器侧面时响应式缩小（如果浏览器变小）......而不是只在它触及我时才这样做......