基于媒体查询的隐藏元素

今天给大家展示一些有用的小技巧,即根据浏览器窗口的大小, 通过媒体査询使页面上的某些元素从屏幕中消失。隐藏元素的方法有很多,今天会探究其中的三个。

准备工作

今天给大家介绍的方法可应用于很多场景。一个常见的用例就是当页面在较小屏幕的设备上渲染时,菜单会被及时地隐藏。可以 利用这点来改变关注的内容及相关区域的显示方式。使用该方法时,你可充分发挥想象力来实现各种效果。

实现方式

需要创建一个简单的页面用于效果展示。在本例中,首先给页面添加了一个h1的头,一张图片,然后是两个含有文本信息的页面元素。接着,需要给这些元素添加相应的样式。此处对每一个元素均设置不同的背景色和宽度属性,以便直观地展示元素从页面上消失的效果。

接下来针对不同的屏幕视图断点添加媒体查询。本例中,添加的是针对960px的媒体査询。下面我们就将通过媒体查询,看看使得元素消失的一些方法。

在媒体査询中为img元素添加position: absoluteleft: 5000px样式。该样式会将img元素向左移动远远超出屏幕设备的可见范围,实际目的就是让元素从页面消失掉。 同时在该媒体查询中设置.bar元素的样式为display: none。这样,元素的位置并没有变化,只是渲染页面时元素为不可见。上述两种方法都能有效地从页面中移除元素,此时页面中只剩下标题和.foo元素。

在第二个媒体査询中,会尝试用另外一种方式从屏幕上移除指定元素。首先,在媒体査询中为.foo元素设置一个值为5000px的左外边距。这也就使得元素从屏幕上消失了,但需要注意的是,紧接着.foo元素的.bar元素填补了原来.foo元素所占的空间,而在.foo元素本来的位置留下了一片明显的空白。然后设置.foo元素为左浮动,就会发现白色区域消失了。具体实现参见下面的代码:

.foo {
	background-color: #ccc;
	width: 300px;
}
.bar {
	background-color: blue;
	width: 600px;
	color: white;
}
@media screen and (max-width: 960px) {
	img {
		position: absolute;
		left: 5000px;
	}
	.bar {display: none;}
}
@media screen and (min-width: 961px) {
	.foo {
		float: left; margin-left: -5000px;
	}
}

工作原理

无论是绝对定位还是浮动都没有高度属性,因此一旦应用于某个元素,均不会占用任何垂直的空间区域。利用这个有用的小窍门可以很好地在页面上移除相应元素。当然通过浮动元素来布 局时也会导致一些小问题。这些问题可以为元素添加clear: both属性来解决。

打赏
吐槽 (5)
×
加载中,请稍候…

您需要 登录 后才能发表评论。

avatar

- 评论

  • 加载中,请稍候…
我要吐槽