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

标签 html css media-queries background-image responsive

所以我有点问题.. 即使它们位于媒体查询代码所在的 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/

上一篇：html - 使用 CSS box-shadow 制作脉冲动画会占用大量 CPU

下一篇：html - flex-grow 不适用于图像

相关文章：

html - 使用来自不同 div 的 anchor 标记或按钮更改幻灯片

html - 用 inline-block 包裹有 % 作为 margin 的子元素

html - 如何在 CSS 中水平居中 10000px(比全屏宽)的 div？

html - 带有图案叠加的整页背景图像

css - CSS 中有没有一种方法可以获取元素的高度(或其他属性)并与其他元素的属性共享相同的值？

html - Outlook 2007 到 2013 显示设备媒体查询

html - 对齐中心下拉菜单 Bootstrap 4

javascript - bxslider javascript slider 不工作

php - Bootstrap CSS @media 在 laravel 中不工作

css - 在一个样式表中包含多个 CSS 媒体查询会产生什么影响？

©2024 IT工具网  联系我们