CSS以纵向模式在小屏幕上添加自动边距

时间:2017-08-18 09:04:38

标签: html css

这是我的代码:

<html>

<head>
  <style>
    body {
      margin: auto;
      width: 720px;
    }
  </style>

</head>

<body>
  <p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
    Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p>
</body>

</html>

在纵向模式下在全高清屏幕上运行时,一切都很好:段落宽度为720px。如果我将宽度更改为1080px它也很好:没有边距 - 段落从页面的一边到另一边。

但如果我尝试在纵向模式下在720x1280高清屏幕上观看此内容,则会自动添加130px的边距。

为什么会这样?保证金:自动搞乱小屏幕?我如何解决它?任何帮助将不胜感激。

1 个答案:

答案 0 :(得分:0)

 <style>
    body{
    margin: 0 auto;
    width:720px;}
 </style>

这应该有效,请查看jsfiddle