我有一个视频背景,因为它需要相当多的MB加载,我想禁用智能手机上的视频。 的CSS本身很简单:目标只有智能手机与媒体查询
video{
display:none;
}
但是,如何让媒体查询,以便它不会影响到台式机和笔记本电脑屏幕?由于智能手机越来越高,分辨率越来越高,以往只针对少量像素(例如±450像素)的旧方法将不再适用于较新的智能手机。 智能手机的宽度和高度应该不重要,我在我的“常规”媒体查询中修正了这一点,以便在设计中断时改变CSS。
我有一个视频背景,因为它需要相当多的MB加载,我想禁用智能手机上的视频。 的CSS本身很简单:目标只有智能手机与媒体查询
video{
display:none;
}
但是,如何让媒体查询,以便它不会影响到台式机和笔记本电脑屏幕?由于智能手机越来越高,分辨率越来越高,以往只针对少量像素(例如±450像素)的旧方法将不再适用于较新的智能手机。 智能手机的宽度和高度应该不重要,我在我的“常规”媒体查询中修正了这一点,以便在设计中断时改变CSS。
使用类似
@media (max-width: 480px) {
video {
display: none;
}
}
这将显示为无屏幕尺寸,最大为480个像素(大多数智能手机)
虽然它应该'显示:none'不一定要使您的视频无法加载。在生成HTML的服务器端可以更好地处理这个问题。 – 2014-10-16 15:07:03
我认为这也许应该是一个更广泛的问题。事实上,如果我们确实有某种方式来查询用户的连接以查看是否适合发送大型图像或视频,那就太好了......我可以肯定地看到“有限数据计划”作为查询的许多用途。 – 2014-10-16 15:07:14
使用'@media only screen' – TylerH 2014-10-16 15:07:15