Question

我是一名高中生，从事工程高级项目的应用程序开发，但是在使用HTML / CSS时遇到了一些麻烦。我使用Adobe XD为该应用程序创建了一个初始原型，看起来有点像这样： https://i.stack.imgur.com/K4V3G.png

原型中的header和footer元素的初始尺寸为70px高，但是，当我将其放入CSS并运行移动模拟器时，结果看起来更像这样： https://i.stack.imgur.com/1YcFe.png

我也尝试转换为em / rem，但这没有帮助。我知道手机屏幕的像素密度要比笔记本电脑/台式机的像素密度高，但我不知道要高多少。有没有人建议将页眉和页脚元素设置为屏幕上适当的高度？

编辑：包括有问题的HTML / CSS供参考

CSS：

body{
font-family: 'Roboto', sans-serif;
height:100vh;
width:100vw;
padding:0;
  }
wrapper{
  margin: 0 auto;
  padding: 0;
  clear:both;
}

#head{
  width:100%;
  height:4.313rem;
  font-size:40pt;
  background-color:#fafafa;
  text-align:center;
  color:#707070;
  }

#divider{
  width:100%;
  height:0.063rem;
  background-color:#e0e0e0;
}

#midcontainer{
    width:100%;
    height:calc(100% - 8.75rem);
    background-color:#fafafa;
    overflow:hidden;
    margin:0;
    padding:0;
    }

#midscroll{
     width:calc(100% + 20px);
     height:calc(100% - 8.75rem);
     overflow:auto;
     margin:0;
     padding:0;
  }

#midbody{
  width:100%;
  min-height:calc(100% - 8.75rem);
  font-size:12pt;
  text-align:justify;
}

#foot{
  width:100%;
  height:4.375rem;
  background-color:#e0e0e0;
}

HTML：

<template name="Home">
  <div align="center" style="height:100vh;width:100vw;position:absolute;top:0;left:0;border:1px solid transparent;">
    <div id="head">
      <p style="position:relative;top:50%;transform:translateY(-50%);">Upcoming Tasks</p>
    </div> <!--end head-->
    <div id="divider">
    </div> <!--end divider-->

    <div id="midcontainer">
      <div id="midscroll">
        <div id="midbody">
          <p style="padding-left:0.313rem;padding-right:0.313rem;">
            *Body elements here*
          </p>
        </div> <!--end midbody-->
      </div> <!--end midscroll-->
    </div> <!--end midcontiner END OF MIDDLE CONTENT-->

    <div id="foot">
      <img id="Home" style="height:4.375rem;width:4.375rem;padding-right:1.125rem;" src="https://imgur.com/C5zD29C.png">
      <img id="Create" style="height:4.375rem;width:4.375rem;padding-right:1.188rem;" src="https://imgur.com/5UhZ0e9.png">
      <img id ="Calendar" style="height:4.375rem;width:4.375rem;padding-right:1.125rem;" src="https://imgur.com/nUTj5zs.png">
      <img id="Achievements" style="height:4.375rem;width:4.375rem;" src="https://imgur.com/4WrWF7T.png">
    </div> <!--end foot-->
  </div>

</template>

Answer 1

尝试将其添加到HTML的<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

我应使用什么尺寸来创建移动应用标题？（HTML / CSS）

1 个答案:

我应使用什么尺寸来创建移动应用标题？ （HTML / CSS）

1 个答案:

我应使用什么尺寸来创建移动应用标题？（HTML / CSS）