html - 网页在不同屏幕上显示不同

Question

我正在尝试让我的网站以其设计的方式显示。我有一台 iMac，但当我在 MacBook Pro 和我的手机上查看它时，我其中一个页面上的 div 失去了它们的比例，并且看起来不正常。这是我页面的链接:http://www.wintonbrownmusic.online/Music%20Site%20Beat%20Making.html

这是我页面的 CSS:

header, section, footer, aside, nav, main, article, figure {
display: block; 
}

ul {
list-style-type: none;
margin: 0;
padding: 0;
text-align: center;
}

a {
display: inline-block;
width: 90px;
text-align: center;
text-decoration: none; 
font-family: Gagalin;
color: #404040;
font-size: 20px;
}

li {
width: 100px;
margin: auto;
display: inline;
}

p {
font-family: Arial;
padding-left: 10px;

}

a:hover, a:active {
padding-bottom:8px;
background: transparent;
border-bottom: 3px solid #FA8440; 
}

a:active {
color: #FA8440;
}

.newspaper {
-webkit-columns: 100px 3; /* Chrome, Safari, Opera */
-moz-columns: 100px 3; /* Firefox */
columns: 100px 3;
font-family: Arial;
}

h2 {
font-family: Gagalin;
padding-left: 10px;
}

footer {
background-color:black;
color:white;
clear:both;
text-align:center;
padding:5px;
}

.blurb {
margin:5px 0 10px 10px;
width:425px;
height: 230px;
background:#1a1a1a;
border: 6px solid #4d4d4d;
padding: 30px;
float: right;
font-family: Arial;
color: White;
padding-right:50px;
}

.container-fluid {
margin: 0 auto;
margin-left: 0 auto;
width: 65%;
}

我可以使用一些帮助来了解我可以使用什么代码来使此页面在所有浏览器、所有页面甚至手机中显示相同。

Answer 1

这是一个分辨率问题(或跨浏览器问题)，因为我在你的 css 中看到你固定的宽度和高度。

您的问题有 2 种解决方案:

1. 按百分比制作容器/div，即使这样做之后您可能仍然会遇到一些问题。

2. 我会推荐的是废弃现有的 html 并使用像 bootstrap( http://getbootstrap.com/ ) 这样的样式框架重做它，这将使您的网站响应迅速，并且不会在不同的情况下中断浏览器。