时间戳

首页 > 解决方案 > 如何使用 CSS 调整图像和文本的响应式设计？

javascript - 如何使用 CSS 调整图像和文本的响应式设计？

问题描述

我有一组可编辑和可拖动的 div，这些 div 允许您构建网页设计，也就是说，这些 div 使用这些页面设计定位和创建，然后显示给用户。问题在于获得对使用这些 div 创建的设计的响应能力。此页面在平板电脑和移动设备上的视图完全没有响应性。在这里，我展示了到目前为止的代码：

$(document).ready(function() {

  $(".caja1").draggable();
  $(".caja1").resizable();

});
div.container {
  position: relative;
  border: 1px solid black;
  padding-left: 10px;
}

div.caja1 {
  width: 100px;
  height: 100px;
  position: relative;
}

div.caja1 {
  background: rgb(83, 53, 117)
}

@media (max-width: 768px) and (min-width: 320px) 
           {
 div.caja1
  {                                     max-width: 255px !important;
width: 255px !important;
left: 0px !important;                      
margin-right: 0px !important;
     }
 }
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>

<div class="container">
  <div class="row">

    <div class="caja1" contenteditable="true">
      <div class="editable-div">
        <p style="color: black;font-size: 34; font-weight: bold; font-style: initial; color: black; width: auto;" contenteditable="true">
          this is text

        </p>
      </div>
    </div>

    <div class="caja1" contenteditable="true">
      <div class="editable-div">
        <p style="color: black;font-size: 34; font-weight: bold; font-style: initial; color: black; width: auto;" contenteditable="true">
          this is text

        </p>
      </div>
    </div>

  </div>


</div>

注意：创建的 div 可以移动和放置在其容器中的任何位置，这要归功于 Jquery-UI 的 draggable() 函数，它的宽度和高度可以通过 Jquery UI 的 resizable() 函数及其内容进行修改是可编辑的。我可以创建几个 div 并将它们放置在我想要的位置，然后将该 html 保存在数据库中，并将其显示在我的主网页上（使用引导程序创建）。问题是，当我看到在手机或平板电脑上创建的内容时，一切看起来都很糟糕，而且没有任何响应。此外，每个 div 都有其顶部和左侧的值，因为 div 的位置可以通过 draggable () 更改，并且它们的宽度和高度值也不是固定的，因为使用 jquery resizable 可以调整它们.

那么如何在这些类型的情况下实现响应？div 所在的容器具有相对位置，每个 div 具有相同的相对位置。这是一个示例图像，您可以在其中看到我创建的内容的桌面版本和移动版本：

桌面版 在此处输入图像描述

手机版 在此处输入图像描述

在我放在上面的代码中，我有一个用于半查询的小 CSS 代码。

图片说明：在第一张图片（桌面版）中，每个文本和每个图片都在一个div内，所以那里有几个div。正好 7 个 div，标题的 div，3 个图像的 3 个 div 和每个图像下方 3 个文本的 3 个 div。

那么，您在移动版图像中看到了问题吗？

我该如何解决这个问题？

标签： javascriptjqueryhtmlcssresponsive-design

解决方案

试试这个代码

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>

  <style>
  div.container {
  position: relative;
  border: 1px solid black;
  /*padding-left: 10px;*/
}
div.container .row{
  display: flex;
  flex-wrap: wrap;  
}

div.caja1 {
  width: calc( 32% - 15px);
  margin: 1%;
  height: 100px;
  position: relative;
}

div.caja1 {
  background: rgb(83, 53, 117)
}

@media (max-width: 768px) and (min-width: 320px) 
           {
            div.container .row{
              justify-content: center;
            }
 div.caja1
  {                                     max-width: 255px !important;
width: 255px !important;
left: 0px !important;                      
margin-right: 0px !important;
     }
 }
  </style>
  <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.js"></script>
  <script type="">
    $(document).ready(function() {

  $(".caja1").draggable();
  $(".caja1").resizable();

});
  </script>  

</head>

<body>


<div class="container">
  <div class="row">

    <div class="caja1" contenteditable="true">
      <div class="editable-div">
        <p style="color: black;font-size: 34; font-weight: bold; font-style: initial; color: black; width: auto;" contenteditable="true">
          this is text

        </p>
      </div>
    </div>

    <div class="caja1" contenteditable="true">
      <div class="editable-div">
        <p style="color: black;font-size: 34; font-weight: bold; font-style: initial; color: black; width: auto;" contenteditable="true">
          this is text

        </p>
      </div>
    </div>

    <div class="caja1" contenteditable="true">
      <div class="editable-div">
        <p style="color: black;font-size: 34; font-weight: bold; font-style: initial; color: black; width: auto;" contenteditable="true">
          this is text

        </p>
      </div>
    </div>

    <div class="caja1" contenteditable="true">
      <div class="editable-div">
        <p style="color: black;font-size: 34; font-weight: bold; font-style: initial; color: black; width: auto;" contenteditable="true">
          this is text

        </p>
      </div>
    </div>

    <div class="caja1" contenteditable="true">
      <div class="editable-div">
        <p style="color: black;font-size: 34; font-weight: bold; font-style: initial; color: black; width: auto;" contenteditable="true">
          this is text

        </p>
      </div>
    </div>

    <div class="caja1" contenteditable="true">
      <div class="editable-div">
        <p style="color: black;font-size: 34; font-weight: bold; font-style: initial; color: black; width: auto;" contenteditable="true">
          this is text

        </p>
      </div>
    </div>

    <div class="caja1" contenteditable="true">
      <div class="editable-div">
        <p style="color: black;font-size: 34; font-weight: bold; font-style: initial; color: black; width: auto;" contenteditable="true">
          this is text

        </p>
      </div>
    </div>

  </div>


</div>
</body>
</html>

推荐阅读