网页在不同屏幕上的显示方式不同
我试图让我的网站显示它的设计方式。我有一台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%;
}
我可以使用什么代码,我可以使用,使该页面出现在同一个在所有浏览器,所有的网页的一些援助甚至电话。
它是一个解决问题(或跨浏览器问题),因为我看到你的固定宽度和高度在你的CSS。
有2个解决方案乌尔问题:
按百分比使你的容器/ div的,即使这样做,你仍然可能会面临一些问题之后。
我会建议是报废现有的HTML和使用像引导(http://getbootstrap.com/)定型框架,重做,这将让你让你的网站响应,它不会在不同的浏览器打破。
问题是设计没有响应(不自然地适应不同的屏幕尺寸和格式)。响应式设计是一个巨大的话题,无法真正涵盖在对话框的内容中,因此我添加了一些链接供您查看。
自适应网页设计基础: https://developers.google.com/web/fundamentals/design-and-ui/responsive/
媒体查询: https://www.w3schools.com/css/css_rwd_mediaqueries.asp
解决了这个问题。谢谢你的帮助。 –
*寻求帮助调试(“?为什么不是这个代码工作”)问题必须包括所期望的行为,一个具体问题或错误和在问题本身中重现它所需的最短代码。没有明确问题陈述的问题对其他读者无益。请参阅:如何创建[mcve]。*您有CSS,但不包含HTML。 – BSMP
有没有想过使用像bootstrap这样的框架来帮助处理多个设备/响应式开发? – Cameron
这被称为“响应式网页设计”,它本身不会发生。这是一个非常大的话题,通常通过使用响应式框架(如Bootstrap)和使用'@ media'查询来实现。 – zgood