个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-11-28 07:20:03 27 4
gpt4 key购买 nike

我查看了之前的问题，但没有涉及到我的确切问题。我认为自己是 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">&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 文件中添加 img 标签选择器并给它一个属性 max-width:100%

例子如下

   img {
max-width:100%;
}

关于html - 响应式设计不适用于 linux cpanel (GoDaddy) - 适用于 classis linux 主机 (GoDaddy) 和本地，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32129166/

27 4 0
文章推荐： javascript - 如何防止连续单击不同选项卡时文本被 chop ？
文章推荐： javascript - PHPSESSID从B域到A域在Chrome和Firefox上使用，而不是在Safari和IE上使用
文章推荐： javascript - 如何将函数附加到 ng-repeat 的第二个元素
文章推荐： jquery - CSS/jQuery 防止在某些 Div 上滚动
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com