html - 如何将我的网站布局固定到小屏幕和大屏幕

大家好，我已经借助Dreamweaver的HTML，CSS和JavaScript创建了一个网站，现在每次在小屏幕上打开时，我的屏幕都是15.4英寸，因此它给了我一个滚动条，可以以宽度形式查看我的整个网站。

我已经将div与PX一起使用，我创建了整个网站而不是百分比，但是我不知道为什么会遇到这个问题。

.wrapper
{
  width:1320px;
  height:760px;
  border:solid 1px #000;
  margin:0 auto;
  background:url(images/Background_Image.jpg) no-repeat;
}
.wrapper .logo
{
    background:url(images/logo.png) no-repeat;
    width:395px;
    height:180px;
    margin-left:323px;
    margin-top:10px;
    float:left;
    // same method for other divs
}

最佳答案

将此元标记添加到您的头部

视口-所有元标记中最重要和最有用的。 width控制设备视口的宽度，初始比例会在页面加载时加载初始缩放级别

<meta name="viewport" content="width=device-width, initial-scale=1">

检查Mozilla Docs - Viewport

利用媒体查询

@media screen and (min-width: 700px) and (orientation: landscape) { ... }

Mozilla Docs - Media queries

如果您希望您的网站具有响应能力，则百分比/ em很好

关于html - 如何将我的网站布局固定到小屏幕和大屏幕，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/20852714/