网页在不同的屏幕上显示不同

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/( 这样的样式框架重做它，这将使你使你的网站响应式，并且它不会在不同的浏览器上中断。

Answer 2

问题是设计没有响应(不会自然地适应不同的屏幕尺寸和格式(。 响应式设计是一个巨大的话题，无法真正涵盖在一次对话框的内容中，所以我添加了一些链接供您查看。

响应式网页设计基础知识：https://developers.google.com/web/fundamentals/design-and-ui/responsive/

媒体查询：https://www.w3schools.com/css/css_rwd_mediaqueries.asp