文章根据屏幕大小自动调整大小

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(); ?>

>

<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

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

Answer 2

您的内容不会重新调整大小，因为您已为其设置了固定宽度（295 像素）。由于您浮动它们，它们应该根据站点内容中的空间大小重新排列。

如果您确实希望文章重新调整大小，请给它们百分比宽度。然后，随着网站内容宽度的改变，它们也会改变。

如果你想保持纵横比（高度/宽度），那么你需要一个使用 % padding 保持纵横比并使用 position: absolute 将内容放入其中的包装器。例如，请参阅Maintain the aspect ratio of a div with CSS。