媒体-查询不起作用
媒体-查询不起作用
提问于 2015-03-13 06:11:02
试图完成这个网站
http://www.nsckolkata.com/
菜单中标题的字体面板(位于style.css的顶部)无法工作。媒体查询(位于style.css底部)无法工作。
尝试了很多解决方案，从堆叠溢出和其他讨论论坛，但没有结果。
我正在设置css和html的标题部分。希望这能帮上忙。
@font-face {
font-family: 'OldEnglish';
src: url('../fonts/olde_english_regular/OldeEnglishRegular.eot');
src: url('../fonts/olde_english_regular/OldeEnglishRegular.eot?#iefix') format('embedded-opentype'),
url('../fonts/olde_english_regular/OldeEnglishRegular.woff2') format('woff2'),
url('../fonts/olde_english_regular/OldeEnglishRegular.woff') format('woff'),
url('../fonts/olde_english_regular/OldeEnglishRegular.ttf') format('truetype'),
url('../fonts/olde_english_regular/OldeEnglishRegular.svg#OldEnglish') format('svg');
font-weight: normal;
font-style: normal;
}
.navbar-brand{
font-family: "OldEnglish";
font-size: 30px;
}
.copyright{
position:fixed;
bottom: 10px;
right: 10px;
font-size: 12px;
background:rgba(255,255,255);
padding:3px 12px;
border-radius: 4px;
border: 1px solid #ccc;
opacity: 0.8;
transition: 0.5s;
}
.copyright:hover{
background-color: rgba(0,0,0,0.8);;
color: #fff;
opacity: 1;
}
.committeedrop{
padding: 7px 7px;
min-width: 332px;
}
.contactdrop{
padding: 7px 0px;
min-width: 800px;
background-color:#fff !important;
}
#custom-bootstrap-menu.navbar-default .navbar-brand {
color: rgba(255, 255, 255, 1);
}
.label-as-badge {
border-radius: 1em;
font-size: 12px;
line-height:12px;
}
.inlineblock{
display:inline-block;
}
.navbar-brand img{
height: 40px;
width: 40px;
display: inline-block;
vertical-align: top;
bottom: 10px;
position: relative;
border-radius: 6px;
}
.mb20{
margin-bottom:20px;
}
.m0{
margin:0px;
}
.ml3{
margin-left:3px;
}
.panel300{
max-height: 300px;
overflow: hidden;
overflow-y: auto;}
}
.panel600{
max-height: 600px;
overflow: hidden;
overflow-y: auto;}
}
@media all and (max-width:767px) {
body{background-color: gray;}
.contactdrop{ min-width:300px !important;}
.contactdrop iframe{display:none;}
.panel300,.panel600{min-width:initial;}
}<html xmlns="http://www.w3.org/1999/xhtml" ng-app="nsc">
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<meta name="description" content="Numismatic Society of Calcutta"/>
<meta name="author" content="Numismatic Society of Calcutta"/>
<link rel="icon" href="image/Favicon/favicon.ico"/>
<title>Numistmatic Society of Calcutta</title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet"/>
<link href="css/style.css" rel="stylesheet"/>
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
**更新片段*字体问题得到解决。谢谢!更新片段。检查顶部的字体面板以获得解决方案。
回答 4
Stack Overflow用户
回答已采纳
发布于 2015-03-13 07:50:25
在.panel300和.page1600样式定义的媒体css之前，还有额外的大括号关闭了两次。
.panel300{
max-height: 300px;
overflow: hidden;
overflow-y: auto;}
}
.panel600{
max-height: 600px;
overflow: hidden;
overflow-y: auto;}
}从上面移除额外的花括号，如下所示
.panel300{
max-height: 300px;
overflow: hidden;
overflow-y: auto;
}
.panel600{
max-height: 600px;
overflow: hidden;
overflow-y: auto;
}另外，当我检查浏览器控制台时，您的字体路径是错误的。查看屏幕截图下面的屏幕截图
还可以将doctype更改为
<!DOCTYPE html>Stack Overflow用户
发布于 2015-03-13 06:20:07
在我的例子中，我只是将DOCTYPE标记更改为<!DOCTYPE html>。
你不需要包括所有的字体扩展名。只需使用.ttf或.otf。
Stack Overflow用户
发布于 2015-03-13 06:52:02
您的字体是不可访问的，这就是为什么它不能工作。请看一下。在这里查看：正规/老年英语
在Wordpress上，您可能会发现这篇文章很有用：https://jeffsebring.com/2012/how-to-use-web-fonts-with-wordpress/
编写如下媒体查询：
@media (max-width: 768px) {
.body{background-color: gray;}
.contactdrop{ min-width:300px !important;}
.contactdrop iframe{display:none;}
.panel300,.panel600{min-width:initial;} }页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/29025915
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号