Question

我查看了之前的问题，但没有涉及我的确切问题。我认为自己是初学者 - 中级水平的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;
            }

    }

Answer 1

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

很简单，你应该在你的css文件中添加img tag-selector并给它一个属性max-width：100％

示例如下：

   img {
max-width:100%;
}

Answer 2

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

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

响应式设计不适用于linux cpanel（GoDaddy） - 适用于classis linux主机（GoDaddy）和本地

2 个答案: