Javascript 如何使用CSS调整图像和文本的响应设计？_Javascript_Jquery_Html_Css_Responsive Design

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

javascript jquery html css responsive-design

Javascript 如何使用CSS调整图像和文本的响应设计？,javascript,jquery,html,css,responsive-design,Javascript,Jquery,Html,Css,Responsive Design,我有一组可编辑和可拖动的div，这些div允许您构建网页的设计，也就是说，这些div是用这些div定位和创建的，然后显示给用户的页面设计。问题在于如何获得使用这些div创建的设计的响应能力。在平板电脑和手机上查看此页面完全没有响应能力。在这里，我展示了迄今为止我拥有的代码： $（文档）.ready（函数（）{ $（“.caja1”）.draggable（）； $（“.caja1”）.resizeable（）； }); div.container{ 位置：相对位置；边框：1px纯黑；左侧填充

我有一组可编辑和可拖动的div，这些div允许您构建网页的设计，也就是说，这些div是用这些div定位和创建的，然后显示给用户的页面设计。问题在于如何获得使用这些div创建的设计的响应能力。在平板电脑和手机上查看此页面完全没有响应能力。在这里，我展示了迄今为止我拥有的代码：

$（文档）.ready（函数（）{
$（“.caja1”）.draggable（）；
$（“.caja1”）.resizeable（）；
});
div.container{
位置：相对位置；
边框：1px纯黑；
左侧填充：10px；
}
卡贾1区{
宽度：100px；
高度：100px；
位置：相对位置；
}
卡贾1区{
背景：rgb（83、53、117）
}
@介质（最大宽度：768px）和（最小宽度：320px）
{
卡贾1区
{最大宽度：255px！重要；
宽度：255px！重要；
左：0px！重要；
右边距：0px！重要；
}
}


这是文本


这是文本

试试这个代码
<!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>


引导示例
分区集装箱{
位置：相对位置；
边框：1px纯黑；
/*左侧填充：10px*/
}
分区容器行{
显示器：flex；
柔性包装：包装；
}
卡贾1区{
宽度：钙（32%-15px）；
利润率：1%；
高度：100px；
位置：相对位置；
}
卡贾1区{
背景：rgb（83、53、117）
}
@介质（最大宽度：768px）和（最小宽度：320px）
{
分区容器行{
证明内容：中心；
}
卡贾1区
{最大宽度：255px！重要；
宽度：255px！重要；
左：0px！重要；
右边距：0px！重要；
}
}
$（文档）.ready（函数（）{
$（“.caja1”）.draggable（）；
$（“.caja1”）.resizeable（）；
});

这是文本


这是文本


这是文本


这是文本


这是文本


这是文本


这是文本

尝试使用bootstrap 4 grid system，这肯定会对您有所帮助[这几乎就是解决方案，但问题是，当我移动其中一个div并将其放置在另一个位置，然后在mobile中查看设计时，该div位于另一个div之上，这正是我真正想要解决的问题。