我查看了之前的问题，但没有涉及到我的确切问题。我认为自己是 html/css 的初学者 - 中级水平。 我正在使用 html 和 css 开发一个基本的响应式页面，它根据媒体查询中的最大屏幕宽度交换图像，因此随着最大屏幕宽度的减少，图像 关掉 对于某些较小的图像 断点。当我通过将 html 拖动到私有(private)浏览窗口和我自己的托管域中来在本地测试它时，它可以按预期在两个地方工作。但是 - 当我将文件上传到将托管它的服务器时(经典的 Linux cPanel 设置在 GoDaddy 上)所有图像一直显示，而不是仅在媒体查询调用时显示。作为故障排除的一部分，我尝试了这两种方式 - 原始 html 有一个 img src 对于两种尺寸的图像(这就是它在下面的示例中被注释掉的原因)，但即使我删除了对 -sm 版本的 img src 调用，同样的问题仍然存在，但仅在 cPanel 主机上。
是否有解决方案可以使它与 cPanel 配合使用？ 任何输入表示赞赏 - 谢谢!!
Here is the html :
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>GoPlay Families</title>
<meta name="author" content="Janelle Schneider"/>
<meta name="description" content="GoPlayFamilies is a deck of cards that offers 52 fun activities for families."/>
<meta name="google-site-verification" content=""/>
<meta name="Copyright" content="© copyright 2015 GoPlayFamilies All Rights Reserved"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" href="favicon.ico"/>
<link rel="stylesheet" href="css/reset.css"/>
<link rel="stylesheet" href="css/style.css"/>
</head>
<body>
<div id="wrapper">
<!--outer wrapper-->
<!-- header -->
<header>
<div id="logo">
<img src="../images/goplayfamilies.png" alt="">
<!--<img src="../images/goplayfamilies_sm.png" alt="">-->
</div>
<div id="tagline">
<img src="../images/deckofplayingcards.png" alt="">
<!--<img src="../images/deckofplayingcards_sm.png" alt="">-->
</div>
</header>
<!-- main content -->
<main>
<div id="maincontainer">
<div id="fade">
<h1>Coming Soon</h1>
<p></p>
<div class="main-img1">
<img src="../images/goplayappicon.png" alt="">
</div>
<div class="main-img2">
<img src="../images/topcardbox_sq.png" alt="">
</div>
</div>
</div>
</main>
<!-- footer -->
<footer>
<p>
<div class="copyright">© Copyright GoPlayFamilies. All Rights Reserved. </div>
</footer>
这是 css 媒体查询之一:
@media only screen and(max-width: 594 px) {
#logo {
background - image: url("../images/goplayfamilies_sm.png");
background - repeat: no - repeat;
height: 100 % ;
width: 100 % ;
margin - left: auto;
margin - right: auto;
margin - top: 0 % ;
}
#tagline {
background - image: url("../images/deckofplayingcards_sm.png");
background - repeat: no - repeat;
height: 100 % ;
width: 100 % ;
margin - left: auto;
margin - right: auto;
margin - top: 5e m;
}
header {
display: block;
background - position: top;
height: 150 px;
width: 100 % ;
padding: 20 px;
background: #621417;
}
main {
display: block;
width: 100%;
background-color: # 4 b514d;
bottom: 0;
top: 0;
height: 100 % ;
}
h1 {
font - size: 1.5e m;
margin: auto;
}
#maincontainer {
height: 100 % ;
display: table;
margin - left: auto;
margin - right: auto;
padding: 0 10 % 10 % 10 % ;
}
.main - img1 {
float: none;
margin: auto;
margin - top: 27 px;
}
.main - img2 {
margin: auto;
padding: 10 % ;
margin - top: 27 px;
}
}
最佳答案
我想我理解你的网站问题，如果我错了请告诉我..
很简单，你应该在你的 css 文件中添加 img 标签选择器并给它一个属性 max-width:100%
例子如下
img {
max-width:100%;
}
关于html - 响应式设计不适用于 linux cpanel (GoDaddy) - 适用于 classis linux 主机 (GoDaddy) 和本地，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32129166/