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

问题描述：

我试图让我的网站显示它的设计方式。我有一台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%; 
}

我可以使用什么代码，我可以使用，使该页面出现在同一个在所有浏览器，所有的网页的一些援助甚至电话。

*寻求帮助调试（“？为什么不是这个代码工作”）问题必须包括所期望的行为，一个具体问题或错误和在问题本身中重现它所需的最短代码。没有明确问题陈述的问题对其他读者无益。请参阅：如何创建[mcve]。*您有CSS，但不包含HTML。 – BSMP

有没有想过使用像bootstrap这样的框架来帮助处理多个设备/响应式开发？ – Cameron

这被称为“响应式网页设计”，它本身不会发生。这是一个非常大的话题，通常通过使用响应式框架（如Bootstrap）和使用'@ media'查询来实现。 – zgood

答

它是一个解决问题（或跨浏览器问题），因为我看到你的固定宽度和高度在你的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

解决了这个问题。谢谢你的帮助。 –

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

相关推荐