嘉興公司網站建設:什么是響應式設計

嘉興網站建設 | 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