在平板電腦和智能手機上使網站正常運行

Question

我正處在為我的創業公司開發網站的階段，但是我正在通過這種方式在大學進行計算機科學研究時都在練習編程。 這是網站網址：

如果在台式機上查看它，實際上看起來不錯，但是在平板電腦和智能手機上查看時，效果不好，因為在平板電腦上，文本被壓縮，而在手機上，文本卻沒有可見，您無法滾動到側面。 這是我的網站文件，位於此zip文件夾中：

請您幫我找到我所缺少的。 視口標簽甚至無法正常工作。 您看到的很多內容都已在style.css文檔中進行了配置。 我需要一些幫助。 我們的第一個重要版本將於2015年11月下旬發布。

Answer 1

您的問題位於CSS的第17行：

div.mainmenu {
width: 550px;
height: 13px;
position: inherit;
 right: 500px; 
bottom: 30px;
}

由於設置了right ，因此無論窗口大小如何，它都會推送內容。 因此，如果它是一個小窗口，它將仍然將其推到500px以上。 這就是為什么它在移動設備中完全不在屏幕上，而在平板電腦中完全不在屏幕上的原因。

每當您具有固定的像素尺寸時，都會遇到此問題。 您可以使用媒體查詢作為補償目標。 例如，

@media screen and (max-width:767px){
.mainmenu{
right:0;
}
}