Question

为什么我的网站在以800x600像素分辨率打开时不适合Windows，与在1280x800像素分辨率下打开相同？ [响应式设计]

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
<style type="text/css">.main_div{width:100%;padding-top:20px;background-color:#fff;*width:1263px;}.center_element{margin:0 auto;height:auto;width:1196px;text-align:center;}div.slider_wrapper{margin-left:auto;margin-right:auto;position:relative;}div.slider_container{position:relative;width:990px;height:675px;margin-left:auto;margin-right:auto;overflow:hidden;}ul.slider_top{height:352px;width:10000px;position:relative;padding:0px;margin:0px;}ul.slider_top li{display:inline;}ul.slider_bottom{height:347px;width:10000px;position:relative;padding:0px;margin:0px;}ul.slider_bottom li{display:inline;}.arrow_left{width:60px;height:96px;background-image:url(http://image.free.in.th/v/2013/is/150525063615.png);float:left;margin-top:319px;cursor:pointer;background-repeat:no-repeat;}.arrow_right{width:60px;height:96px;float:left;margin-top:319px;cursor:pointer;background-image:url(http://image.free.in.th/v/2013/id/150525064826.png);background-repeat:no-repeat;}.cover_image{display:block;width:220px;height:295px;padding-top:10px;padding-bottom:10px;position:relative;margin-right:30px;margin-bottom:30px;float:left;border:1px solid #d9d9de;border-radius:6px;}</style> 
</head>
<body>
    <div style="main_div">
        <div class="center_element">
            <div class="arrow_left"></div>
            <div style=" border: 1px solid transparent; padding: 29px 40px 52px 40px; float: left; ">
                <div style=" float: left; height: auto; margin-left: 0px; border: none; background: none; padding-left: 0px; margin-bottom: 0px; margin-top: 3px; overflow: hidden;">
                    <div class="slider_wrapper">
                        <div class="slider_container">
                            <div style=" left: 5px; position: relative; ">
                                <ul class="slider_top" style="right: 0px;">
                                    <li style=" list-style: none; ">
                                        <div class="cover_image">
                                            <img src="http://www.websitemagazine.com/images/blog/flipkart-ping.png">
                                        </div>
                                    </li>
                                    <li style=" list-style: none; ">
                                        <div class="cover_image">
                                            <img src="http://cdn.head-fi.org/8/86/200x400px-LL-861d9226_image.jpeg">
                                        </div>
                                    </li>
                                    <li style=" list-style: none; ">
                                        <div class="cover_image">
                                            <img src="http://bloximages.newyork1.vip.townnews.com/montereycountyweekly.com/content/tncms/assets/v3/editorial/5/fa/5faf13ac-5dee-11e3-a39d-001a4bcf6878/52a0e6c3eee9e.preview-640.jpg?resize=200%2C295">
                                        </div>
                                    </li>
                                    <li style=" list-style: none; ">
                                        <div class="cover_image">
                                            <img src="http://img1.koplayer.com/ScreenShot/com.degoo.android/IwoAItOlOWmqCfh1uny0ydz30Ai92JTC7uts1HeMaWKGX_UYzw1V2M-Wl3KiZcG8JlE_50.png">
                                        </div>
                                    </li>
                                </ul>
                                <ul class="slider_bottom" style="right: 0px;">
                                    <li style=" list-style: none; ">
                                        <div class="cover_image">
                                            <img src="http://cdn1.mos.techradar.futurecdn.net/art/mobile_phones/Samsung/Galaxy%20Note%205/review/samsung-galaxy-note-5-review-settings-200-100.jpg">
                                        </div>
                                    </li>
                                    <li style=" list-style: none; ">
                                        <div class="cover_image">
                                            <img src="https://files.bewakoof.com/uploads/products/original/displaythumb/1455531565-orange_superman_asus_zenfone_2_laser_ze550kl_phone_case.jpg">
                                        </div>
                                    </li>
                                    <li style=" list-style: none; ">
                                        <div class="cover_image">
                                            <img src="https://s-media-cache-ak0.pinimg.com/236x/6d/97/59/6d9759cf72408c4723885c461af4a88f.jpg">
                                        </div>
                                    </li>
                                    <li style=" list-style: none; ">
                                        <div class="cover_image">
                                            <img src="http://cs419724.vk.me/v419724000/45a6/-b1yUlFReaY.jpg">
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="arrow_right"></div>
        </div>
    </div>   
</body></html>

1280x800像素分辨率的打印屏幕

http://image.free.in.th/v/2013/ie/160911013459.png

...

800x600像素分辨率的打印屏幕

http://image.free.in.th/v/2013/ip/160911013611.png

如果我的网站在800x600 px分辨率下打开，与在1280x800像素分辨率下打开相同，我该怎么做？

为什么我的网站在以800x600像素分辨率打开时不适合Windows，与在1280x800像素分辨率下打开相同？ [响应式设计]

0 个答案: