当显示器上的不同分辨率时按钮移动

Question

您好今天我正在为我的网站制作新的布局，我正在为标题添加按钮但是会发生这种情况（这是我的第一个屏幕1920x1080截图，按钮会正常显示）

我的第二个屏幕（1360x768）

#header {
background:#CCC;
width:100%;
height:58px;
background-size: cover;
background-attachment: fixed;
display:inline-block;}


.buttons {
margin-left:800px;
    position:relative;

}

#button a {
font-family:Trebuchet MS;
text-decoration:none;
color:#fff;
font-size:30px;
display:inline-block;
padding:8px 10px;
display:inline-block;
position:relative;

}

Answer 1

您应该使用媒体查询更改不同分辨率的字体大小。 例如：

@media (min-width: 1300px) and (max-width: 1600px) {
#button a {
font-size: 20px;
} 
}

Answer 2

你实际上在说：占用所有必要的空间，并在左侧留下800px的边距。一旦屏幕尺寸足够小，所以你的文字+ 800px边距不适合，它将会下降到另一条线。

    .buttons {
      margin-left:800px;
      position:relative;
     }

使div尽可能宽，并将其漂浮在右侧。如果你的div低于你建立的限制，它将再次落在另一条线上，因为它没有足够的空间在一条线上。因此是文本格式化的规则。

    .buttons {
     width: 800px; // change so your buttons are on one line
     margin-right: 25px;
     float: right; 
     }

如果您希望它适合更小的屏幕，则可以使用@media规则修改行为。

     @media screen and (max-width: 768px){
     .buttons {font-size: 0.8em;}
     }