gpt4 book ai didi

html - 媒体查询没有响应我的样式?在 CSS 文件中导入错误?

转载 作者:太空宇宙 更新时间:2023-11-04 14:10:33 28 4
gpt4 key购买 nike

所以我有点问题.. 即使它们位于媒体查询代码所在的 CSS 文件中,我的媒体查询也不会响应我的样式。我缩小了范围,发现我的“背景:透明;”在我的媒体查询中不起作用。如果我能正常工作,我的背景图像应该按照我想要的方式工作。

这是我想要的布局,目前我的背景没有响应,所以现在它只是一个大的红色背景,用白色文本覆盖我的图片,这就是它在响应时应该的样子。代码如下。

图片:/image/n6WMO.jpg

HTML:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="pwccss.css">
<meta name="viewport" id="pwcviewport" content="width=device-width, initial-scale=1.0">
</head>
<body class="pwcscrolling longformcontent longform-level2-landing-template page-primary-col--red page-
secondary-col--burgundy page-tertiary-col--maroon">

<div id="wrapper">

<div class="centerPar">

<section id="title" class="clearfix no-background__mobile page-section page section--col-primary page-section--col-dark nomove fullwidth videobghost" data-image:"https://www.pwc.se/content/dam/pwc/se/sv/hero/hero-finansdagen-1920x1080-16_9.jpg" data-wcmmode"false" data-parallax:"false" style="background-image: url(https://www.pwc.se/content/dam/pwc/se/sv/hero/hero-finansdagen-1920x1080-16_9.jpg); background-position: center center; background-repeat: no-repeat; background-size: cover; margin-top: 2%;">

<div class="parsys sectionpar">

<div class="herotitle section">

<div class="dpe-component-wrapper hero-title-component hero-title-component--colour-h1">

<div class="hero-title">

<div class="container">

<div class="row">

<div class="textColumn col-sm-6">

<div class="hero-title-textpanel">

<h1>Finansdagen</h1>

<p class="sub-heading">Finansdagen - ett event där PwC samlar intressanta talare kring ett ämne som är aktuellt i tiden för all som arbetar inom den finansiella sektorn.</p>


</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>

<section id="två">

<div class="text-border">

<div class="Youtube">

<iframe id="videoelement4107d561-1255-4d1c-ac40-0cac0106bf82_youtube" style="display: block;" frameborder="0" allowfullscreen="1" gesture="media" title="YouTube video player" width="100%" height="100%" src="https://www.youtube.com/embed/1YsOkJcAqmQ?html5=1&amp;autoplay=0&amp;controls=0&amp;showinfo=0&amp;rel=0&amp;modestbranding=0&amp;playsinline=1&amp;origin=https%3A%2F%2Fwww.pwc.se&amp;enablejsapi=1&amp;widgetid=1" class=" jw-stretch-exactfit"></iframe>

</div>

<div class="text">

<h2 style="font-size: 2.2rem; line-height: 1.3em; margin: 0px 0px 20px; font-style:italic; font-family: georgia,serif">
Se filmen från finansdagen</h2>

<p style="line-height: 1.5em; margin: 0px 0 10px; letter-spacing: .004em; font-size: 1.142rem;">
Anna Wikland, Sverigechef på Google, blev tidigare i år utsedd till Sveriges mäktigaste
kvinna inom tech. Så här ser hon på framtiden:
</p>
</div>

</div>


</section>

</div>
</div>
</body>
</html>

css:

/* styling på bodyn */

html, body{
height: 100%;
}

body{
width: 100%;
height: auto;
margin:0 auto;
color: rgb(64, 64, 65);
line-height: 1;
}

.centerPar {
padding-top: 125px;
min-height: 100%;
}

h1, .h1 {

font-size: 2.714rem;
font-weight: bold;
line-height: 1.3em;
margin: 20px 0 10px;
letter-spacing: .002em;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
font-family: georgia,serif;
font-style: italic;
font-weight: normal;
color: inherit;
}

*, *:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

*, *:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

* {
padding: 0;
margin: 0;
box-sizing: border-box;
}

* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

div {
display: block;
}

/* body slut */

/* wrapper runt sektionerna */

#wrapper{
margin-left: auto;
margin-right: auto;
background: #fff;
position: relative;
max-width: 100%;
padding: 0 !important;
min-width: 320px;
}

#wrapper section:before,
#wrapper section:after {
content: " ";
display: table;
}

/* wrapper slut */

/* sektion ett */

.page-primary-col--red .page-section.page-section--col-primary {
background: #e0301e;
}

.page-section.page-section--col-primary {
background: #e0301e;
}

@media (max-width: 767px)
.no-background__mobile {
background-image: none !important;
}

section, .page-section {
height: auto;
margin: 0 auto;
width: 100%;
position: relative;
}

.clearfix, .clearfix:before, .clearfix:after, .container:before,
.container:after, .container-fluid:before, .container-fluid:after,
.row:before, .row:after {
content: " ";
display: table;
}

section {
table-layout: fixed;
}

section.fullwidth .parsys.sectionpar {
width: 100%;
padding: 0;
}

.pwcscrolling .sectionpar, .pwcscrolling #footer-wrapper {
padding: 0 15px;
}

.sectionpar, #footer-wrapper {
margin: 0 auto;
}

@media (max-width: 768px)
.page-primary-col--red .hero-title{
background: #e0301e;
}


.hero-title {
background: #e0301e;
color: #fff;
position: relative;
overflow: hidden;
}

.container{
padding-left: 15px;
padding-right: 15px;
margin-right: auto;
margin-left: auto;
}

.container h1:first-of-type,
.container h2:first-of-type,
.container h3:first-of-type {
margin-top: 0;
}

@media (max-width: 600px)
.container {
padding-left: 15px;
padding-right: 15px;
}

@media (min-width: 768px)
.col-sm-6 {
width: 50%;
}


@media (min-width: 768px)
.col,
.col-sm-1, .col-sm-2,
.col-sm-3, .col-sm-4,
.col-sm-5, .col-sm-6,
.col-sm-7, .col-sm-8,
.col-sm-9, .col-sm-10,
.col-sm-11, .col-sm-12 {
float: left;
}

@media (min-width: 768px)
.container {
width: 750px;
}

@media (min-width: 768px)
body .hero-title-component .hero-title {
background: transparent;
min-height: 35.715rem;
}

@media (min-width: 768px)
.hero-title-textpanel {
background: #fff;
color: #000;
margin: 40px 0;
padding: 40px 40px 20px;
}

@media (min-width: 992px)
.sectionpar {
width: 970px;
}

@media (min-width: 768px)
.page-primary-col--red .hero-title-component--colour-h1 .hero-title-textpanel h1 {
color: #e0301e;
}

@media (min-width: 768px)
.hero-title-textpanel p {
color: #404041;
}

.row{
margin-left: -15px;
margin-right: -15px;
}

.hero-title-textpanel {
background: inherit;
margin: 20px 0;
padding: 0;
}

.hero-title-textpanel h1 {
color: #fff;
margin: 0 0 10px;
font-weight: bold;
}

.sub-heading {
font-size: 1.714rem;
line-height: 1.5em;
margin: 10px 0 10px;
}

.serif, .sub-heading, .lead {
font-family: georgia,serif;
font-style: italic;
font-weight: normal;
}

element.style{
background-image: url(https://www.pwc.se/content/dam/pwc/se/sv/hero/hero-finansdagen-1920x1080-16_9.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}

article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
display: block;
}

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,
a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,
strike,strong,sub,sup,tt,var,b,u,i,dl,dt,dd,ol,ul,li,fieldset,form,label,
legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,
figure, figcaption,footer,header,hgroup, menu,nav,output,section,summary,time,mark,audio,video,{
margin:0;
padding:0;
border:0;
vertical-align: baseline;
}

.btn-group-vertical>.btn-group:after, .btn-group-vertical>.btn-group:before, .btn-toolbar:after, .btn-toolbar:before,
.clearfix:after, .clearfix:before,
.container-fluid:after, .container-fluid:before, .container:after, .container:before,
.dl-horizontal dd:after, .dl-horizontal dd:before,
.form-horizontal .form-group:after, .form-horizontal .form-group:before,
.modal-footer:after, .modal-footer:before,
.nav:after, .nav:before,
.navbar-collapse:after, .navbar-collapse:before, .navbar-header:after, .navbar-header:before, .navbar:after, .navbar:before,
.pager:after, .pager:before, .panel-body:after, .panel-body:before, .row:after, .row:before {
display: table;
content: " ";
}

.col, .col-xs-1, .col-sm-1, .col-md-1, .col-lg-1,
.col-xs-2, .col-sm-2, .col-md-2, .col-lg-2,
.col-xs-3, .col-sm-3, .col-md-3, .col-lg-3,
.col-xs-4, .col-sm-4, .col-md-4, .col-lg-4,
.col-xs-5, .col-sm-5, .col-md-5, .col-lg-5,
.col-xs-6, .col-sm-6, .col-md-6, .col-lg-6,
.col-xs-7, .col-sm-7, .col-md-7, .col-lg-7,
.col-xs-8, .col-sm-8, .col-md-8, .col-lg-8,
.col-xs-9, .col-sm-9, .col-md-9, .col-lg-9,
.col-xs-10, .col-sm-10, .col-md-10, .col-lg-10,
.col-xs-11, .col-sm-11, .col-md-11, .col-lg-11,
.col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
position: relative;
min-height: 1px;
padding-left: 15px;
padding-right: 15px;
}
section {
table-layout: fixed;
}

/* sektion ett slut */

#två{
background-color:#f2f2f2;
margin-top: 2%;
width: 100%;
}

.text{
float: left;
}

.text-border {
width: 28%;
margin-left: 11%;
}

最佳答案

您的媒体查询格式不正确,缺少大括号。

你有什么

@media (max-width: 767px) /* styling */ 

你需要什么

@media (max-width: 767px) { /* styling */ }

关于html - 媒体查询没有响应我的样式?在 CSS 文件中导入错误?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47415808/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com