Question

大家好，我已经完成了简单的数学函数绘图仪的最后操作，然后当我使用开发人员工具查看其在手机上的外观时，我意识到标题文本的居中性不如普通版本（pc屏幕），所以我尝试添加一些媒体查询，但仍然无法使用。（它总是在移动版本的左侧），顺便说一下，在元数据中将初始比例设置为1.0。所以这是代码，希望您能帮助我

HTML

<div id="header-container">
  <p id="header">راسم منحنيات الدوال</P>
</div>

CSS

#header-container {
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: -35px;
    width: 100%;
}

#header {
    font-family: Font3;
    font-size: 45px;
  }

此外，如果您想查看整个应用程序源代码，请访问此Codepen帖子over here

注意：当您切换到手机视图时，请单击两次以使其全屏显示，以确保文本不会停留在中间。谢谢

Answer 1

如果您希望标题始终始终位于图形上方，则将图形和标题置于同一div中。这样，标题的宽度与所有视口中图形的宽度相同。

var parameters = {
  target: '#myFunction',
  width: '834',
  height: '540',
  data: [{
      fn: 'x*x',
      color: '',
      derivative: {
        fn: '2*x',
        updateOnMouseMove: true
      }
    },
    {
      fn: 'x*x',
      color: 'red',
      derivative: {
        fn: '2*x',
        updateOnMouseMove: true
      }
    }
  ],
  grid: true,
  yAxis: {
    domain: [-9, 9]
  },
  xAxis: {
    domain: [-7, 7]
  }
};

function plot() {
  let f = document.querySelector("#function").value;
  let color = document.querySelector("#color").value;
  let derivative = document.querySelector("#der").value;
  let f2 = document.querySelector("#function2").value;
  let color2 = document.querySelector("#color2").value;
  let derivative2 = document.querySelector("#der2").value;
  parameters.data[0].fn = f;
  parameters.data[0].color = color;
  parameters.data[0].derivative.fn = derivative;
  parameters.data[1].fn = f2;
  parameters.data[1].color = color2;
  parameters.data[1].derivative.fn = derivative2;
  functionPlot(parameters);
};
plot();

@font-face {
  font-family: "Font";
  src: url("Almarai-Regular.ttf");
}

@font-face {
  font-family: "Font2";
  src: url("Cairo-Regular.ttf");
}

@font-face {
  font-family: "Font3";
  src: url("MarkaziText-Regular.ttf");
}

#plot {
  touch-action: none;
  float: left;
}

.layer {
  display: grid;
  grid-template-columns: auto auto;
  grid-gap: 0px;
}

#plotSettings {
  float: right;
  padding: 0px;
}

#func1 {
  margin-top: 20px;
  font-family: Font2;
  font-size: 18px;
}

.input {
  width: 110px;
  float: left;
  margin-right: 20px;
  padding: 10px;
  border: 1px rgb(15, 97, 74) solid;
  border-radius: 7px;
}

table {
  border-collapse: collapse;
}

table,
td,
th {
  border: 1px solid black;
  padding: 8px 15px;
}

.tableheads {
  text-align: center;
  font-family: Font;
  height: 30px;
}

th {
  font-family: Font;
  font-size: 20px;
  height: 50px;
}

#header-container {
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: -35px;
  width: 100%;
}

#header {
  font-family: Font3;
  font-size: 45px;
  text-align: center;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>Document</title>
  <link href="style.css" rel="stylesheet" />
</head>

<body>
  <script src="https://unpkg.com/d3@3/d3.min.js"></script>
  <script src="https://unpkg.com/function-plot@1/dist/function-plot.js"></script>

  <div class="container">
    <div class="layer">
      <section id="plot">
        <div id="header-container">
          <p id="header">راسم منحنيات الدوال</p>
        </div>
        <div id="myFunction"></div>
      </section>
      <div dir="rtl" id="plot-settings">
        <table>
          <tr>
            <th>اعدادات المنحنيات</th>
          </tr>
          <tr>
            <td class="tableheads">المنحنى الأول</td>
          </tr>
          <tr>
            <td>
              <section id="func1">
                <label for="function"> دستور الدالة 1 : </label>
                <input id="function" type="text" value="x*x" onchange="plot();" dir="ltr" class="input" />
                <p></p>
                <label for="derivative"> مشتقة الدالة 1 : </label>
                <input type="text" id="der" value="2*x" onchange="plot();" dir="ltr" class="input" />
                <p></p>
                <p></p>
                <label for="color">لون المنحني : </label>
                <input type="color" id="color" onchange="plot();" dir="ltr" />
                <p></p>
              </section>
            </td>
          </tr>
          <tr>
            <td class="tableheads">المنحنى الثاني</td>
          </tr>
          <tr>
            <td>
              <section id="func1">
                <label for="function"> دستور الدالة 2 : </label>
                <input id="function2" type="text" value="x^3" onchange="plot();" dir="ltr" class="input" />
                <p></p>
                <label for="derivative"> مشتقة الدالة 2 : </label>
                <input type="text" id="der2" value="3*x^2" onchange="plot();" dir="ltr" class="input" />
                <p></p>
                <label for="color">لون المنحني : </label>
                <input type="color" id="color2" onchange="plot();" dir="ltr" value="Red" />
                <p></p>
              </section>
            </td>
          </tr>
        </table>
      </div>
    </div>

  </div>
  <script src="script.js"></script>
</body>

</html>

Answer 2

尝试将其添加到CSS

<?php
include("connect.php");
session_start();
$email = $_POST["EMAIL"];
$query = "INSERT INTO `newsletter` ( `EMAIL`)
 VALUES ( '$email')";
mysqli_query($link,$query);
echo mysqli_error($link);
$current = $_SESSION["current_page"] ;
header("location:../$current");
?>

Answer 3

#header-container {
    margin-left: auto;
    margin-right: auto;
    margin-top: -35px;
    width: fit-content;
}

屏幕宽度更改时，无法将div元素居中

3 个答案: