Question

我把这个网站做成了一件小事。我一直在尝试不同的方法让它与所有设备100％兼容，并且完美地适合每个设备。

我对@media查询和javascript一无所知。所以我对我的选择一无所知。

这是我目前正在使用的代码，但我仍然需要向右滚动才能看到整个页面：

<meta name="viewport" content="width=device-width, initial-scale=0">
<link rel="stylesheet" href="/script/jquery.mobile-1.4.3.css">
<script type="text/javascript" src="/script/jquery.mobile-1.4.3.js"></script>

我并不是真正的HTML精明，只是搞乱它，并尝试创造东西。

我知道我能做的下一个解决方案就是让我的图像更小。但是，通过这样做，我显然不会得到我特别追求的外表。

另一件事是，如何让我的“返回顶部”按钮位于每个页面的中央和所有设备上？

使用Javascript：

        <script type="text/javascript">
        jQuery(document).ready(function() {
            var offset = 220;
            var duration = 500;
            jQuery(window).scroll(function() {
                if (jQuery(this).scrollTop() > offset) {
                    jQuery('.back-to-top').fadeIn(duration);
                } else {
                    jQuery('.back-to-top').fadeOut(duration);
                }
            });

            jQuery('.back-to-top').click(function(event) {
                event.preventDefault();
                jQuery('html, body').animate({scrollTop: 0}, duration);
                return false;
            })
        });
    </script>

身体代码：

<p style="text-align:center">
<a href="#" class="back-to-top">Back to Top</a>

CSS：

.back-to-top {
 position: fixed;
 bottom: 0px;
 right: 44%;
 text-decoration: none;
 color: transparent;
 background-color: rgba(0, 230, 0, 0.10);
 font-size: 13px;
 padding: 1em;
 display: none;
 border: 1px solid #CCFF33;
 border-radius: 4px;
 box-shadow: 0 0 8px 1px #00E600;
 color: #C1C1C1;
 outline: none;
 height: 10px;
 width: 180px;
 font-weight: 700;
 letter-spacing: 2px;
 text-shadow: 0 0 0.2em #000, 0 0 0.2em #000, 0 0 0.2em #000;
 text-align: center;
}

.back-to-top:hover {
 background-color: rgba(255, 0, 0, 0.10);
}

Answer 1

这是媒体查询的基础

首先，在本示例中首先设计移动设备的所有内容，然后按照自己的方式进行操作，更改每个屏幕尺寸的属性。

/* Mobile Layout: 480px and below. */

exampleDiv {
 Width:60%;
 height:100px;
}

/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */

@media only screen and (min-width: 481px) {
exampleDiv {
 Width:60% height:300px;
}
}

/* Desktop Layout: 769px to a max of 1232px.  Inherits styles from: Mobile Layout and Tablet Layout. */

@media only screen and (min-width: 769px) {
exampleDiv {
 Width:100% height:500px;
}
}

网站是否兼容其他设备？

1 个答案:

这是媒体查询的基础