Question

我有一个问题，当在Internet Explorer / Edge上进行缩放和打开时，wordpress主题无法响应，并且在许多设备（如下面的屏幕截图）上测试后得到的结果最差：

无法与IE / Edge兼容：

缩放时无法响应：

的index.php

<?php
/**
 * The main template file.
 *
 * This is the most generic template file in a WordPress theme
 * and one of the two required files for a theme (the other being style.css).
 * It is used to display a page when nothing more specific matches a query.
 * E.g., it puts together the home page when no home.php file exists.
 *
 * @link https://codex.wordpress.org/Template_Hierarchy
 *
 * @package test
 */

get_header(); ?>

    <div id="primary" class="content-area">
        <main id="main" class="site-main" role="main">

        <?php if ( have_posts() ) : ?>

            <?php if ( is_home() && ! is_front_page() ) : ?>
                <header>
                    <h1 class="page-title screen-reader-text"><?php single_post_title(); ?></h1>
                </header>
            <?php endif; ?>

            <?php /* Start the Loop */ ?>
            <?php while ( have_posts() ) : the_post(); ?>

                <?php

                    /*
                     * Include the Post-Format-specific template for the content.
                     * If you want to override this in a child theme, then include a file
                     * called content-___.php (where ___ is the Post Format name) and that will be used instead.
                     */
                    get_template_part( 'template-parts/content', get_post_format() );
                ?>

            <?php endwhile; ?>

            <?php the_posts_navigation(); ?>

        <?php else : ?>

            <?php get_template_part( 'template-parts/content', 'none' ); ?>

        <?php endif; ?>

        </main><!-- #main -->
    </div><!-- #primary -->

<?php get_sidebar(); ?>
<?php get_footer(); ?>

Header.php

<?php
/**
 * The header for our theme.
 *
 * This is the template that displays all of the <head> section and everything up until <div id="content">
 *
 * @link https://developer.wordpress.org/themes/basics/template-files/#template-partials
 *
 * @package test
 */
global $woocommerce;
?><!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta http-equiv="X-UA-Compatible" content="IE=10" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="profile" href="http://gmpg.org/xfn/11">
    <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
    <?php wp_head(); ?>

</head>

<body <?php body_class(); ?>>
<div id="container">
<div id="page" class="hfeed site">
    <a class="skip-link screen-reader-text" href="#content"><?php esc_html_e( 'Skip to content', 'gg' ); ?></a>

    <header id="masthead" class="site-header" role="banner">
        <nav id="site-navigation" class="main-navigation2" role="navigation">
            <button class="menu-toggle" aria-controls="top-menu" aria-expanded="false"><?php esc_html_e( 'Top Menu', 'gg' ); ?></button>

<ul class="mini-cart">

<li> <a href="<?php echo esc_url( $woocommerce->cart->get_cart_url() ); ?>" title="<?php esc_attr_e('View your shopping cart'); ?>" class="cart-parent"> 

<div class="bubblex">
               <div class="inside">
                 <div class="inside-text">
<?php 

echo sprintf(_n('%d', '%d', $woocommerce->cart->cart_contents_count), $woocommerce->cart->cart_contents_count);

?></div>
      </div>
    </div>

<i class="cart_control">::before</i></a> 
<?php

echo '<ul class="cart_list">';

echo '<li class="cart-title"><b>Isi Keranjang:</b></li>';

if (sizeof($woocommerce->cart->cart_contents)>0) : foreach ($woocommerce->cart->cart_contents as $cart_item_key => $cart_item) :

$_product = $cart_item['data'];

if ($_product->exists() && $cart_item['quantity']>0) :

echo '<li class="cart_list_product"><a href="' . esc_url( get_permalink( intval( $cart_item['product_id'] ) ) ) . '">';

/* echo $_product->get_image(); */

echo apply_filters( 'woocommerce_cart_widget_product_title', $_product->get_title(), $_product ) . '</a>';

if($_product instanceof woocommerce_product_variation && is_array($cart_item['variation'])) :

echo woocommerce_get_formatted_variation( $cart_item['variation'] );

endif;

echo '<span class="quantity">' . $cart_item['quantity'] . ' &times; ' . woocommerce_price( $_product->get_price() ) . '</span></li>';

endif;

endforeach;

else: echo '<li class="empty">' . __( 'Keranjang kosong') . '</li>'; endif;

if ( sizeof( $woocommerce->cart->cart_contents ) > 0 ) :

echo '<li class="total">';

echo  '<span class="amount2">Subtotal</span>' . $woocommerce->cart->get_cart_total() . '</li>';

echo '<p class="buttons"><a href="' . esc_url( $woocommerce->cart->get_cart_url() ) . '" class="button wc-forward">Detail</a> <a href="' . esc_url( $woocommerce->cart->get_checkout_url() ) . '" class="button2 wc-forward">Checkout</a></p>';

endif;

echo '</ul>';

?>

</li> </ul>

            <?php wp_nav_menu( array( 'theme_location' => 'top', 'menu_id' => 'top-menu' ) ); ?>
        </nav><!-- #site-navigation -->
        <div class="site-branding">
            <?php if ( is_front_page() && is_home() ) : ?>
                <h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
            <?php else : ?>
                <p class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></p>
            <?php endif; ?>
            <p class="site-description"><?php bloginfo( 'description' ); ?></p>
        </div><!-- .site-branding -->

        <nav id="site-navigation" class="main-navigation" role="navigation">
            <button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false"><?php esc_html_e( 'Primary Menu', 'gg' ); ?></button>
            <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_id' => 'primary-menu' ) ); ?>
        </nav><!-- #site-navigation -->
        </div><!-- #site-wrapper -->
    </header><!-- #masthead -->

    <div id="content" class="site-content">

的style.css

body {
    /* margin: 0 170px 0 20px; */
    max-width: 100%;
    background: #fff;
    margin-left: auto;
    margin-right: auto;
}

body {
    background-image: url('img/background.png');
    background-size: 960px 1600px;
    background-repeat: no-repeat;
    background-position: top center;
    background-attachment: scroll;
}

@media only screen and (max-width: 1200px)
#content {
    background-color: #FFFFFF;
}

site-content {
    margin: 107px 23.5%;
}

.main-navigation2 {
    float: none;
    height: 59px;
    margin: -18px 196px;
    font-size: 12px;
    /* font-style: normal; */
}

有关详细信息，请查看on development link。

那么我该如何解决呢？

Answer 1

应用一些没有媒体查询的全局样式，然后根据媒体查询的分辨率需求向后工作。

我在1200宽视频中对你的css做了一些小改动，它完美地修复了菜单问题。缩放时，默认为相关媒体查询。

.main-navigation {
width: 960px;
margin: auto;
}
.menu-primary-menu-container {
margin: 0 0 0 200px;
float: right;
}
ul#primary-menu {
margin: 0px;
}
.main-navigation li {
float: left;
}
.main-navigation a {
padding: 4px 29px 0 16px;
display: block;
text-decoration: none;
/* line-height: 50px; */
color: #000;
font-family: sans-serif;
font-weight: bold;
font-size: small;
}

Bootstrap是一种更好的方法，但我看到你已经在这个主题中投入了大量的工作。这可能不是一个完整的解决方案，但理论上如果你像我下面做的那样进行一些小的调整，你可以根据需要调整它们，以便在CSS媒体查询中改变视口大小。

如何在缩放和兼容Internet Explorer / Edge时制作响应式wordpress主题？

1 个答案: