根据显示尺寸编辑网站响应

Question

我在做一个有网站的学校项目。这个网站是其他毕业生做的，我几乎没有HTML和CSS的知识。我希望网站更加移动友好，这意味着每个帧和对象会根据你的显示大小调整大小。现在有文字外显示，iframes太大，等。我试图解决这个问题的几个小时，在网上搜索没有任何主要的结果。

我发现从overflow-x: auto到overflow-x: hidden(在CSS文件中)可以帮助消除溢出/出血。

如果你有任何建议，我可以如何改进这个页面，我将非常感激。请随意使用浏览器工具(CTRL+SHIFT+I)检查代码。

• 如何根据显示的宽度和高度调整iframe，文本，图像等的大小?
• 为什么页脚文本在屏幕之外，我该如何修复它?

Answer 1

https://www.w3schools.com/css/css3_mediaqueries_ex.asp

阅读这篇文章，你也可以使用bootstrap grid来使事情变得更容易

Answer 2

要跳过页面中可能出现的大部分重叠，请尝试使用下面的配置:

html, body {
// reset the browser config
margin: 0;
padding: 0;
}
* {
box-sizing: border-box; // padding and border will not be added to width and height calc
}
img {
max-width: 100%; // protect from images be more large than the container
}
// https://www.w3schools.com/cssref/css3_pr_box-sizing.asp

box-sizing: border-box;在大多数情况下会帮助你，但在某些情况下，在你检查元素的重叠宽度，将可以使用calc()来修复它，如:

element {
width: calc(100% - 30px);
}

在https://aqpi.se/karta.html的情况下，问题是你在iframe元素上设置了固定的宽度。

• 与没有重叠

使用媒体查询创建响应式网站:https://www.w3schools.com/cssref/css3_pr_mediaquery.asp.