- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时,我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
我有我想让@media 工作的CSS 文件。媒体应做到以下几点:- 手机版应该只有一栏信息。- 在平板电脑版本 (500-1024) 中应为两列- 在 1024-1240 宽度应该是三列- 在宽度超过 1240 的屏幕中,将有四列。
我也想添加页脚,但它总是在页面顶部结束。
CSS
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
@charset "utf-8";
/*--playTime adobe colour--*/
body {
margin: 5px;
background-color: rgb(247, 168, 84);
}
/*-----978GS--------*/
.col {
margin-left: 25px;
margin-right: 17px;
margin-bottom: 20px;
margin-top: 3px;
}
.col-4 {
width: 305px;
float: left;
}
.col-6 {
width: 474px;
}
.col-12 {
width: 978px;
}
/*---end 978GS---*/
.img-responsive {
width: 100%;
}
.btn {
border: 1px solid white;
padding: 6px 10px;
border-radius: 5px;
}
.btn-buy{
background-color: rgb(87, 218, 247);
border-color: none;
font-family: 'Fjalla One', sans-serif;
}
.product-box{
background-color: rgb(145, 210, 84);
padding: 5px;
box-sizing: content-box;
}
.product-box h3{
color: peachpuff;
font-family: 'Fjalla One', sans-serif;
font-size: 1.5em;
margin-bottom: 0.5em;
text-align: center;
}
.product-box p{
color: peachpuff;
font-family: 'Poppins', sans-serif;
margin-top: 3px;
}
#text-container-header{
text-align: left bottom;
}
.clearfix {
clear: both;
}
/*--end main --*/
/*----*/
#mainPageBanner {
height: 200px;
background-color: ;
background-size: 1050px;
background-image: url(../Bilder/barcelona.jpg);
align-content: center;
}
/*--end mainbanner--*/
/*---Start banner-*/
#mainPageHeader {
height: 10em;
background-color: rgb(242, 73, 7);
text-align: left;
margin-bottom: 15px;
}
#logo{
color: peachpuff;
text-decoration: none;
font-size: 3em;
font-family: 'Fjalla One', sans-serif;
display: inline-block;
margin-top: 0.1em;
margin-left: 0.10em;
text-align: ;
}
#mainPageNav{
width: 978px;
margin: auto;
background-color: none;
}
#mainPageNav::after{
content: "";
display: block;
clear: both:
}
ul{
margin: 0;
padding: 0;
list-style: none;
}
li{
float: left;
width: 80px;
position: relative;
}
a{
background-color:
color: rgb(255, 255, 0);
font-family: 'Fjalla One', sans-serif;
text-align: left;
padding-bottom: 10px;
padding-top: 10px;
}
/*--banner end--*/
/*--- Start Footer--*/
.mainPageFooter{
text-align: center;
text-decoration-line: underline;
}
/*--- ends footer --*/
/*---Start media Queries---*/
@media screen (min-width: 500px) and (max-width: 2040) {
.col-4{
width: 100%;
}
}
HTML
<header id="mainPageHeader" class="col">
<a id="logo" href="#ng">Zen</a>
<nav id="mainPageNav" class="col-12">
<ul>
<li><a href="#ng">Home</a></li>
<li><a href="#ng">Destinations</a></li>
<li><a href="#ng">Travel</a></li>
<li><a href="#ng">My Account</a></li>
<li><a href="#ng">Contact</a></li>
</ul>
</nav>
<!--end navi menu-->
</header>
<div id="mainPageBanner" class="col col-12">
<div id="text-container-header">
<p>Banner text</p>
</div>
</div>
<!--End banner-->
<div id="mainContent">
<article class="col col-4 col-8 product-box col-7">
<div id="product-content-box">
<h3>Las Vegas</h3>
<img class="img-responsive" src="Bilder/lasvegas.jpg" alt="Las vegas">
<p>A quem concursionibus ubi excepteur te officia. Ab ita sempiternum. Quae ingeniis ita aute cillum, legam tempor hic proident. Minim admodum iis laborum. O aute appellat aut multos imitarentur arbitror lorem incurreret. Varias aut admodum de malis,
de doctrina cohaerescant.</p>
<input class="btn btn-order" type="button" value="Bestill">
</div>
</article>
<article class="col col-4 col-8 product-box col-7">
<div id="product-content-box">
<h3>Kyoto</h3>
<img class="img-responsive" src="Bilder/kyoto.jpg" alt="Kyoto">
<p>Commodo anim varias appellat illum se pariatur quorum quid in varias ad illum a aut quem laborum, malis nescius fidelissimae. Multos mentitum ne sint aute, est eu tractavissent. Doctrina quo commodo ea in labore si tamen. Se vidisse arbitrantur,
vidisse instituendarum ut deserunt, voluptate o quamquam ea et fugiat relinqueret. Ab ea velit consequat, tempor malis summis aut quid quo admodum ea vidisse se mandaremus nulla admodum officia. </p>
<input class="btn btn-order" type="button" value="Bestill">
</div>
</article>
<article class="col col-4 col-8 product-box col-7">
<div id="product-content-box">
<h3>Tenerife</h3>
<img class="img-responsive" src="Bilder/tenerife.jpg" alt="Tenerife">
<p>Ab legam ullamco commodo. Offendit culpa ipsum senserit labore et quid officia cernantur se magna probant ne arbitrantur quo irure singulis quo consequat. Proident lorem labore singulis ipsum, sed tamen concursionibus. O nescius ex aliquip aut duis
cernantur se lorem legam, magna litteris e voluptatibus, ad mentitum comprehenderit. Pariatur relinqueret quo cupidatat. Et duis sed lorem.</p>
<input class="btn btn-order" type="button" value="Bestill">
</div>
</article>
<article class="col col-4 col-8 product-box col-7">
<div id="product-content-box">
<h3>Paris</h3>
<img class="img-responsive" src="Bilder/louvre.jpg" alt="Paris">
<p>Laboris est quis, illum cernantur do praetermissum, quo ipsum cupidatat domesticarum si quamquam quorum varias ut esse ne do elit consequat efflorescere, hic si amet voluptate quo culpa est fabulas, incurreret sed quid commodo. Ubi lorem consequat
an</p>
<input class="btn btn-order" type="button" value="Bestill">
</div>
</article>
<div class="clearfix"></div>
<article class="col col-4 col-8 product-box col-7">
<div id="product-content-box">
<h3>Barcelona</h3>
<img class="img-responsive" src="Bilder/barcelona.jpg" alt="Barcelona">
<p>Ubi incurreret voluptatibus. Aut multos nulla ita pariatur et appellat amet aliqua consequat summis a cernantur eram aut aliquip eruditionem, vidisse noster ullamco incurreret. Expetendis dolore esse an tamen, an irure sempiternum. Ab a amet probant
ubi quibusdam qui laboris, e nam fidelissimae ne possumus eu irure. Iis a aute legam amet te labore mandaremus ne quem fugiat. Deserunt arbitrantur est vidisse iis senserit id esse ne id excepteur quo laboris, voluptate quae dolore sed esse. Aut
nulla elit velit tempor.</p>
<input class="btn btn-order" type="button" value="Bestill">
</div>
</article>
<article class="col col-4 col-8 product-box col-7">
<div id="product-content-box">
<h3>London</h3>
<img class="img-responsive" src="Bilder/london.jpg" alt="London">
<p>Consequat quem consequat ex quibusdam ut fore, sed laboris ab laboris se a legam laborum. Legam arbitror ita officia, qui eu sunt possumus. Vidisse praesentibus id laboris, illum non mentitum ab e quorum malis fugiat tempor, ut eram legam sed proident.
Esse exercitation possumus tamen fabulas. Ubi aliqua dolore illum singulis, eram an consequat ubi fore. Mandaremus multos cernantur cupidatat aut sed occaecat exercitation, quamquam familiaritatem an mentitum do doctrina do varias incididunt.</p>
<input class="btn btn-order" type="button" value="Bestill">
</div>
</article>
<article class="col col-4 col-8 product-box col-7">
<div id="product-content-box">
<h3>Tokyo</h3>
<img class="img-responsive" src="Bilder/tokyo.jpg" alt="Tokyo">
<p>Qui minim offendit. Quo velit proident adipisicing an culpa fabulas ex aliqua enim. Fugiat ne ita quid iudicem. Eram cernantur ad voluptate. Ingeniis non litteris. Velit offendit concursionibus, anim possumus offendit, irure sed te multos expetendis
ea o malis quamquam transferrem. Quae a appellat si aute.</p>
<input class="btn btn-order" type="button" value="Bestill">
</div>
</article>
<article class="col col-4 col-8 product-box col-7">
<div id="product-content-box">
<h3>Oslo</h3>
<img class="img-responsive" src="Bilder/oslo.jpg" alt="Tokyo">
<p>Ullamco quid veniam ad quis. Legam proident se singulis a voluptate quem in commodo voluptatibus. Varias expetendis despicationes. Eram iis e illum aliquip nam nam magna cillum irure tempor aut duis mentitum se velit nulla, appellat elit varias
probant velit. Ut noster duis o eiusmod. Fabulas fidelissimae iis commodo si mentitum cillum appellat iis probant concursionibus ita ullamco, nisi iudicem do dolor quem, arbitror eram possumus, ullamco summis pariatur, esse quibusdam relinqueret,
labore exquisitaque occaecat esse quamquam.</p>
<input class="btn btn-order" type="button" value="Bestill">
</div>
</article>
<footer id="mainPageFooter">
<p>----Zen----</p>
</footer>
</div>
</div>
</div>
最佳答案
可能是您在媒体查询中遗漏了 和
:
例如 @media 屏幕和(最小宽度:500 像素)和(最大宽度:2040){
关于html - 如何使媒体查询工作 css3,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40632581/
似乎最近我看到越来越多的人开始在他们的样式表中使用 media="all" 而不是 media="screen"。 我的问题是什么时候应该使用 media="all" 而不是 media="scree
我正在尝试使用 https://www.instagram.com/developer/endpoints/media/ ,但对于我使用的每个媒体 ID,我总是得到相同的结果: { "meta
哟,我正在为服务器制作一个 MOTD 供最终用户阅读。但是,对于使用较小显示器的用户来说,它看起来非常压缩,例如,当分辨率为 1280x1040 时,它会被拉低。我不熟悉 CSS 中的 @media
我在我的 CSS 文件中使用了 @media screen 而不是 (-webkit-min-device-pixel-ratio:0)。我的问题是关于指定的值,即在这种情况下为“0”。值的变化将如何
我正在播放 Activity 中的视频,我需要显示/隐藏顶部栏 View 以及媒体 Controller 。所以当媒体 Controller 在屏幕上时,我的顶部 View 应该是可见的,当媒体 Co
我在我的 WordPress 主题中创建了一个小部件来显示图像。到目前为止,小部件可以工作,我可以输入值并在前端显示这些值。 当我选择一个小部件并将其放入小部件区域时,媒体上传按钮不起作用。在 Wor
我正在使用MWFeedParser从此处读取Youtube原子供稿:here xml代码: 我如何获取媒体的网址:缩略图? 我试图更改MWFeedParser.m 由此: else if ([cu
当使用 Python 向 Instagram API 发出 GET 请求时,传递所需的变量,如下所示 photos = api.media_search(lat=latitude, lng=longi
我正在使用与媒体播放器关联的媒体 Controller 来播放声音。问题是媒体 Controller 一旦失去焦点就会隐藏起来。我有一个按钮,按下时会播放声音,媒体 Controller 会出现在屏幕
我有一个媒体播放器并与它关联了一个媒体 Controller 。控件工作正常。 我遇到了两个问题: 当媒体 Controller 获得焦点时,即用户触摸它然后触摸屏幕的另一部分时,媒体 Control
关闭。这个问题需要debugging details .它目前不接受答案。 编辑问题以包含 desired behavior, a specific problem or error, and th
我在对话框中显示一个 VideoView 并向其附加一个媒体控件。 但是当我尝试点击媒体控件(播放、搜索栏等)时,对话框会消失。 媒体控制按钮不会被点击,而是将点击注册为 Dialog 的 Outsi
我目前正在使用 HTML 编写可打印文档,它将显示从数据库中提取的数据。我的想法是我将使用 HTML/CSS 使文档看起来不错,但它将专门用于打印。 文档的布局使用表格来控制数据库中数据的显示方式。
我需要在网络应用程序中打印我的报告。 我有在我的代码中。但它不应用任何样式。另一方面,如果我使用 在文档中编写 print.css 代码一切正常。 怎么了? 最佳答案 也许你在主样式之前插入打印样式
CSS html{ overflow-y:scroll; } js function showW(){ var a=($(window).width()); $('#
我编写了一个 Chrome 扩展程序,其中一个功能是您可以在您所在的页面中调出一个帮助面板,其中包含其使用指南。这个帮助面板是通过JS插入到页面中的,它的CSS都是通过$('#selector_for
我需要为 WORM 媒体开发归档软件。 这种类型的媒体允许通常的访问操作:读取、写入,但文件一旦写入,就无法修改或删除。 因为这样的媒体可能很昂贵,我想知道如何在开发阶段为测试创建一个假的 WORM
下面的这个 Activity 工作正常,但 mediaController 仅在我单击屏幕时显示。第二个问题是媒体 Controller 只显示 3 秒。我应该怎么做才能消除这个问题? public
我正在使用 VideoView 播放本地 mp4,我也在使用 MediaController。媒体控制栏未显示在我的视频剪辑下方,而是显示在屏幕中间。我使用 setAnchorView 将其附加到我的
我的布局包含 videoView 还有java代码中的Medicontrolleri: final MediaController mediaCont
我是一名优秀的程序员,十分优秀!