css - 将非响应式 html 转换为响应式 html

Question

我有一个基于 twentythirteen 的高度定制的主题。所有自定义部分都不能很好地与布局的其他响应部分进行缩放。如果我禁用自定义，布局表现良好。我需要更改自定义部分以使它们响应，但我不知道应该更改什么以使它们以正确的方式运行。

我粘贴了两个我需要修复的无响应自定义示例:

<section class="image-menu">
    <div>
    <ul id="image-menu-container" class="btn-group">
    <li class="btn"><a href="<?php echo esc_url( home_url( '/' ) ); ?>/lorem/ipsum/"><img src="<?php echo esc_url( home_url( '/' ) ); ?>/wp-content/themes/Aenean/images/phasellus_01.jpg" alt="" width="170" height="106" border="0" /><div>Ipsum</div></a></li>
    <li class="btn"><a href="<?php echo esc_url( home_url( '/' ) ); ?>/lorem/dolor/"><img src="<?php echo esc_url( home_url( '/' ) ); ?>/wp-content/themes/Aenean/images/phasellus_02.jpg" alt="" width="170" height="106" border="0" /><div>Dolor</div></a></li>
    <li class="btn"><a href="<?php echo esc_url( home_url( '/' ) ); ?>/lorem/sit-amet/"><img src="<?php echo esc_url( home_url( '/' ) ); ?>/wp-content/themes/Aenean/images/phasellus_03.jpg" alt="" width="170" height="106" border="0" /><div>Sit Amet</div></a></li>
    <li class="btn"><a href="<?php echo esc_url( home_url( '/' ) ); ?>/lorem/consectetur/"><img src="<?php echo esc_url( home_url( '/' ) ); ?>/wp-content/themes/Aenean/images/phasellus_04.jpg" alt="" width="170" height="106" border="0" /><div>Consectetur</div></a></li>
    <li class="btn"><a href="<?php echo esc_url( home_url( '/' ) ); ?>/lorem/adipiscing/"><img src="<?php echo esc_url( home_url( '/' ) ); ?>/wp-content/themes/Aenean/images/phasellus_05.jpg" alt="" width="170" height="106" border="0" /><div>Adipiscing </div></a></li>
    </ul>
    </div>
</section>

这是另一个例子:

<section class="banner-slider">
    <div class="center-wrap">
    <div id="slides">
        <div class="slides_container" style="overflow: hidden; position: relative; display: block;">                      
            <div class="slides_control" style="position: relative; width: 300%; height: 33px; left: -960px;">       
                <div class="clearfix home-slider-post" id="slider-post-462" style="position: absolute; top: 0px; left: 960px; z-index: 0; width: 33.4%; height: auto; display: block;">
                    <h1 class="entry-title" style="color:white;"><?php the_title(); ?></h1>
                </div>
            </div><!-- END slider post -->
        </div><!-- END slides_container -->
    </div><!-- END center-wrap --> 
    </div>
<div class="shadow top"></div>
<div class="shadow bottom"></div>
<div class="tt-overlay"></div>
</section>  

有人可以至少给我一些关于如何使这些响应的指示吗？该网站位于本地主机上，因此我没有可以给您的网址。

Answer 1

你必须使用 css 媒体查询来做到这一点。请记住，IE7 和 8 不接受媒体查询并且没有响应。你可以在this issue here上看我的回答.

如果您查看二十三个主题的 style.css，您会看到媒体查询从第 2575 行开始。正是这些媒体查询使您的主题具有响应性。在您的代码中，您使用的是 in-style css，我强烈反对这样做。这会在使您的主题响应时给您带来问题。

以这条线为例

<div class="slides_container" style="overflow: hidden; position: relative; display: block;"> 

你应该这样写你的html

<div class="slides_container">

你应该像这样将你的样式移动到你的 style.css

.slides_container {
    overflow: hidden; 
    position: relative; 
    display: block;
}

假设你想让它成为响应式的，你需要 position: fixed 用于较小的屏幕，做这样的事情

.slides_container {
    overflow: hidden; 
    position: fixed; 
    display: block;
}

现在您需要 position: relative; 和 font-size: 20px; 屏幕尺寸为 650px 或更大。这就是媒体查询的用武之地。请注意，如果它们不更改值，则无需将所有元素复制到媒体查询中，只需添加正在更改的元素即可。您还可以添加通常未指定的其他值。

你的风格是这样的

 @media (min-width: 650px) {             
   .slides_container {
       font-size: 20px; 
       position: relative; 
   }
}

您可以对同一元素进行多次查询，只要您的屏幕尺寸不同即可。例如，对于大于 1200 像素的屏幕，您需要将字体大小更改为 24 像素。然后你会做这样的事情

 @media (min-width: 1200px) {             
   .slides_container {
       font-size: 24px; 
   }
}

请注意，您不必再次设置元素 position，因为它不会因大于 1200px 的屏幕而改变

我希望这能帮助您实现目标。