请教html布局问题。

Question

大的盒子设置了width：100%；里边的元素有的是margin-left，margin-right，但是一旦缩小浏览器，大盒子里的元素有的会掉下来，请问该怎么解决呢？

Answer 1

你的问题应该是和响应式布局有关。

外面的盒子的宽度为100%，那么里面内容的间距，如你提到的margin，以及padding，或是图标的width，都应当以百分比的形式来表达。比如margin-left: 5%;

但由于字的宽度是固定不变的。实际上，在这个处理过程中，你需要找到阈值宽度，比如768px，一旦浏览器宽度小于这个宽度时，你的布局及样式应当采用不同的方案。

Answer 2

可以用@media媒体查询来写，@media 可以针对不同的屏幕尺寸设置不同的样式