1

我正在开发一个 wordpress 网站。该网站有responsive.css文件，用于在移动设备上以不同方式呈现。我添加了几行代码并将其保存。

当我在移动设备上检查网站或在 Firefox 上使用响应式视图时，它不会为设备呈现样式。*我撤消更改并保存仍然相同。样式表像以前一样加载。* 但它不起作用

样式是

@media only screen and (min-width: 960px) and (max-width: 1040px) { 
    .container,.menu-center-wrapper,.logo-menu-wrapper,.gototop-wrap { width:960px; }
    .portfolio-filter-wrap {
        width: 980px;
    }

    .portfolio-columns-wrap {
        width:860px;
    }
    #ccollect {  right:19% !important;}
    #creplay{ left:17% !important;


    ul.portfolio-four li { width:200px; height: 240px;}
    ul.portfolio-four li a.portfolio-image-link { height:129px;}
    ul.portfolio-four li .displayed-image {
        width:200px;
        height:129px;
    }

    ul.portfolio-three li { width:273px; height:262px; }
    ul.portfolio-three li .displayed-image {
        width:273px;
        height:177px;
    }
    ul.portfolio-three li a.portfolio-image-link { height:177px; }

    ul.portfolio-two li { width:420px; height:338px; }
    ul.portfolio-two li .displayed-image {
        width:420px;
        height:259px;
    }
    ul.portfolio-two li a.portfolio-image-link { height:259px; }

    ul.portfolio-one li {
        margin: 0 0 30px 0;
        width:860px;
    }
    ul.portfolio-one li a.portfolio-image-link {width:860px;}
    ul.portfolio-one li .displayed-image {width:860px; height:auto;}


    .ajax-portfolio-image-wrap {
        width:558px;
    }
    .ajax-portfolio-image-wrap img {
    max-width:100%;
    }

    ul.portfolio-list li,.portfolio-displayed .ajax-image-selector { width: 273px; height:202px;}
    ul.portfolio-list li .portfolio-image-link { height: 168px; }

    ul.portfolio-list li .displayed-image {
        width:273px;
        height:168px;
    }

    #footer .footer-column {
        margin: 0 0 0 20px;
        width:200px;
    }

    .sidebar-widget .infobar-portfoliogrid li img,
    .flickr_wrap .flickr_badge_image img {
         width: 60px;
         height: 60px;
    }

    #footer .flickr_wrap .flickr_badge_image img {
        width:58px;
        height:58px;
    }
    .footer-widget .infobar-portfoliogrid li img {
        width:53px;
        height:53px;
    }

    #searchform input {
        width:70%;
    }

}

/* #Tablet (Portrait)
================================================== */

    /* Note: Design for a width of 768px */

@media only screen and (min-width: 768px) and (max-width: 959px) {

.contex img{
    width: 30%;
    }
#creplay{ left:27% !important;}
#ccollect{ right:0 !important;}

    .container,.menu-center-wrapper,.logo-menu-wrapper,.gototop-wrap { width:758px;}

    .two-column {
        width: 55%;
    }

    .homemenu ul li strong {
        font-size:11px;
    }
    .homemenu .menu {
        margin-top:10px;
    }

    .homemenu ul li a {
        padding-left:6px;
        padding-right:6px;
    }

    .homemenu ul li a {
        border-right:none;
    }

    .homemenu ul li span { display:none; }

    .homemenu .menu li.sfHover ul {
        top: 50px;
    }

    .homemenu ul li:last-child a {
    padding-right:20px;
    }

    .social-header {
        padding-right:20px;
    }
    .portfolio-filter-wrap {
        width: 778px;
    }
    .portfolio-columns-wrap {
        width: 658px;
    }

    .grid-list-services ul li {
        width:212px;
    }
    .grid-list-services .gridservice_image {
            width:212px;
            height:auto;                    
            }
    .grid-list-services .gridservice_image,.grid-list-services .gridservice_image img {
            width:210px;
            height:auto;                        
            }

    ul.portfolio-four li { width:149px;}
    ul.portfolio-four li a.portfolio-image-link { height:96px;}
    ul.portfolio-four li { height:240px; }
    ul.portfolio-four li .displayed-image {
        width:149px;
        height:96px;
    }

    ul.portfolio-three li { width:206px; height:228px;}
    ul.portfolio-three li a.portfolio-image-link { height:127px; }
    ul.portfolio-three li .displayed-image {
        width:206px;
        height:127px;
    }

    ul.portfolio-two li { width:319px; height:292px }
    ul.portfolio-two li a.portfolio-image-link { height:197px;}
    ul.portfolio-two li .displayed-image {
        width:319px;
        height:197px;
    }

    ul.portfolio-one li {
        margin:0 0 30px 0;
        width:655px;
    }
    ul.portfolio-one li .displayed-image {width:655px; height:auto;}


    .ajax-portfolio-image-wrap {
        width:358px;
    }
    .ajax-portfolio-image-wrap img {
        max-width:100%;
    }
    ul.portfolio-metainfo { padding-bottom:0; padding-top:15px; border:none;}
    .ajax-portfolio-data h1 { margin-top:10px; }
    ul.portfolio-metainfo li { display:inline-block; }
    ul.portfolio-list li,.portfolio-displayed .ajax-image-selector { width: 206px; height:160px;}
    ul.portfolio-list li .portfolio-image-link { height: 127px; }
    ul.portfolio-list li .displayed-image {
        width:206px;
        height:127px;
    }

    p.ajax-image-desc { display:none;}

    .header_search { width:130px;}
    #searchform input { width:57%;}

    .ajax-psection-left { width:390px;}
    #footer .footer-column { width: 159px; }

    #popularposts_list .popular_thumbnail img, #recentposts_list .recent_thumbnail img { width:50px;height:50px; }

    .sidebar-widget .infobar-portfoliogrid li img,
    .flickr_wrap .flickr_badge_image img {
         width: 41px;
         height: 41px;
    }

    #footer .footer-column {
        width: 149px;
    }

    .footer-widget .infobar-portfoliogrid li img,
    .footer-widget .flickr_wrap .flickr_badge_image img {
         width: 40px;
         height: 40px;
    }
    #footer .flickr_wrap .flickr_badge_image img {
        width:41px;
        height:41px;
    }
    .footer-widget .infobar-portfoliogrid li img {
        width:36px;
        height:36px;
    }

}


/*  #Mobile (Portrait)
================================================== */

    /* Note: Design for a width of 320px */

@media only screen and (max-width: 767px) {

.logo {
    float: none;
    position: static;
}
#demopanel, .paneloptions { display:none !important; }
.logo img { max-width:140px; padding-top:10px;}
.top-menu-wrap { display:none; }
.main-select-menu { display:block; }
.fullscreenslideshow-audio { display:none !important; }

#controls,#controls-wrapper,.control-underlay { display:none !important; }
.slidshowbackground-panel { display:none !important; }
#fullscr-copyright { padding: 2px 4px; margin-left:10px;}

div.jp-audio div.jp-type-single div.jp-progress {
    width: 30%;
}
div.jp-audio div.jp-type-single div.jp-current-time,
div.jp-audio div.jp-type-single div.jp-duration {
    width: 30%;
}
div.jp-audio div.jp-type-single a.jp-mute,
div.jp-audio div.jp-type-single a.jp-unmute {
    left: 75%;
}

.jp-title li {
    display:none;
}

div.jp-video-360p div.jp-type-single a.jp-stop {
    left: 60.76923076923077%;
}
div.jp-video-360p div.jp-type-single a.jp-play,
div.jp-video-360p div.jp-type-single a.jp-pause {
    left: 50.61538461538462%;
}
div.jp-video-360p div.jp-type-single a.jp-mute,
div.jp-video-360p div.jp-type-single a.jp-unmute {
    left: 75%;
}

.contex img{
    width: 50%;
    }
#creplay{ left:27% !important;}
#ccollect{ right:0 !important;}

.postinfo { display:none; }


    .two-column { width:100%; }

    .accordion-tabs .pane, .panes .pane { width:155px;}
    ul.tabs li { float:none; }

    #menu-top { display:none; }
    .menu-toggle { display:none; }
    .homemenu { visibility:hidden; }
    .sidebar-widget, .sidebar-wrap, .sidebar-wrap-single { display:none;  }

    .flex-caption-wrap {
        padding: 0 0 0 20px;
    }
    .flex-caption, .flex-title {
        visibility:hidden;
    }
    .flex-direction-nav {
        visibility:hidden;
    }

    .grid-list-services ul li {
        display:none;
    }
    #slidecaption { top:-2000px }

    .entry-content .column1 {width:100%;}
    .entry-content .column2 {width:100%;}
    .entry-content .column3 {width:100%;}
    .entry-content .column4 {width:100%;}
    .entry-content .column5 {width:100%;}
    .entry-content .column52 {width:100%;}
    .entry-content .column53 {width:100%;}
    .entry-content .column6 {width:100%;}
    .entry-content .column32 {width:100%;}
    .entry-content .column43 {width:100%;}

    .container,.menu-center-wrapper,.logo-menu-wrapper,.gototop-wrap { width:310px;}

    .entry-page-wrapper { padding-top:5px; margin-top:5px;}

    .portfolio-filter-wrap { width:310px;}

    h1.entry-title {
        letter-spacing:0;
        margin-top:0;
    }
    .portfolio-columns-wrap {
        width: 290px;
    }
    .portfolio-filter-wrap {
        width: 290px;
    }
    .container,.top-menu-wrap,.gototop-wrap { margin:5px auto 0;}
    .container { margin-bottom:80px; }

    .portfolio-columns-wrap {
        margin: 10px 10px 0;
    }
    .fullpage-contents-wrap {
        padding: 10px 10px 0;
    }
    .contents-wrap, .page-contents-wrap,
    .page-template-template-page_leftsidebar-php .page-contents-wrap, .page-template-template-page_leftsidebar-php .contents-wrap {
        padding: 10px 10px 0;
    }
    .two-column {
        width:94%;
    }
    .home-wrap {
        margin: 0 10px
    }

    #thumb-tray { display:none !important; }


    #copyright { padding:5px 5px 5px 10px;}
    h1.entry-title { 
        font-size: 16px;
        padding: 10px 0;
        text-indent: 10px;
    }

    #footer,.footer-container { display:none; }

    #progress-back { display:none !important; }

    ul.portfolio-four .work-details, ul.portfolio-three .work-details, ul.portfolio-two .work-details, ul.portfolio-one .work-details {
        margin-top:5px;
    }

    ul.portfolio-four li.portfolio-column-2 {
        margin-right:0;
    }

    ul.portfolio-four li { width:290px; height:292px; margin-right:10px; margin-bottom:10px;}
    ul.portfolio-four li a.portfolio-image-link { height:187px; }
    ul.portfolio-four li .displayed-image { width:290px; height:187px;}

    ul.portfolio-four .portfolio-col-2 {margin-right:0;}

    ul.portfolio-three li { width:290px; height:280px; margin-right:10px; margin-bottom:10px;}
    ul.portfolio-three li a.portfolio-image-link { height:187px; }
    ul.portfolio-three li .displayed-image { width:290px; height:187px;}


    ul.portfolio-two li { width:290px; height:280px; margin-right:10px; margin-bottom:10px;}

    ul.portfolio-two li a.portfolio-image-link { height:187px; }
    ul.portfolio-two li .displayed-image { width:290px; height:187px;}

    ul.portfolio-one li {
        margin:0 0 10px 0;
        width:290px;
    }
    ul.portfolio-one li .displayed-image {width:290px; height:auto;}    

    .ajax-portfolio-image-wrap img {
        max-width:310px;
        }

    /* Ajax Section */
    .ajax-portfolio-image-wrap {
        width:290px;
    }
    .ajax-portfolio-image-wrap img {
        max-width:100%;
    }
    ul.portfolio-filter {
        background: none;
        margin: 0 0 10px;
        padding: 0;
    }
    ul.portfolio-filter a {
        padding: 5px 8px 10px 8px;
    }
    .ajax-top-margin { margin-top:10px; }
    ul.portfolio-metainfo { padding-top:15px; padding-bottom:0; border:none;}
    ul.portfolio-metainfo li { display:inline-block;}
    ul.portfolio-metainfo li { display:inline-block;}
    .ajax-portfolio-description { display:none; }
    .ajax-portfolio-data .readmore { display:none; }
    .ajax-portfolio-data h1 { margin: 0 0 10px 0;}
    .ajax-portfolio-data { width:auto; float:none; margin-left:0; }

    ul.portfolio-list li { margin: 0 10px 10px 0;}

    ul.portfolio-list li,.displayed-image {
        width:290px;
    }
    ul.portfolio-list li .portfolio-image-link { height:187px; }
    .portfolio-displayed .ajax-image-selector {
        width:290px;
        height:187px;
    }
    p.ajax-image-desc { display:none;}
    .mainmenu-navigation { display:none;}
    .ajax-psection-right { display:none;}
    .ajax-psection-left { width:250px;}
    .ajax-portfolio-data h1 { margin-top:12px; }
    .header_search { display:none; }


}


/* #Mobile (Landscape)
================================================== */

    /* Note: Design for a width of 480px */

@media only screen and (min-width: 360px) and (max-width: 767px) {


#demopanel, .paneloptions { display:none !important; }

div.jp-audio div.jp-type-single div.jp-progress {
    width: 54.92307692307692%;
}
div.jp-audio div.jp-type-single div.jp-current-time,
div.jp-audio div.jp-type-single div.jp-duration {
    width: 54.92307692307692%;
}
div.jp-audio div.jp-type-single a.jp-mute,
div.jp-audio div.jp-type-single a.jp-unmute {
    left: 80%;
}
.contex img{
    width: 30%;
}
#creplay{ left: 31% !important;}
#ccollect{ right: -19% !important;}


.jp-title li {
    display:block;
}

div.jp-video-360p div.jp-type-single a.jp-stop {
    left: 70.76923076923077%;
}
div.jp-video-360p div.jp-type-single a.jp-play,
div.jp-video-360p div.jp-type-single a.jp-pause {
    left: 64.61538461538462%;
}
div.jp-video-360p div.jp-type-single a.jp-mute,
div.jp-video-360p div.jp-type-single a.jp-unmute {
    left: 80%;
}

.postinfo { display:none; }


    #menu-top { display:none; }
    .menu-toggle { display:none; }
    .homemenu { visibility:hidden; }

    #progress-back { display:none !important; }
    h1.entry-title { margin-top:0;}


    .accordion-tabs .pane, .panes .pane { width:320px;}

    ul#slide-list,ul#thumb-list,#tray-button,#thumb-back, #thumb-forward { display:none !important; }


    .grid-list-services ul li {
        display:none;
    }
    #slidecaption { top:-2000px }

    #thumb-tray,fullscreenslideshow-audio,.control-underlay { display:none !important; }

    .two-column { width:95.7%; }
    .sidebar-widget, .sidebar-wrap, .sidebar-wrap-single { display:none;  }


    .entry-page-wrapper { padding-top:5px; margin-top:5px;}

    .container,.menu-center-wrapper,.logo-menu-wrapper,.gototop-wrap { width:470px;}
    .top-menu-wrap { display:none; }
    .portfolio-filter-wrap {
        width: 460px;
    }

    h1.entry-title {
        letter-spacing:0;
    }

    .portfolio-columns-wrap {
        width:460px;
    }
    .container,.top-menu-wrap,.gototop-wrap { margin:5px auto 0;}
    .container { margin-bottom:80px; }

    .contents-wrap, .page-contents-wrap,.fullpage-contents-wrap,.page-template-template-page_leftsidebar-php .page-contents-wrap, .page-template-template-page_leftsidebar-php .contents-wrap { padding:10px;}

    .portfolio-columns-wrap {
        margin: 10px 10px 0;
    }
    .home-wrap {
        margin: 0 10px
    }


    .ajax-portfolio-data h1 {
        margin-top: 20px;
    }

    .homeportfolio-columns-wrap {
    width: 460px;
    }

    ul.portfolio-four .work-details, ul.portfolio-three .work-details, ul.portfolio-two .work-details, ul.portfolio-one .work-details {
        margin-top:5px;
    }

    ul.portfolio-four li {
        margin-right:20px;
    }
    ul.portfolio-four li:nth-child(2n+2) {
        margin-right:0;
    }
    ul.portfolio-four li { width:220px; height:256px; margin-right:10px;}
    ul.portfolio-four li a.portfolio-image-link { height:142px; }
    ul.portfolio-four li .displayed-image { width:220px; height:142px;}

    ul.portfolio-three li {
        margin:0 10px 10px 0;
        width:220px;
        height:250px;
    }
    ul.portfolio-three li .displayed-image { width:220px; height:136px;}
    ul.portfolio-three li a.portfolio-image-link { height:136px;}
    ul.portfolio-three li.portfolio-col-3 {
        margin-right:10px;
    }
    .thumbnails-shortcode ul.portfolio-three { width:460px;}

    ul.portfolio-two li {
        margin:0 10px 10px 0;
        width:220px;
        height:245px;
    }
    ul.portfolio-two li a.portfolio-image-link { height:136px;}
    ul.portfolio-two li .displayed-image {width:220px; height:136px;}

    ul.portfolio-one li {
        margin:0 0 20px 0;
        width:450px;
    }
    ul.portfolio-one li .displayed-image {width:450px; height:auto;}


    /* Ajax Section */
    .ajax-portfolio-image-wrap {
        width:450px;
    }
    .ajax-portfolio-image-wrap img {
        max-width:100%;
    }
    ul.portfolio-metainfo { padding-top:10px; border:none;}
    ul.portfolio-metainfo li { display:inline-block;}
    .ajax-portfolio-description { display:none; }
    .ajax-portfolio-data .readmore { display:none; }
    .ajax-portfolio-data h1 { margin: 10px 0 10px 0;}
    .ajax-portfolio-data { width:auto; float:none; margin-left:0; }

    ul.portfolio-list li,.portfolio-displayed .ajax-image-selector { width:220px; height:172px; }
    ul.portfolio-list li .portfolio-image-link { height:138px; }
    ul.portfolio-list li .displayed-image { width:220px; height:138px;}

    p.ajax-image-desc { display:none;}

    .mainmenu-navigation { display:none;}
    .ajax-psection-right { display:none;}
    .ajax-psection-left { width:400px;}
    .header_search { display:none; }

}

@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
  /* For landscape layouts only */
  #slidecaption { top:27%;}
  .super-navigation { top:28%; }
}

css 文件的链接http://lacademieproject.com/wp-content/themes/digon/css/responsive.css?ver=3.6.1

网站网址 - http://lacademieproject.com/collection/

我尝试添加一些测试媒体查询但没有奏效。谁能帮我解决这个问题。我从早上开始尝试了几个小时，但没有运气。谢谢你

4

3 回答 3

2

要制作响应式网站，您必须在 HTML 文件中添加以下代码行。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

并根据您的响应式设计将 css 添加到 responsive.css 中。

请参考链接以获得更多理解。

于 2013-10-15T09:16:43.263 回答
1

尝试 @media only screen and (min-device-width : 960px) and (max-device-width : 1040px)

代替@media only screen and (min-width: 960px) and (max-width: 1040px)

于 2013-10-14T08:53:38.227 回答
-1

在标题中使用视口

<meta name="viewport" content="width=device-width" />

并为不同的设备设计您的网站，例如：-

iPad横向特定样式

 @media only screen and (max-width : 1024px) {}

Droid 水平特定样式

@media only screen and (max-width : 854px) {}

iPad 垂直特定样式

@media only screen and (max-width : 768px) {}

iPhone 水平、Droid 垂直、Torch 水平特定样式

@media only screen and (max-width : 480px) {}

火炬垂直特定样式

 @media only screen and (max-width : 360px) {}

iPhone 垂直、Blackberry Curve 特定样式

@media only screen and (max-width : 320px) {}

iPhone 4 特定样式（视网膜显示屏）

@media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) {}
于 2014-01-25T10:07:04.750 回答