html - 不居中的响应式网页设计

标签 html css responsive-design

我有多年的 html/css 经验,最近才开始深入研究响应式世界。我买了一本书,读了很多教程,但有些事情困扰着我。我什至还没有找到一个不使用 margin: 0 auto 作为网站基本容器(使网站居中)的示例。例如,他们都使用:

width: 90%;
margin: 2% auto;

我想做的是制作一个不以主容器为中心的网站,而是将其向左对齐。然后,出于某种原因,当我使用 96%(甚至 100%)的宽度和百分之几的边距时,它不会像通常那样延伸到右端,所以总是有更大的边距视口(viewport)的右侧。

我是否在监督一些非常合乎逻辑的事情?

干杯!

最佳答案

我也不确定这是否是您问题的答案,但也许您可以发布一个测试用例?

如果问题是移动设备(例如 iPhone),请尝试添加此代码段:

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

此外,我建议您使用 100% 的宽度,然后添加 2% 到 6% 的填充(取决于您关注的宽度)。

这里有一个非常有用的响应式设计链接(和一个不错的演示):http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries

关于html - 不居中的响应式网页设计,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9478950/

相关文章:

javascript - 按钮填充可用空间,将它们分组到下拉菜单中

html - 如何在所有设备和浏览器上以适当的尺寸显示相同的 Logo 图像?

css - 摆脱表格中图像之间的垂直空间

jquery - 试图让悬停动画在交火图像网格脚本上工作

ios - 奇怪的亮点 Mobile Safari

javascript - 响应式移动导航栏(导航)jquery/javascript

html - 打印媒体中的文本未正确对齐到中心

javascript - 将文本的周期性变化合并到一行中

javascript - 在更改第一个输入之前,RGB 值不会更改

html - 响应式网站 : What am I Missing?