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

时间：2017-11-21 14:41:55

标签： html css media-queries background-image responsive

所以我有一个问题..我的媒体查询即使在媒体查询代码所在的CSS文件中也不会响应我的样式。我把它缩小了，弄明白我的“背景：透明;”在我的媒体问题内部没有工作。如果我开始工作，我的背景图像应该按照我想要的方式工作。

这是我要去的布局，目前我的背景没有响应所以现在只是一个大的红色背景覆盖我的白色文字图片，这是它应该是什么时候它的响应。代码如下。

图片：https://i.stack.imgur.com/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%;
}

3 个答案:

答案 0 :(得分：5)

您的媒体查询格式不正确，您错过了大括号。

你有什么 

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

您需要什么 

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

答案 1 :(得分：1)

尝试这样的事情：

@media only screen and (max-width: 768px) {
.your_class_her_or_id_here {
        you_style_here;
        }
    }

答案 2 :(得分：1)

还想指出您需要查看ID部分

<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%;">

因为有两个或更多错误。我建议你检查一下。

相关问题
最新问题