临时站点上的响应式设计突破

Question

我正在设置暂存站点以在将更改上线之前对其进行测试，但暂存站点的响应式设计不起作用。

我停用了所有插件，但响应式设计在 stage 站点上仍然不起作用。

我创建了原始站点的新本地副本并一个一个地添加了插件，并且响应式设计有效，所以插件没有破坏它。

我相信我已经将问题缩小到子主题目录 functions.php 中的排队代码中出现的问题

function add_theme_scripts() {

    $parent_style = 'Karma'; // This is 'twentyfifteen-style' for the Twenty Fifteen theme.

    wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'Karma-child',
        get_stylesheet_directory_uri() . '/style.css',
        array( $parent_style ),
        wp_get_theme()->get('Version')
    );

    wp_enqueue_script( 'script', get_stylesheet_directory_uri() . '/js/script.js', array ( 'jquery' ), 1.1, true);

   if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
     wp_enqueue_script( 'comment-reply' );
   }
}

add_action( 'wp_enqueue_scripts', 'add_theme_scripts' );

现场直播：www.alliancechemical.com

这是舞台网站：www.alliancechemical.com/staging

我希望当屏幕分辨率变小到移动领域时，断点媒体查询将生效并进行 css 调整。

Answer 1

在您的实时网站上，您的主题 css 文件是 4.7.15 版，在您的临时网站上是 5.2.4 版，它们更改了选择器的顺序。

Css 在 #main 上进行：

#main.tt-slider-karma-custom-jquery-2 {
    margin-top: -189px;
}
@media only screen and (max-width: 1023px)
#main.tt-slider-karma-custom-jquery-2 {
    margin-top: -157px; //Disabled
}

Css 在 #main 现场直播：

#main.tt-slider-karma-custom-jquery-2 {
    margin-top: -157px; 
}
#main.tt-slider-karma-custom-jquery-2 {
    margin-top: -189px; //Disabled
}

解决方案是注销移动设备 css，然后使用主题 css 作为依赖项再次将其加入队列。

临时站点上的响应式设计突破

Responsive Design Breaking on Staging Site

wordpress

responsive