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个解决方案：

按百分比制作容器/ div，即使在这样做之后仍然可能会遇到一些问题。
我推荐的内容是废弃现有的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

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

2 个答案: