Html 与桌面相比，手机上的空间很小（使用pos绝对/css堆叠div）

我的目标是将两个表单堆叠在一起，以便外部边界完全对齐。我让它工作起来，并在桌面网站上看到我想要的效果，但在我的手机上查看时，我注意到“红盒子”并不完全在另一个上面，而是稍微高一点。（不超过1个或2个）

如果我把红色的盒子放低，让它在移动版上看起来比桌面版要好看

我已经消除了所有的边距，并测试了div中和div外的各种“绝对”定位，试图消除这种奇怪的额外空间，但我仍然无法找出是什么导致了移动版和桌面版之间的差异

CSS（包括动画转换）-如果你需要我编辑更多的代码，请告诉我（对不起，我在这里还是新手）

.wrappercirclenamesearchcats{
排名前10%；
位置：相对位置；
保证金：0自动；
}
.circlelogo1{
位置：相对位置；
背景#007580；
保证金：0自动；
边界半径：50%；
高度：50px；
宽度：50px；
/*具有绝对定位的子元素将相对于该div进行定位*/
}
.circlelogo2{
位置：绝对位置；
背景：白色；
边界半径：50%；
高度：32px；
宽度：32px；
/*将上边缘和左边缘放在中间*/
最高：50%；
左：50%；
保证金：-16px0-16px；
/*用减半宽度和减半高度正确偏移位置*/
}
.姓名{
位置：相对位置；
保证金：0自动；
字体大小：45px；
字体大小：300；
顶部：25px；
高度：40px；
线高：40px；
颜色：#007580；
}
.searchcontainer{
位置：相对位置；
高度：36px；
顶部：45px；
保证金：0自动；
宽度：90%；
最大宽度：400px；
框大小：边框框；
}
输入[类型=文本]{
宽度：100%；
边框：1px纯灰；
边界半径：0；
-webkit外观：无；
填充：8px40px；
/*方框的第一个大小第二个将单词向右移动*/
背景图像：url（'https://image.ibb.co/j9esac/searchicon.png');
背景位置：10px 7px；
/*第一次向右移动第二次向下移动*/
背景重复：无重复；
字号：17px；
框大小：边框框；
}
.类别{
保证金：0自动；
位置：相对位置；
字体大小：300；
字间距：26px；
顶部：66.5px；
@包括流体类型（字体大小413px、1200px、14px、16px）；
}
.a类{
文字装饰：无；
颜色：继承；
}
@媒体屏幕和屏幕（最大宽度：413px）{
.类别{
字体大小：14px；
}
}
@媒体屏幕和屏幕（最小宽度：1200px）{
.类别{
字体大小：16px；
}
}
.formcontainer{
位置：绝对位置；
排名：0；
字号：17px；
字体大小：400；
填充：10px 0 10px 0；
边框：1px纯红；
宽度：100%；
最大宽度：400px；
保证金：0自动；
框大小：边框框；
}
输入[类型=unams]{
宽度：70%；
填充：12px 50px；
利润率：22px0；
边框：1px纯灰；
边界半径：0；
-webkit外观：无；
字号：17px；
背景图像：url（'https://image.ibb.co/fZHHnc/signin.png');
背景位置：10px 8px；
/*第一个控件向右移动第二个控件向下移动*/
背景重复：无重复；
背景尺寸：25px；
/*用户名图标大小*/
框大小：边框框；
}
输入[类型=密码]{
宽度：70%；
填充：12px 50px；
/*第一个是你想要的输入框有多大，第二个是单词密码的位置*/
利润率：22px 0 15px 0；
边框：1px纯灰；
边界半径：0；
-webkit外观：无；
字号：17px；
背景图像：url（'https://image.ibb.co/jC7gfx/lock.png');
背景位置：10px 8px；
/*第一个控件向右移动第二个控件向下移动*/
背景重复：无重复；
背景尺寸：25px；
/*锁定图标大小*/
框大小：边框框；
}
.登录按钮{
背景色：#007580；
边界：无；
颜色：白色；
宽度：30%；
字号：17px；
高度：38px；
保证金：0自动；
}

美元资源




登录

解决这个问题最绝对的方法是使用媒体查询。请点击此处：

媒体查询将帮助您设计和定制您的网站，以适应您指定的所有尺寸

---

如果媒体查询不适用于您，那么另一种方法是使底部表单的位置相对，将“overflow-x:hidden；”添加到您的身体中，并设置表单左/左边框的动画。当位置设置为相对，而不是固定或绝对时，它应始终保持在第一种形式下（不应覆盖在其他元素之上，因为位置将考虑周围的所有元素）。

您可以使用媒体查询，但由于响应性，我不建议您使用绝对位置，除非使用响应性测量（vh、vw、vmin、vmax、em、rem）。我建议您在任何地方使用em和rem，因为它们基于字体大小，而vh-vw、vmin-vmax与viewport相关

这不是一个快速的工作，以设置媒体查询或与此测量对齐，所以我会让你的文件，你可以做得很好

w3c地址：

@braijon-g已发布的媒体查询链接：

如果您不想使用前面列出的任何选项，可以使用javascript或jQuery来完成此任务，使用（例如jQuery）：

无论如何，我会建议你运行CSS达到这一点，更快，更轻，更值得推荐

div.e{
位置：绝对位置；
顶部：5vh；
左：25分钟；
}
h1.a{
位置：绝对位置；
左：20V分钟；
}
p、 m{
位置：绝对位置；
顶部：35vh；
左：30V最大值；
}
p、 l.p.e{
位置：绝对位置；
最小宽度：50V最大；
顶部：25V分钟；
左：30V最大值；
}
p、 e{
顶部：20V分钟；
}

Lorem ipsum dolor sit amet
文本

function windowSize(){
//get the height of the window
    var height = $(window).height();
//get the width of the window
    var width = $(window).width();
   /* Some calculations to set the items on desired % of the screen, for example: */
   //in this case i want this item to have the full screen less 100px of margin
   desiredWidth = width - 100;
   //adding this calculation to the desired item:
   $('.desiredItem').css('width', desiredWidth);
}
//this will call and apply the windowSize function to move elements or whatever
$(document).ready(function(){
    windowSize();
});
//if you resize the window, it will call the windowSize function again to recalc the position dynamically
$(window).resize(function{
    windowSize();
});