HTML、CSS、定位和分辨率

因此，我目前正在为一位朋友/客户进行一个项目，我在设置一个在大多数分辨率下都能正常工作的页面时遇到了问题，例如，如果有人以1680 x 1050、1920 x 1080或介于两者之间或更高的分辨率打开网站，页面将正常工作，但显然大多数元素都会移动，也不会重新调整大小。我的客户在他的笔记本电脑上打开了页面，我创建的导航栏离屏幕只有一半。这是我和他的电脑上的照片

来自我的计算机的图片（1680 x 1050）-

他的笔记本电脑上的照片-

.btn{宽度：200px；}
.fixedbtns{位置：绝对；左侧边距：-250px；顶部边距：-150px；}
.textleft{text align:left；边框：0；边距：10px；}
.relative{位置：relative；}
#容器{宽度：400px；位置：相对；}
我们的服务
战略4增长为客户提供各种商业咨询服务
尚未实现其增长目标和/或能力的组织
我们还可以为客户提供具体的战略分析、建议和领导力
战略执行和审查。在任何情况下，所提供的服务都是
定制以满足特定客户要求，但可能包含
此处列出的各个服务的元素。
[button color=“red”size=“small”light=“yes”icon=”“在新窗口中打开=“no”link=“#section1”]业务增长战略[/button]


[按钮color=“red”size=“small”light=“yes”icon=“”在新窗口中打开”=“否”link=“#第2节”]运营模式策略[/button]


[按钮color=“red”size=“small”light=“yes”icon=“”在新窗口中打开”=“否”link=“#第3节”]数字策略[/button]


[button color=“red”size=“small”light=“yes”icon=”“在新窗口中打开信息技术策略[/button]


[按钮color=“red”size=“small”light=“yes”icon=“”在新窗口中打开”=“no”link=“#section5”]云策略[/button]


[button color=“red”size=“small”light=“yes”icon=”“在新窗口中打开=“no”link=“#section6”]业务转型[/button]


[按钮color=“red”size=“small”light=“yes”icon=“”在新窗口中打开”=“否”link=“#第7节”]英国/欧洲、中东和非洲市场进入策略[/button]


[button color=“red”size=“small”light=“yes”icon=”“在新窗口中打开业务流程外包（BPO）[/button]


[button color=“red”size=“small”light=“yes”icon=“”在新窗口中打开”=“否”link=“#第9节”]销售和营销策略[/button]


[按钮color=“red”size=“small”light=“yes”icon=“”在新窗口中打开”=“否”链接=“#第10节”]战略规划[/button]

下面是代码，它是在wordpress页面文本编辑器中完成的，目前在内部为按钮执行大部分CSS，现在只是更易于编辑

.fixedbtns { position: absolute; margin-left: -250px; margin-top: -150px; }

不要绝对定位东西，否则会导致它们反应迟钝，在不同的屏幕分辨率下看起来很奇怪-在这种情况下，由于-250px部分，会在屏幕外延伸

---

相反，请仔细研究。

请包含生成的html而不是wordpress语法，我很乐意帮助您：）您只指定了固定的宽度和位置，因此显然没有任何内容会调整大小或移动。请查看众多关于使页面响应的教程中的任何一个。事实上，我认为这个问题太宽泛了。绝对定位是一种非常糟糕的网页布局方法。它极不灵活，而且有更好、更灵活的选择。谢谢你的回复，我将使用那些教程链接，在看了这些链接后，我注意到我可以添加很多有用的改进

.fixedbtns { position: absolute; margin-left: -250px; margin-top: -150px; }