嘉兴公司网站建设:什么是响应式设计-极简慕枫网络公司

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

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

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

截至2014年1月:

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

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

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

什么是响应设计?

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

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

响应式Web设计实例

  1. 我们自己的divi2.0

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

嘉兴公司网站建设

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

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

  1. TIME.com

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

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

测试您已经访问过的网站

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

其他方法

如何使我的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计算机上这样做的文章:

图像处理

图像和响应式网页设计一直是网页设计界讨论的一个重要课题。有许多主题讨论最佳做法时,使图像响应网站。一些解决方案涉及使用一些简单的css,而另一些则获得更多的技术,并根据您正在访问网站的设备或系统的宽度提供特定大小的图像。

一个常见的解决方案是声明图像的最大宽度为100%,如下所示:

CSS

img {
  max-width:100%;
}

下面是一个快速的例子,说明它对图像的影响。

可读性

无论您所使用的响应程度如何,您都希望记住可读性。您的用户需要能够理解您的内容。在移动设备上,您的文本是否需要更大才能容易阅读?哪些元素需要可见,哪些元素不可见?在规划网站的响应体验时,请记住这些问题。

可用性

当您思考响应性设计时,您的访问者如何使用您的网站应该是最重要的。如果你的网站无法使用,那么用户就不会费心去浏览它来获取他们想要的信息。如果你提供一个优化的体验,你将从现有的用户那里获得积极的结果,甚至吸引新的用户到你的网站。

我们的主题

我们的许多主题在优雅的主题是优化的移动观看体验。我们的新主题是完全响应的,这让你在没有使用完全响应主题的人面前迈出了一大步。使用我上面概述的方法来定制您喜欢使用的主题。并不是每个网站都需要相同的内容。主题的意思是要定制毕竟!

结语

嘉兴公司网站建设不使用响应策略的网站可能会错过更多的流量和暴露在他们的网站上。使用我们预先配置的主题,或使用本教程作为起点,使您的网站优化为任何用户在任何设备。


上一篇:嘉兴企业网站开发:如何在WordPress网站上进行竞赛下一篇:嘉兴企业网站设计:如何将Google翻译按钮添加到WordPress