我正在一个Wordpress网站上工作,在那里我有一个背景图像作为我的徽标,而我的实际标题图像是透明的。由于标题图片在移动设备上的大小调整方式,在手机上查看时,我的徽标(背景图片)与其下方的所有内容之间都有很大的空白空间。在台式机和平板电脑上看起来很棒。
有没有办法我可以仅在电话上调整透明标题图像的高度,而不会在台式机或平板电脑上弄乱它的大小?
如果需要,您可以view my site here。
最佳答案
在实际代码中更容易显示,但是您可以调整大小,仅使其影响您通过媒体查询定义的大小-read more about here
如果查看屏幕截图,您会发现a
标签的高度为150px。如果稍加调节,徽标和菜单之间的距离就不会那么远。
这是一个示例,仅在小于height
的尺寸上对.header-image .site-title a
进行450px
的新更改。
@media screen and (max-width: 450px) {
.header-image .site-title a {
height: 100px;
}
}
max-width
表示屏幕低于450像素时,min-width
将结束。这只是一个示例,您可以将其更改为自己喜欢的任何内容,当然也可以添加多个媒体查询。