0

如何使我的网站全屏宽度不大于屏幕我使用此代码

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="widht=device-width, maximum-scale=1.0, minimum-scale=1.0, inittial-scale=1.0" />
    <title>website</title>
    <link rel="stylesheet" type="text/css" href="css/style.css" />
    <link rel="stylesheet" type="text/css" media="only screen and (min-width:50px) and (max-width:730px)" href="css/style_small.css" />
    <link media="only screen and (max-device-width: 730px)" href="css/style_small.css" type="text/css" rel="stylesheet" />
    <!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
</head>

和CSS代码

@charset "utf-8";
/* CSS Document */

body {
background: #fff url(../images/Bbg.jpg) 0px 0px;
width:100%;
}

.adlogo {
    background-image: url(../images/lbg.png);
    width: 100%;
    margin: 0px;
    border-bottom: #999 solid 1px;
    padding-bottom: 10px;
    display: inline-block;
    position: relative;
}

.adlogo .ads img {
    float:left;
    padding-top:2px;
    margin-left: 1%;
    width: 98%;
    height: 50px;
}

.adlogo .logo img {
    float:right;
    padding-top:2px;
    margin-right: 20%;
    width: 60%;
    height: auto;
}

.top {
    margin:0px 0px 0px 0px;
    padding:0px 0px 0px 0px;
    width: 100%;
    height: 40px;
    background: #1d1d1d;
    border-bottom: #2f2f2f solid 2px;
}

.top .menu1{
    visibility:hidden;
    position:absolute;
    max-width:730px;
}

.hmenu {
    background: url(../images/lbg.png);
    height: 200px;
}

.hmenu .menu2 {
    width:95%;
    margin-left:auto;
    margin-right:auto;
}

.hmenu .menu2 ul {
    padding:0px;
    width:185px;
    float: right;
    list-style-type: none;
    width:95%;
    margin-left:auto;
    margin-right:auto;
}

.hmenu .menu2 ul li{
    text-align:center;
    display:block;
    color: #a6abc5;
    display: block;
    width: 100%;
    margin-left:auto;
    margin-right:auto;
    padding: 9px;
    border:1px solid #21b8ff;
    -moz-border-radius: 12px;
    -webkit-border-radius: 12px;
    border-radius: 12px;
    margin-top: 10px;
}

.hmenu .menu2 ul li a{
    margin-left:auto;
    margin-right:auto;
    background: none;
    border: none;
}

.hmenu .menu2 ul li:hover{
    color:#636363;
    background: #21b8ff;
}

但是当我在手机中打开网站时，我发现网站不是 100% 在屏幕上显示，我发现网站比手机屏幕大

4

1 回答 1

0

您可以@media在您的 css 中使用为不同的设备尺寸设置不同的样式和尺寸，例如宽度和高度。下面的CSS我只是给你和例子。您不必将所有 div 放在@media. 只需放置小屏幕所需的那些。

@media screen and (min-width: 730px) {
    body {
    background: #fff url(../images/Bbg.jpg) 0px 0px;
    width:100%;
  }

  .adlogo {
    background-image: url(../images/lbg.png);
    width: 100%;
    margin: 0px;
    border-bottom: #999 solid 1px;
    padding-bottom: 10px;
    display: inline-block;
    position: relative;
 }

  .adlogo .ads img {
    float:left;
    padding-top:2px;
    margin-left: 1%;
    width: 98%;
    height: 50px;
}

  .adlogo .logo img {
    float:right;
    padding-top:2px;
    margin-right: 20%;
    width: 60%;
    height: auto;
  }
}
于 2013-09-13T14:21:09.563 回答