个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-11-30 14:12:37 25 4
gpt4 key购买 nike

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

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

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

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

桌面版 enter image description here

移动版 enter image description here

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

图片说明:在第一张图片(桌面版)中，每个文本和每个图片都在一个 div 中，因此，那里有几个 div。恰好 7 个 div，标题的 div，3 个图像的 3 个 div 和每个图像下方的 3 个文本的 3 个 div。

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

我该如何解决这个问题？

最佳答案

试试这段代码

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

关于javascript - 如何使用 CSS 调整图像和文本的响应式设计？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54140356/

25 4 0
文章推荐： c# - 如何将字符串放入数组中，在 C# 中用新行分隔？
文章推荐： c# - 在没有实例化的情况下访问类中的属性
文章推荐： c# - 使用 .Net HttpClient 访问 cloudant 数据库
文章推荐： c# - BindingList INotifyPropertyChanged 意外行为
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com