Fancybox按钮在移动(无响应的站点)上太小了
Fancybox按钮在移动(无响应的站点)上太小了
提问于 2017-03-10 09:01:20
我使用Fancybox 3作为我的画廊。
Fancybox按钮(<，>，x，标题)在我的android上非常小，我的视图是静态的：
<meta name="viewport" content="width=640">我不能使用‘宽度-设备，初始规模=1.0’，因为它没有响应，并且不正确地显示我的网站，所以我需要一个静态(无响应)网站的解决方案。
也许这与这个插件的css/js文件有关？
回答 3
Stack Overflow用户
回答已采纳
发布于 2017-03-10 11:52:26
您需要over，即fancybox提供的默认样式。
例如，要使标题更大，可以使用以下内容
@media (max-width: 800px)
.fancybox-caption {
font-size: 35px;
}若要过载，请在包含jquery.fancybox.css后确保包含上述样式。
Stack Overflow用户
发布于 2017-03-12 16:27:32
如果您愿意，可以使用CSS轻松地扩展所有接口元素，例如：
.fancybox-infobar__body, .fancybox-button {
transform: scale(1.5);
}Stack Overflow用户
发布于 2017-03-13 17:20:43
谢谢大家，我一个接一个地用媒体查询把它们换了，就像Niket提供的那样，效果很好，现在我知道还有一个更短的方法@Janis . :-)
以下是我的css，供任何想知道的人使用：
@media all and (max-width: 800px) {
.fancybox-caption {
line-height: 35px;
font-size: 30px;
}
.fancybox-infobar__body {
font-size: 30px;
width: 120px;
line-height: 60px;
margin-left: 10px;
}
.fancybox-button {
width: 60px;
height: 60px;
line-height: 60px;
}
.fancybox-button--close::before, .fancybox-button--close::after {
height: 3px;
width: 30px;
left: calc(50% - 15px);
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/42714237
复制相关文章
相似问题
腾讯云开发者
