Question

大家好我已经在Dreamweaver的帮助下用HTML，CSS和JavaScript创建了一个网站，现在我的屏幕只有15.4英寸，只要我在小屏幕上打开，所以它给我一个滚动条，以宽度形式查看我的整个网站

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

.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
}

Answer 1

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

viewport - 所有元标记中最重要和最有用的。 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是好的

如何将我的网站布局修复为小屏幕和大屏幕

1 个答案: