演示 针对不同屏幕尺寸隐藏或显示页面内容

带有绿色标记的元素表示其在当前浏览器视口(viewport)中是可见的。关于 viewport标签的说明

为了确保适当的绘制和触屏缩放,需要在 <head> 之中添加 viewport 元数据标签 。 <meta name="viewport" content="width=device-width, initial-scale=1">

✔ 在超小屏幕上可见
✔ 在小屏幕上可见
中等屏幕 ✔ 在中等屏幕上可见
✔ 在大屏幕上可见
✔ 在超小屏幕和小屏幕上可见
✔ 在中等屏幕和大屏幕上可见
✔ 在超小屏幕和中等屏幕上可见
✔ 在小屏幕和大屏幕上可见
✔ 在超小屏幕和大屏幕上可见
✔ 在小屏幕和中等屏幕上可见

✔ 在超小屏幕上隐藏
✔ 在小屏幕上隐藏
中等屏幕 ✔ 在中等屏幕上隐藏
✔ 在大屏幕上隐藏
✔ 在超小屏幕和小屏幕上隐藏
✔ 在 medium 和 large 上隐藏
✔ 在超小屏幕和中等屏幕上隐藏
✔ 在小屏幕和大屏幕上隐藏
✔ 在超小屏幕和大屏幕上隐藏
✔ 在小屏幕和中等屏幕上隐藏