嘉兴公司网站建设：什么是响应式设计

嘉兴网站建设 | 2019-04-02

响应性设计已经在万维网上掀起了一股风暴。没有一个移动友好版本的网站可能会损害您的网站的可读性，这取决于您的网站收到的移动通信量(这取决于行业)。

截至2014年1月：

90%美国成年人都有手机
58%美国成年人有一部智能手机
32%美国成年人有一个电子阅读器
42%美国成年人拥有一台平板电脑

资料来源：http：/www.pewinternet.org/data-趋势/移动/设备-所有权/

随着越来越多的人使用移动设备，对响应性网站和应用的需求也在增长。

这篇文章将讨论响应性设计的主题，因为它适用于WordPress。

什么是响应设计？

嘉兴公司网站建设响应设计是一种网页设计方法，旨在制作网站，为用于浏览网站的设备提供最佳体验。这为阅读和导航的体验量身定做，减少了调整大小、摇摄和在小屏幕上滚动的需要。

一个典型的具有响应能力的网站设计使用CSS 3媒体查询，允许在不同的浏览器宽度上应用特定的CSS样式。这允许您为不同大小的屏幕创建不同的设计。

响应式Web设计实例

我们自己的divi2.0

一个很好的起点是我们自己的主题库。看看新的divi2.0主题调整浏览器窗口的大小。观察设计如何适应您的浏览器的宽度，因为您缩小了它的大小。

嘉兴公司网站建设

随着窗口宽度的减少，我们看到前面提到的CSS 3媒体查询即将生效。在各种断点(或CSS 3媒体查询更改的点)，我们的设计保留了一种流畅的感觉，并根据正在触发的媒体查询调整自己。宽度越小，网站就越适合移动设备，比如iPhone或Android设备。

Divi上的设计更改了几次，因为它是针对许多不同的设备宽度进行优化的。您也可以优化您自己的主题，让您控制您的网站是如何呈现给您的用户，无论他们使用什么设备。

TIME.com

TIME.com在他们的最新设计中使用了相同的方法，针对浏览器的特定宽度来显示不同的设计比如平板电脑和手机。

在哪里可以了解更多关于响应性设计的知识？

测试您已经访问过的网站

嘉兴公司网站建设进一步探索响应性设计的一个好方法是开始测试您访问的每个站点。过一段时间，这将成为一种自然的习惯。有些网站会选择使用不同的方式在不同的设备上显示他们的网站。例如，Google根据用户访问其网站的设备使用完全不同的样式表。这种方法，它需要一些额外的编码技术以外的CSS，是用于许多较大的网站。谷歌、亚马逊、雅虎等…

其他方法

阅读博客和教程
选修一门课程
参加讲习班
CSS 3研究与媒体查询的使用
造些东西
用一些基本的HTML和CSS制作一个简单的网站，并开始使用CSS 3来理解它们是如何工作的。

如何使我的WordPress网站响应？

要使任何WordPress网站响应，您可以开始使用CSS 3媒体查询，我前面提到。

典型的媒体查询如下：

@media (max-width: 700px) {
    .container {
        width: 100%;
        margin: 0 auto;
    }
}

通过使用@media通常，一个网站可以有一个不同的布局屏幕，打印，手机或平板电脑。您可以使用多个并定义媒体查询应该生效的任何宽度。

上面我们有@media元素的(max-width: 700px)约束，这意味着一旦屏幕大小或浏览器窗口变为700像素或以下，@media括号将适用于网站。

最好还是@media最低限度的规则。在过去，我见过大多数网站使用4-5。@media标签。这包括移动设备、平板电脑、大屏幕和打印样式。

另一个例子

作为一个演示，我将使用一些基本的HTML和CSS来向您展示我们如何在代码中创建响应性设计规则。同样的规则也适用于WordPress中的主题。您只需将样式应用于style.css文件以更改您的网站的设计。

HTML

<!DOCTYPE html>
    <head>
        <meta charset="utf-8">
        <title>Elegant Themes Responsive Web Design - Demo</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
                <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        <div class="container">
        <h1>Responsive Web Design</h1>
            <ul>
                <li><a href="#">Sample Link 1</a></li>
                <li><a href="#">Sample Link 2</a></li>
                <li><a href="#">Sample Link 3</a></li>
                <li><a href="#">Sample Link 4</a></li>
                <li><a href="#">Sample Link 5</a></li>
            </ul>
        </div>
    </body>
</html>

上面的HTML非常基本。通知我是不是包括了一个重要的标签，帮助响应设计发生。这，这个，那，那个视口元标记用于告诉浏览器根据设备的宽度显示代码，而不管设备的宽度如何。对于这个特定的标记还有其他的配置，但是，我将在下一次讨论这个解释。请随便阅读更多关于它的信息.

在那之后我们有我们的具有包含联合国有序链接列表的div的节。

以下是我们的网页目前在Chrome上的外观，没有样式。

多棒的网页对吧？开玩笑的！让我们把事情搞得更有风貌吧。

下面是一些基本的CSS来启动这些工作：

CSS

body {
    background: PowderBlue;
    font-family: "HelveticaNeue", Helvetica, Arial, sans-serif;
    font-size: 16px;
}
.container {
    width: 1000px;
    margin: 0 auto;
    padding: 20px;
    background: white;
}
.container h1 {
    text-align: center;
}
.container ul {
    list-style-type: none;
}
.container ul li {
    display: inline-block;
    padding: 10px 20px;
}
.container ul li a {
    display:block;
    padding: 20px;
    background: Tomato;
    border-radius: 4px;
    color: black;
    text-decoration: none;
}
.container ul li a:hover {
    background: black;
    color: white;
}

应用上述样式后，我们的页面现在如下所示：

很好，所以现在我们定义了一些基本的样式。让我们再考虑一下这个设计在移动设备上的外观。当设备的宽度如此之小时，将很难让我们的链接都放在一行中。看起来会很乱。那我们能做什么呢？

让我们引入一个媒体查询来调整设计，这样当移动设备达到公共宽度时，我们的设计就会回应我们的CSS中的更改。

将下面的CSS添加到style.css档案。

CSS

@media (max-width: 970px) {

.container {
    width: 100%;
    margin: 0 auto;
    padding:20px 0;
}
.container ul {
    padding:10px;
}
.container ul li {
    display:block;
    padding:10px 0;
}

现在添加了css，我们可以调整浏览器的大小，以查看响应性效果。请查看下面的动画：

凉爽的!因此，正如您所看到的，一旦浏览器达到最小的宽度，我们就需要调整一些东西。我们可以添加另一个媒体查询，以帮助转换更好地匹配宽度。将此CSS添加到style.css档案。

CSS

@media (max-width: 480px) {
    .container h1 {
        font-size: 22px;
    }

}

从现在起，我们的风格只是使我们的标题更小一点，以适应正确。查看结果：

太棒了！现在，我们的简单演示是完全响应。现在我意识到这个例子不是WordPress的主题，但是同样的原则适用于任何网站，不管CMS是什么。

在这里，我邀请您尝试一些CSS 3媒体查询关于您自己的主题。如果您正在使用我们的主题之一，试着改变一些样式，以适应您自己的设计。确保不要编辑您的现场网站。安装一个本地副本的网站，并前往城镇。如果您不知道如何在本地安装您的站点，请查看另一篇我写的关于在Mac上做这件事的文章，以及另一篇关于如何在Windows计算机上这样做的文章：