- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我有一个应该在平板电脑模式和桌面模式下显示的轮播 div。我还有一个名为 header-mobile-banner 的 div,应该在移动模式下显示。 header-mobile-banner 将在平板电脑模式和桌面模式下隐藏。然后我的旋转木马将在移动模式下隐藏。问题是 header-mobile-banner 在我的移动模式下没有显示,我不知道为什么。这是我的代码:部分CSS代码:
/*general*/
.font-Awesome{font-family: 'fontawesomeregular';}
.font-GaramondPremierePro{font-family: 'Garamond Premiere Pro';}
.font-CormorantGaramond{font-family: 'Cormorant Garamond', serif;}
.font-GreatVibes{font-family: 'Great Vibes', cursive;}
.white{color: #ffffff;}
/*Header by order*/
.header-banner{ width:100%; height:663.31px; padding:0px !important; top:0; }
.header-banner-graydiv{background-color: black; background: rgba(0,0,0,0.5); position: absolute; top: 0%; left: 0; right: 0; vertical-align: middle; text-align: center; horizontal-align: middle; margin: 14% 15% 9% 15%; bottom: 0%; padding: 4%;}
.carousel-inner .header-banner-graydiv h3{font-size: 50px;}
.carousel-inner .header-banner-graydiv h1{font-size:92px;}
.carousel-inner .header-banner-graydiv h4{font-size: 39px;margin-top: -2%;margin-bottom:4%; }
.carousel-inner .header-banner-graydiv p{font-size:20px;}
.header-subscribe-section {background-color:#ad1f34; height:99.27px; width:100%}
.header-p-latestmenus{font-size:20px; letter-spacing:0.5px;}
.header-p-subscribe{font-size:28px; letter-spacing:0.5px;}
.header-btsubscribe{border-radius:4px; background-color:#831024; color:white; width:134.55px; height:44.19685px; width:146.19685px; border:none;font-size:18px;}
.header-textboxemail{width: 286.779527559px;height: 46.19685px;font-size: 17px;border: 0;margin-left: -49%;margin-top: 7%;}
.header-subscribe-section p{padding: 4% 15%;}
.header-mobile-graydiv{display: none;}
/*responsiveness lowest to greatest*/
/*mobile*/
@media (min-width: 320px) and (max-width:767px)
{
#myCarousel{display: none;}
.carousel{display: none;}
.header-mobile-banner{ width:100%; height:663.31px; padding:0px; top:0; background-image: url("../img/head_banner.jpg"); background-repeat: no-repeat;background-size: contain; }
.header-mobile-graydiv{ background-color: black; height:300px; background: rgba(0,0,0,0.5); position: absolute; top: 0%; left: 0; right: 0; vertical-align: middle; text-align: center; horizontal-align: middle; bottom: 0%; }
.header-mobile-graydiv h3{font-size: 50px;}
.header-mobile-graydiv h1{font-size: 92px;}
.header-mobile-graydiv h4{font-size: 39px;}
.header-mobile-graydiv p{font-size: 20px;}
.header-mobile-banner{display: none;}
}
/*tablet*/
@media (min-width: 768px) and (max-width:800px)
{
.header-mobile-banner{display: none;}
.header-banner-graydiv{margin: 4% 11% 8% 11%; bottom: 0%; padding:2%;}
.carousel-inner .header-banner-graydiv h3{font-size: 40px;}
.carousel-inner .header-banner-graydiv h1{font-size:68px;}
.carousel-inner .header-banner-graydiv h4{font-size: 30px;margin-top: -2%;margin-bottom:4%; }
.carousel-inner .header-banner-graydiv p{font-size:15px;}
}
@media (min-width: 801px) and (max-width:991px)
{
.header-mobile-banner{display: none;}
.header-banner-graydiv{margin: 4% 11% 8% 11%; bottom: 0%; padding-top:6%;}
.carousel-inner .header-banner-graydiv h3{font-size: 45px;}
.carousel-inner .header-banner-graydiv h1{font-size:80px;}
.carousel-inner .header-banner-graydiv h4{font-size: 35px;margin-top: -2%;margin-bottom:4%; }
.carousel-inner .header-banner-graydiv p{font-size:17px;}
}
/*desktop up to the size of my screen*/
@media (min-width: 992px) and (max-width:1365px)
{
.header-mobile-banner{display: none;}
}
/*huge*/
@media (max-width: 1920px)
{
.header-mobile-banner{display: none;}
.header-banner{ width:100%; height:663.31px; padding:0px !important; top:0; }
}
部分html代码:
<!--header-->
<div id="header">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="img/head_banner.jpg" class="header-banner" >
<div class="header-banner-graydiv">
<h3 class="font-GaramondPremierePro white">WELCOME TO</h3>
<h1 class="font-GreatVibes white">Your Restaurant Name</h1>
<h4 class="font-GaramondPremierePro white">FOOD & RESTAURANT</h4>
<p class="font-CormorantGaramond white">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod <br> tempor incididunt ut labore et dolore magna. aliqua. Ut enim ad minim </p>
</div>
</div>
<div class="item">
<img src="img/sample_carousel1.jpg" class="header-banner" >
<div class="header-banner-graydiv">
<h3 class="font-GaramondPremierePro white">WELCOME TO</h3>
<h1 class="font-GreatVibes white">Your Restaurant Name</h1>
<h4 class="font-GaramondPremierePro white">FOOD & RESTAURANT</h4>
<p class="font-CormorantGaramond white">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod <br> tempor incididunt ut labore et dolore magna. aliqua. Ut enim ad minim </p>
</div>
</div>
<div class="item">
<img src="img/sample_carousel2.jpg" class="header-banner" >
<div class="header-banner-graydiv">
<h3 class="font-GaramondPremierePro white">WELCOME TO</h3>
<h1 class="font-GreatVibes white">Your Restaurant Name</h1>
<h4 class="font-GaramondPremierePro white">FOOD & RESTAURANT</h4>
<p class="font-CormorantGaramond white">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod <br> tempor incididunt ut labore et dolore magna. aliqua. Ut enim ad minim </p>
</div>
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
<div class="header-mobile-banner" >
<div class="header-mobile-graydiv">
<h3 class="font-GaramondPremierePro white">WELCOME TO</h3>
<h1 class="font-GreatVibes white">Your Restaurant Name</h1>
<h4 class="font-GaramondPremierePro white">FOOD & RESTAURANT</h4>
<p class="font-CormorantGaramond white">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod <br> tempor incididunt ut labore et dolore magna. aliqua. Ut enim ad minim </p>
</div>
</div>
<div class="container-fluid header-subscribe-section">
<div class="container">
<div class="row">
<div class="col-md-7 col-xs-12">
<p>
<span class="header-p-latestmenus font-Awesome white">Get our latest menus in your inbox.</span>
<span class="header-p-subscribe font-GreatVibes white">Subscribe Now!</span>
</p>
</div>
<div class="col-md-5 col-xs-12">
<input type="text" name="lname" class="header-textboxemail font-Awesome white" placeholder="Email Address">
<button type="button" class="header-btsubscribe font-GaramondPremierePro">SUBSCRIBE</button>
</div>
</div>
</div>
</div>
</div>
<!--end of header-->
最佳答案
移除
.header-mobile-banner{display: none;}
从最后一行开始
@media (min-width: 320px) and (max-width:767px)
关于html - 我的横幅图片未使用 "@media (min-width: 320px) and (max-width:767px)"显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46850658/
相信我,我在 Adsense 论坛(西类牙语和英语)中问过这个问题,还检查了以下资源和问题: 1 - 2 - 3 - 4 我有一个实际与 AdMob 配合使用的 AdSense 帐户。我们在 Andr
我想创建一个标题图像/横幅,单击播放图像后,它会垂直扩展以播放YouTube上托管的视频。 此页面准确显示了我要执行的操作: blendedlearningnow.com/about。 我不确定这是否
这里有一个漂亮的 Flash 横幅:http://osc4.template-help.com/drupal_30779/ 。我想知道是否有一个 jquery 库可以让我达到同样的效果。 (点击、滑动
我在一个宽度为 960px 的容器 div 中有一个标题。页眉包含几个完全位于页面中央的 Logo 。我想有一个背景渐变永远延伸到标题后面。出现问题是因为渐变横幅受限于 960px 的宽度。我尝试将横
有谁知道是否可以创建一个功能标题生成器,使用户能够使用颜色、图像和文本对其进行自定义?然后保存并添加到他们的网站? I have created a feature banner demo here
通常在我的网页中,我会有一个 #wrapper DIV 来包装整个页面并设置为如下内容: #wrap {position: relative; width: 1000px; display: bloc
我正在寻找一种动态创建可以放置在其他页面上的横幅的方法。横幅包含一个背景图像、两个重叠图像和两个位于该背景图像之上的文本标签。 是不是只能用绝对定位来实现元素的叠加?我如何确保横幅本身相对放置在集成页
我有一个 900 x 80 的标题区域,以及一个适合该区域左上角的 175 x 75 Logo 。我想要做的是使用 jquery 将 Logo 从标题区域的右侧移动到左侧,然后卡住并设置在左侧。我知道
我成功地在页脚上显示智能横幅,然后将其处理掉。我的问题是显示在应用程序的所有页面上。 我的问题是:如何只显示在一页上? @override void initState() { super.i
我主要是一名开发人员,不知道使用 Adobe Flash CS4。是否有一种简单的方法可以将链接添加到 Flash 横幅。我有 .flv 文件,其中包含库中的一些项目和两层。 请给我一步一步的指示
如何在响应式布局中处理 Adsense 横幅? 据我从 Adsense TOS 中了解到,我几乎不允许在客户端对横幅做任何事情,所以我不能在客户端将横幅切换到较小的分辨率,如果它是低分辨率的. 似乎我
ChannelBannerResource chBannerResource = new ChannelBannerResource(); chBannerResource.setKind("yout
下面附有代码,我正在尝试使用 javascript 制作横幅。 使用 setInterval 我做了一个循环,一个接一个地显示 3 个 div。 我遇到的问题是,当循环结束时,有一个按钮显示“返回”,
我即将在拥有 1000 个活跃用户的应用程序中实现 AdMob 横幅。 我有 1 个 main Activity,其中包含 5 个 fragment,每个 fragment 代表不同的选项卡。 我应该
我尝试在我的应用中实现 AdMob 横幅,但它没有显示。我已经使用了横幅,并且总是使用相同的方式..我有一个带有 View 的 FrameLayout 。此 FrameLayout 位于 Linear
我在我的第一款游戏中使用 Andengine 与 Mobclix 结合使用,每当我尝试运行该应用程序时,我都会在 LogCat 中收到巨大错误。我到处都搜索过,但似乎找不到答案。 FATAL EXCE
JS: document.getElementsByTagName("input, select, textarea, option, optgroup, fieldset, label").onch
我想在页面底部安装一个横幅,但它与主屏幕的内容重叠。在主屏幕中有很多内容并且有滚动。 有人知道为什么吗?谢谢。 XML android:id="
我想在屏幕顶部显示横幅,但是有问题。在我的代码中(这不是我的代码,因为我正在学习过程中)我有两个选择。在屏幕底部的屏幕下方或上方显示横幅。 public void showBanner(fin
我的 AdMob 横幅显示在屏幕顶部而不是底部。 这是我的代码: adView = new AdView(mSingleton); adView.setAdSize(AdSize.SMART_BANN
我是一名优秀的程序员,十分优秀!