1

I am relative new, have built some static web pages but not an expert. I apologize if this has been answered else where, I am not sure what the error I am encountering would be called and have tried to search for an answer already and have not been successful. Please point me to another answer if an answer to this already exists.

For the project, I am building a static website for a school project and noticed that the html/css pages are displaying at different sizes (almost seems as if there was zoom effect). After looking at the code through the inspector I noticed that on the index.html page displays with a width of: 1236px and the other pages display with width of: 1350px in the same view port. Not sure how to to resolve this. Below is the link to the code on github. Again apologies if there is a better way to upload the code here, this is my first post on this forum.

https://github.com/teoherman/repice-site

Thanks in advance,

4

2 回答 2

2

问题是您的 index.html 中的第五行，或者更确切地说是您的其他页面上缺少它。总是有一个指示视口信息的元标记是个好主意。

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

将此行添加到其他页面的头部。请注意，您可能希望在<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">
于 2018-10-17T11:14:25.210 回答
0

当我开始时，我在大部分学校项目中都使用Bootstrap。它有助于以不同的屏幕尺寸显示页面，并且您可以使用许多示例代码。希望这可以帮助你。

于 2018-10-17T13:08:02.060 回答