响应式设计不适用于 linux cpanel (GoDaddy) - 适用于 classis linux 主机 (GoDaddy) 和本地答案

【问题标题】：responsive design not working on linux cpanel (GoDaddy) - works on classis linux host (GoDaddy) and locally响应式设计不适用于 linux cpanel (GoDaddy) - 适用于 classis linux 主机 (GoDaddy) 和本地
【发布时间】：2015-11-14 17:45:54
【问题描述】：

我查看了之前的问题，但没有一个涉及我的确切问题。我认为自己是初学者 - html / css 的中级水平。我正在使用 html 和 css 开发一个基本的响应式页面，它根据媒体查询中的最大屏幕宽度交换图像，以便随着最大屏幕宽度的减小，图像关掉对于较小的图像在某些断点。当我通过将 html 拖到私人浏览窗口和我自己的托管域中进行本地测试时，它可以按预期在两个地方工作。但是 - 当我将文件上传到将托管它的服务器时（经典的 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">&copy; 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 中的含义不是我们的责任。提出明确的问题，得到明确的答案，这就是 SO 的工作原理。
看到这是一个新用户，他提出了一个清晰而写得很好的问题，请关注这个人的所作所为stackoverflow.com/questions/32129524/…
我已经编辑了我的代码。我的问题同样清晰且写得很好——用户问题比我的问题简单得多。亚当，你有帮助我的打算吗？如果不让别人请。谢谢。

标签： html css linux image cpanel

【解决方案1】：

我想我理解您对您网站的问题，如果我错了，请告诉我..

很简单，你应该在你的 css 文件中添加 img 标签选择器并给它一个属性 max-width:100%

示例如下

   img {
max-width:100%;
}

【讨论】：

嗨 Saqib，感谢您的回复。您是否建议我使用 img {} 而不是 background-image: url() ？谢谢！

【解决方案2】：

我想分享问题所在以及解决方案 - 在朋友的帮助下，我自己找到了。

在 html 和 css 中都调用了行为不正确的图像。一旦我从 html 中删除了路径，页面就会加载并在任何地方以正确的方式响应显示。

【讨论】：