响应式样式表根据屏幕大小根本不工作

我正在使用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/

我尝试添加一些测试媒体查询，但没有奏效。任何人都可以帮助我解决这个问题。我从早上开始尝试几个小时，但没有运气。谢谢

来源

2013-10-14 Suneth Kalhara

尝试进行响应的网站，你必须添加以下代码行中的HTML文件。

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

，并添加CSS来responsive.css按您的响应设计。

请参阅link了解更多。在头

来源

2013-10-15 09:16:43

感谢这个工作很好 –

很高兴听到它适用于你。 –

与 @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-14 08:53:38

加入这样对于所有，为最小宽度=分钟设备宽度和最大宽度=最大设备宽度仍然没有运气 –

-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，火炬水平特定风格

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

火炬垂直特定风格

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

iPhone垂直，黑莓曲线特定样式

@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-25 10:07:04

响应式样式表根据屏幕大小根本不工作

回答

相关问题