Question

我有一个基于二十三个的大量定制主题。所有定制部件都不能与布局的其他响应部分很好地扩展。如果我禁用自定义，则布局表现良好。我需要更改自定义部件以使其响应，但我不知道应该改变什么以使它们以正确的方式运行。

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

<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>

有人可以至少给我一些关于如何做出响应的指示吗？该网站在localhost上，所以我没有可以给你的网址。

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;
}

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

你看起来像这样的风格

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

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

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

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

我希望这有助于实现目标。

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

1 个答案: