Javascript 使内容适合窗口的宽度
我在设计方面是个十足的笨蛋。然而，我正试图建立一个登录页的模型从。一切看起来都很好，直到我试着让它有反应。当屏幕宽度小于840像素左右时，元素的宽度与屏幕的宽度不匹配 如果有人能在这里指导我，或者指出到底是什么地方出了问题，我将不胜感激 HTMLJavascript 使内容适合窗口的宽度,javascript,html,css,responsive-design,responsive,Javascript,Html,Css,Responsive Design,Responsive,我在设计方面是个十足的笨蛋。然而，我正试图建立一个登录页的模型从。一切看起来都很好，直到我试着让它有反应。当屏幕宽度小于840像素左右时，元素的宽度与屏幕的宽度不匹配 如果有人能在这里指导我，或者指出到底是什么地方出了问题，我将不胜感激 HTML *{ 保证金：0； 填充：0； 框大小：边框框； } ：根{ --原色：rgb（243145161）； --次要颜色：rgb（60,60,146）； --标题字体：“Jomolhari”，衬线； --正文字体：“Roboto”，无衬线； --正文
*{
保证金：0；
填充：0；
框大小：边框框；
}
：根{
--原色：rgb（243145161）；
--次要颜色：rgb（60,60,146）；
--标题字体：“Jomolhari”，衬线；
--正文字体：“Roboto”，无衬线；
--正文颜色：rgb（151、151、151）；
}
html{
字体大小：10px；
字体系列：var（--正文字体）；
颜色：var（--正文文本颜色）；
滚动行为：平滑；
}
.集装箱{
宽度：100%；
最大宽度：165.5雷姆；
保证金：0自动；
填充：0.2.4rem；
}
a{
文字装饰：无；
颜色：var（--正文文本颜色）；
}
p{
字体大小：1.4rem；
}
部分{
填充：3.9雷姆0；
}
img{
宽度：100%；
身高：100%；
}
/*标题*/
标题{
宽度：100%；
位置：绝对位置；
排名：0；
左：0；
z指数：1；
}
.标志{
字体大小：2.5rem；
字号：600；
颜色：var（--原色）；
字体系列：var（--标题字体）；
}
.导航{
高度：7.2rem；
填充：0.6rem；
显示器：flex；
证明内容：之间的空间；
对齐项目：柔性端；
}
.导航列表{
列表样式：无；
显示器：flex；
}
.清单项目{
保证金：0.1.5雷姆；
位置：相对位置；
}
.导航链路{
文字装饰：无；
文本转换：大写；
字体大小：1.5rem；
颜色：var（--正文文本颜色）；
过渡：颜色。1s；
}
.nav链接：：之后{
内容：''；
高度：2倍；
宽度：0；
位置：绝对位置；
左：0；
底部：0；
背景色：var（--二次色）；
过渡：宽度为0.5s；
}
.导航链接：悬停，
.nav链接：悬停：：之后{
宽度：100%；
颜色：var（--第二颜色）；
}
/*收割台端部*/
/*英雄组*/
#英雄{
宽度：100%；
高度：100vh；
显示器：flex；
对齐项目：居中；
填充：0.6rem；
背景：线性渐变（至底部，rgb（247202210），透明）；
背景尺寸：封面；
}
.全球标题{
颜色：var（--第二颜色）；
字体系列：var（--标题字体）；
字体大小：5.5rem；
}
#英雄p{
字号：2rem；
保证金：3rem自动；
}
.btn{
显示：内联块；
文本转换：大写；
字母间距：2px；
颜色：白色；
背景色：var（--原色）；
字号：1.2rem；
填充：1.5雷姆5雷姆；
边界半径：30px；
}
.btn:悬停，
.btn:焦点{
盒影：0 25px var（--原色）；
}
-
-
-
-
-
鲜花，
完美的礼物
给你爱的人送花
/* Mobile first */
.container {
}
/* 840px and above */
@media all and (min-width: 840px) {
.container {
}
}
@media