我正在使用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/
我尝试添加一些测试媒体查询但没有工作。请有人帮我解决这个问题。我从早上开始尝试了几个小时，但没有运气。谢谢
答案 0 :(得分：2)
要制作自适应网站，您必须在HTML文件中添加以下代码行。
<meta name="viewport" content="width=device-width, initial-scale=1.0">
并根据您的响应式设计将css添加到responsive.css。
请参阅link以获取更多理解。
答案 1 :(得分：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)
答案 2 :(得分：-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垂直，黑莓曲线特定样式
@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) {}