Question

我左边有一个菜单，我希望通过更改屏幕大小来调整网站内容。实际上就像https://myspace.com/

我现在拥有的：左侧的菜单。这是代码：

.main-navigation {
background-color: #000000;
border-left: 1px solid #cccccc;
display: block;
float: left;
font-family: "Open Sans Condensed", Helvetica, Arial, sans-serif;
font-weight: normal;
max-width: 50%;
position: absolute;
top: 85px;
width: 150px;
height: auto;
text-align: right;
text-transform: capitalize;
}

网站内容我推出了margin-left 150px将内容放在菜单后面，因为如果没有，内容就在菜单下面。：

.blog .site-content,
.archive .site-content,
.search .site-content {
margin: 0 auto;
max-width: 885px;
position: relative;
left: 0px;
margin-left: 150px;
}

和里面的文章：

.blog .site-content .hentry,
.archive .site-content .hentry,
.search .site-content .hentry {
float: left;
margin: 0;
overflow: hidden;
width: 295px;
height: 295px;
}

主索引是：

get_header(); ?>

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

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

        <?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( 'content', 'home' );
            ?>

        <?php endwhile; ?>

        <?php pictorico_paging_nav(); ?>

    <?php else : ?>

        <?php get_template_part( 'content', 'none' ); ?>

    <?php endif; ?>

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

<?php get_footer(); ?>

导航（菜单）位于标题中，因此标题为：

<?php wp_head(); ?>

＆GT;

<header id="masthead" class="site-header" role="banner">
    <div class="site-header-inner">
        <div class="site-branding">
            <h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
            <h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
        </div>
                            <nav id="site-navigation" class="main-navigation" role="navigation">
            <h1 class="menu-toggle"><span class="screen-reader-text"><?php _e( 'Menu', 'pictorico' ); ?></span></h1>
            <a class="skip-link screen-reader-text" href="#content"><?php _e( 'Skip to content', 'pictorico' ); ?></a>

            <?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
        </nav><!-- #site-navigation -->
        <div class="header-search">
            <?php get_search_form(); ?>
        </div>
    </div>
</header><!-- #masthead -->
<?php if ( is_home() && pictorico_has_featured_posts( 1 ) ) : ?>
    <?php get_template_part( 'content', 'featured' ); ?>
<?php elseif ( get_header_image() && ( is_home() || is_archive() || is_search() ) ) : ?>
    <div class="hentry has-thumbnail">
        <div class="entry-header">
            <div class="header-image" style="background-image: url(<?php header_image(); ?>)">
                <a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><span class="screen-reader-text"><?php bloginfo( 'name' ); ?></span></a>
            </div>
        </div>
    </div>
<?php endif; ?>
<div id="content" class="site-content">

Answer 1

您的内容不会重新调整大小，因为您已经为其指定了固定宽度（295像素）。由于你浮动它们，它们应该根据网站内容的空间重新安排自己。

如果您确实希望文章重新调整大小，请为它们指定百分比宽度。然后，当网站内容改变宽度时，它们也会。

如果要保持纵横比（高度/宽度），则需要使用％padding保持纵横比的包装器，并使用postion：absolute将内容放入其中。例如，请参阅Maintain the aspect ratio of a div with CSS。

Answer 2

现在实施起来有点晚了，但下次看一下像Bootstrap或Zurb Foundation这样的框架，这些框架可以让构建响应式Web应用程序变得非常快。它们消除了使用媒体查询使事情变得复杂的需要。只是一个想法

文章按屏幕大小自动调整大小

2 个答案: