如何让HTML/CSS及网页内容适配不同分辨率设备？

一、布局稳定必须用Flex/Grid，别只靠display切换 #

仅用JS切换display: none/block只能控制元素显隐，完全解决不了不同设备的布局偏移问题。要让网页在手机、平板、PC上保持一致布局，必须用Flexbox或CSS Grid：

• 给父容器设置display: flex，配合justify-content（水平对齐）、align-items（垂直对齐）可以让子元素自动适配容器空间；
• 加flex-wrap: wrap就能让小屏幕下元素自动换行，不会挤成一团；
• Grid则适合更复杂的网格布局，同样能自动适配不同屏幕尺寸。

二、你的iframe适配修复 #

当前iframe代码有冲突：同时写了固定宽高属性和100%宽高样式，会导致渲染混乱。要让iframe保持原始比例（460:259≈16:9）且适配所有设备，用「容器+padding-top维持比例」的方法：

修正后的代码： #

<!-- 外层容器：用padding-top维持宽高比，259/460≈56.3% -->
<div style="position: relative; width: 100%; padding-top: 56.3%;">
  <iframe id="IPTV" src="nosignal.html" allowfullscreen frameborder="0"
          style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;">
  </iframe>
</div>

• 原理：padding-top的百分比是基于容器宽度计算的，所以能自动随屏幕宽度调整高度，保持固定宽高比；
• 删掉原代码里的width="460"和height="259"，避免和行内样式冲突。

三、关于元素显隐切换的说明 #

用JS切换display: none/block本身没问题，但要记住：display只负责显隐，布局逻辑交给Flex/Grid。只要切换的元素是Flex/Grid容器的子元素，切换后不会破坏整体布局结构。

内容的提问来源于stack exchange，提问作者Kia