Question

我正在寻找有关我建立的新网站的帮助。我在过去6个月里一直在构建Joomla网站，但这是我第一个根据我添加的媒体查询做出响应的网站。

我建立的网站可以在以下网站找到：

[http://s116169771.websitehome.co.uk/blingphones_j3/]

我已针对以下尺寸构建了媒体查询： 768px， 600px的， 568px， 480像素， 400像素， 320像素

我注意到的是，我仍然遇到一些尺寸问题，例如当我在Samsung S6上查看该网站时，此屏幕的最大尺寸为640px，因此这导致我出现问题＆＃39;框＆＃39;使用的图像是png。

我已将此更改为svg文件，以便根据我所使用的屏幕大小调整大小。以下是我的CSS：

@media (max-width: 767px) and (min-width: 601px) {

#mainbox {
  float: left;
  position: relative;
  background: url(../images/box.svg) no-repeat;
  background-size:contain;
  margin-bottom: 40px;
}

我还确保方框内的文字宽度为100％，因此可以使用方框调整大小。

我现在遇到的问题不是添加更多的断点，而是需要确保页面上的标题“我们修复破损，损坏的移动电话”和＃39;像框中的框和文本一样调整大小。

不幸的是，当我将屏幕尺寸从767px调整到601px时，我发现手机图像下方出现了间隙，我不确定如何解决这个问题，说实话。

我查看了Firefox开发人员工具，但却无法解决这个问题。我也有字体大小为em，并认为这将与svg一样工作，但事实并非如此。

我当前的网站是使用最新版本的Joomla 3.8.4构建的。

非常感谢有关我出错的地方以及我需要考虑的建议，以确保在不添加任何断点的情况下正确显示调整页面大小。

Sheraz，只是为了确认模板已经将bootstrap框架作为其构建的一部分。以下是我的index.php文件中的代码。

JHtml::_('bootstrap.framework');

Answer 1

我已经阅读了您的问题，我认为使网站响应的简单和最佳方式是通过引导程序。在引导程序中，您可以使用预定义的类来使事物响应例如：要使图像响应，请使用img-responsive类，以便根据屏幕调整自身大小。

<img src="source" class="img-responsive" width=100% height=500px/>

除了这个引导程序包含网格系统，您可以轻松地对齐它们。

我希望这会对您有所帮助

Answer 2

我注意到.boxestext1 div中的文本媒体查询样式的一件事是，在狭窄的视口中，文本对于实际空间而言太宽，并且它溢出了框。

一个建议是，如果你替换你当前的CSS

@media (max-width: 480px){
 div.boxestext1 {
    ...
    margin: 0 32px 0 32px;
    width: 373px;
    ...
 }
}

使用类似下面的内容，它会在较小的视口中更好地缩放。

@media (max-width: 480px){
    div.boxestext1 {
        ...
        margin: 0;
        width: 100%;
        ...
    }
}

如果您想在移动设备上获得良好的效果，您可以永远不要过于小心硬编码宽度和其他单位。

祝你好运！

如何在缩小屏幕尺寸时使用自适应字体

2 个答案: