Question

您好我刚刚设置我的网页以适应所有屏幕尺寸和分辨率。但是，现在当我缩小窗口大小时，没有选项可以滚动页面，看不到任何东西。有人可以帮帮我吗？以下是我的代码：

的index.html：

    *<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="jquery-2.0.3.min.js"></script>
    <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
    <title>index</title>
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <link href='http://fonts.googleapis.com/css?family=Archivo+Narrow:400,700|Open+Sans:400,600,700' rel='stylesheet' type='text/css'>
    <link href="style.css" rel="stylesheet" type="text/css" media="all" />
    <!--[if IE]>
      <link href="style.css" rel="stylesheet" type="text/css" />
      <![endif]-->
      <script type="text/javascript">
    conditionizr({
        debug: true,
        scriptSrc: 'js/conditionizr/',
        styleSrc: 'css/conditionizr/',
        ieLessThan: { active: true, version: '9', scripts: true, styles: true, classes: true, customScript: false },
        chrome: { scripts: true, styles: true, classes: true, customScript: false },
        safari: { scripts: true, styles: true, classes: true, customScript: false },
        opera: { scripts: true, styles: true, classes: true, customScript: false },
        firefox: { scripts: true, styles: true, classes: true, customScript: false },
        ie10: { scripts: true, styles: true, classes: true, customScript: false },
        ie9: { scripts: true, styles: true, classes: true, customScript: false },
        ie8: { scripts: true, styles: true, classes: true, customScript: false },
        ie7: { scripts: true, styles: true, classes: true, customScript: false },
        ie6: { scripts: true, styles: true, classes: true, customScript: false },
        retina: { scripts: true, styles: true, classes: true, customScript: false },
        touch: { scripts: true, styles: true, classes: true, customScript: false },
        mac: true,
        win: true,
        x11: true,
        linux: true
    });
    </script>



</head>
<body>
<div id="main" width="100%;">
<div class="intro" style="font-family:Adobe Gothic Std B;"> SetUp2Go.co.uk offer complete set up businesses packs delivered to your door. Allowing you to go out, start earning money and be your own boss.  
We have spoken to industry professionals who have helped us choose <br> quality essential items in setting up your own business. </div>
    <div class="borderHorizontal"> 
        <a href="#" class="homeButton">Home</a>
        <a href="products.html" class="productsButton">Products</a>
        <a href="about.html" class="aboutButton">About</a>
        <a href="faqs.html" class="faqButton">FAQ's</a>
        <a href="contact.html" class="contactButton">Contact Us</a>
        <div class="emailText" style="font-family:Adobe Gothic Std B;"><b>setup2go@hotmail.com</b></div>
        <div class="facebookLink" type="image" src="facebook-icon.png" href="https://www.facebook.com/pages/SetUp2Gocouk/893630380654424"></div>

        <form class="paypal" name="_xclick" action="https://www.paypal.com/uk/cgi-bin/webscr" method="post">
        <input type="hidden" name="cmd" value="_xclick">
        <input type="hidden" name="business" value="me@mybusiness.co.uk">
        <input type="hidden" name="currency_code" value="GBP">
        <input type="hidden" name="item_name" value="Teddy Bear">
        <input type="hidden" name="amount" value="12.99">
        <input type="image" src="http://www.paypal.com/en_GB/i/btn/x-click-but01.gif" border="0" name="submit" alt="Make payments with PayPal - it's fast, free and secure!">

    </form>
    </div>

    <div class="borderVertical">
    <img class="logoPhoto" src="images/image.png" alt="logo">
    </div>

    <div class="borderHorizontalNotTrading" style="font-family:Adobe Gothic Std B; text-align:center; color:#FF0000; font-size:38px;">
    <b>Currently not trading check back soon!</b>
    </div>

    <img class="windowCleanPhoto" src="images/WindowCleaningkit.jpg" alt="windowClean">
    <img class="shoeShinePhoto" src="images/shoeShine.jpg" alt="shoeShine">
    <img class="hairdresserPhoto" src="images/mobile_hairdresser.jpg" alt="sandwichMaking">
    <img class="homeCateringPhoto" src="images/home_catering.jpg" alt="placeholder">
    <img class="massuesPhoto" src="images/massues.jpg" alt="placeholder2">

</div>
</body>
</html>

的style.css：

body {
background: rgba(235,235,235,1);
background: -moz-linear-gradient(left, rgba(235,235,235,1) 0%, rgba(227,227,227,1) 0%, rgba(214,214,214,1) 24%, rgba(255,255,255,1) 100%);
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(235,235,235,1)), color-stop(0%, rgba(227,227,227,1)), color-stop(24%, rgba(214,214,214,1)), color-stop(100%, rgba(255,255,255,1)));
background: -webkit-linear-gradient(left, rgba(235,235,235,1) 0%, rgba(227,227,227,1) 0%, rgba(214,214,214,1) 24%, rgba(255,255,255,1) 100%);
background: -o-linear-gradient(left, rgba(235,235,235,1) 0%, rgba(227,227,227,1) 0%, rgba(214,214,214,1) 24%, rgba(255,255,255,1) 100%);
background: -ms-linear-gradient(left, rgba(235,235,235,1) 0%, rgba(227,227,227,1) 0%, rgba(214,214,214,1) 24%, rgba(255,255,255,1) 100%);
background: linear-gradient(to right, rgba(235,235,235,1) 0%, rgba(227,227,227,1) 0%, rgba(214,214,214,1) 24%, rgba(255,255,255,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ebebeb', endColorstr='#ffffff', GradientType=1 );

    position:fixed;
    top:0px;
    bottom:0px;
    left:0px;
    right:0px;
}

Answer 1

你可以使用这样的东西来获得小分辨率。

@media all and (max-width: 559px) {
body
{ 
   position:relative;
}
}

网上有很多与媒体查询相关的例子。

最小化网页后无法滚动？

1 个答案: