当屏幕变得更小时，元素会被压扁

问题描述：

我正在使我的网页响应，但努力保持网页上的元素不会彼此超越。我对web开发很陌生，所以我甚至不知道如何解决这个问题。我真的很感谢在这个阶段的一些一般性建议，以帮助我解决问题并向前迈进。当屏幕变得更小时，元素会被压扁

答

一些建议，让你开始。

通过在文档的头部视meta标签开始，这将停止智能手机和平板电脑从缩放你的页面以适应视口（屏幕）

<head> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<head>

使用CSS来定义元素的大小，因为那时你可以在不同的视口重新设置元素。还要尽量避免包括任何元素的硬像素尺寸，因为它们可能会导致小屏幕上的问题，选择宽度超过960像素100％

有时您需要在小屏幕上更改布局。例如，两张并排图像，每张宽度为50％，可能无法在智能手机上使用。发生这种情况时，使用media queries更改布局

CSS

img{ 
width:50%; 
height:auto; 
} 

@media screen and (max-width:400px) { 
img{ 
    width:100%; 
} 
}

希望这有助于让你去！

更新

看看这是更接近你是什么后（注意：占位符图像可能加载缓慢）：

实时取景 - http://s.codepen.io/panchroma/debug/ZOqgzx
编辑视图 - http://codepen.io/panchroma/pen/ZOqgzx

重要的位是：

在你的HTML中，我已经删除了你的图像的内联样式，并将它从第65行开始移动到CSS
从CSS的第134行开始我已经为窄视口构建了@media样式。请注意，我已将您的2列布局折叠为单列布局。这个细节是完全可选的，但给你更多的工作空间
在你的HTML的第4行你有<link href="index_responsive.css" rel="stylesheet" media="screen and (max-width: 800px)" />。技术上这里是没有错，但它更普遍使用的一个的style.css文件，包括在一个文件中的一切，和@media screen ...声明和造型在style.css的文件

大卫你好，我真的很感激你的回应。谢谢。我已经完全按照您在回复中所写的内容实施了html和css代码，但不幸的是我的网页上的情况保持稳定。我是否必须自定义视口元标记中的任何内容才能使其工作？就媒体查询而言，我是否必须在HTML代码的任何地方提及媒体查询？先谢谢你，我真的很感谢你的帮助。 –

Hi @MaxVisna，视口元标记应该按照原样工作，并且不需要在html代码中提及媒体查询，它只需要存在于CSS文件中。与CSS相关的布局仍然不能按照狭隘的视口预期工作的最可能的原因是CSS。也许其他一些CSS样式优先。使用Chrome网络检查器是解决此问题的最简单方法。另外，你可以发布一个链接到你的页面，或者在http://codepen.io上开启一个表明你的问题的笔吗？ –

嗨大卫。这里是我的页面代码所在的git集线器的链接。包括HTML和CSS。 https://gist.github.com/anonymous/f20c03aea884056919cf522914ac3ba3 –

当屏幕变得更小时，元素会被压扁

相关推荐