我如何改进我的网页代码，使之适合更小的尺寸？
我如何改进我的网页代码，使之适合更小的尺寸？
提问于 2016-07-16 17:56:30
我很难弄清楚如何使我的网页上的代码可伸缩。它在大屏幕上看起来很好，但是如果你缩小浏览器或者在手机上查看它，一切都会变得古怪。我尝试使用position: relative;使外部div元素与其内容保持相同的大小，但是当您使窗口变小时，它们最终会被推开。我也尝试过img-responsive类来获取我的图像，但是它似乎没有帮助。
我对javascript、html和css相当陌生，我非常感谢关于如何改进样式的任何技巧。
这是码页上的代码。
回答 1
Stack Overflow用户
发布于 2016-07-16 18:08:36
您可以使用媒体查询来调整网页的css。
您可以使用最大宽度480 of查询，在这种情况下，样式将应用于所有大小为480 of或更小的设备。可以根据要瞄准的屏幕大小调整此查询。
就像这样
@media only screen and (max-width: 480px) {
.hide-something-on-mobile {
display:none;
}
}此外，您还可以使用最小宽度:481 be，并让元素在大屏幕上显示:块。这就是所谓的移动，首先是因为你把你的css瞄准了移动设备，然后改变了更大的设备。
@media only screen and (min-width: 481px) {
.show-something-on-large-screen {
display:block;
}
}您可以通过这些查询来调整任何css，而不仅仅是隐藏和显示内容。将您想要应用的任何样式放入媒体查询中，它们都将应用于相应的屏幕大小。
这里有一篇很棒的文章，展示了如何有效地使用媒体查询来调整网页媒体查询的外观
欢呼声与快乐编码
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/38414003
复制相关文章
相似问题
腾讯云开发者
