40歲大叔學(xué)習(xí)編程之 JavaScript 相冊特效

求是：設(shè)置一個展示照片的區(qū)域，下面有上一張，下一張，點擊會切換照片。

實現(xiàn)思路：設(shè)置最小下標(biāo)（minIndex）為 1 ，最大下標(biāo)（maxIndex）為4，剛開始讓最小下標(biāo)為1，點擊下一頁，讓下標(biāo)加1，如果加到最大下標(biāo)了，讓他等于最小下標(biāo)1，這樣就能循環(huán)著，展示這4張校花照片了，點擊的時候通過 ApI: setAttribute("src", url) 設(shè)置image標(biāo)簽的 src 屬性，就可以了。簡單吧。

網(wǎng)上找?guī)讖埫琅掌诺絠mages目錄下。快來實現(xiàn)一下吧。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>圖片切換</title>
  </head>
  <body>
    <!-- 4    1    4 -->
    <img src="images/image01.jpg" id="flower" width="200" height="200" />
    <br />
    <button id="prev">上一張</button>
    <button id="next">下一張</button>
    <script type="text/javascript">
      // 1.獲取事件源 需要的標(biāo)簽
      var flower=document.getElementById("flower")
      var nextBtn=document.getElementById("next")
      var prevBtn=document.getElementById("prev")

      var minIndex=1,
        maxIndex=4
      currentIndex=minIndex
      // 2.監(jiān)聽按鈕的點擊
      nextBtn.onclick=function () {
        if (currentIndex===maxIndex) {
          // 到最后一張了
          currentIndex=minIndex
        } else {
          currentIndex++
        }

        flower.setAttribute("src", `images/image0${currentIndex}.jpg`)
      }

      prevBtn.onclick=function () {
        if (currentIndex===minIndex) {
          // 到最后一張了
          currentIndex=maxIndex
        } else {
          currentIndex--
        }
        flower.setAttribute("src", `images/image0${currentIndex}.jpg`)
      }
    </script>
  </body>
</html>

效果如圖：

網(wǎng)絡(luò)技術(shù)正趨向于發(fā)展為一個巨大的移動APP市場，在Web開發(fā)的革命浪潮中起著指示性作用，自HTML引入以來，創(chuàng)建可轉(zhuǎn)換，有新意的網(wǎng)絡(luò)移動應(yīng)用程序變得So easy，web開發(fā)中運用先進(jìn)技術(shù)也很容易處理各種復(fù)雜Bug。

作為專業(yè)的軟件開發(fā)工具，最新版的HTML總是更好用一些，它不但可以最大程度降低誤差，而且能快速開發(fā)出強大的網(wǎng)站和手機(jī)應(yīng)用程序。

如果你在程序開發(fā)中用的是HTML5 版本，估計也沒少被網(wǎng)速語義響應(yīng)特性方面的問題所困擾。

HTML6特性

web開發(fā)行業(yè)要求有更好、更可靠的解決方案，HTML5的修改版本，也就是最新版的HTML6開發(fā)出了特殊的標(biāo)記語言，可提供更為順利高效的web開發(fā)平臺。

這篇文章主要介紹HTML6，即HTML第六版的一些高級功能。

1、相機(jī)集成

如今瀏覽器連接著攝像頭和麥克風(fēng)，網(wǎng)絡(luò)用戶之間的互動日益頻繁，相機(jī)集成增長迅速，手機(jī)和電腦對相機(jī)驅(qū)動的需求也大大增加，由于HTML6有照片或視頻捕捉功能，方便用戶輕松訪問照片以及設(shè)備存儲，能更好的控制攝像頭，提高檢測率。

2、增加認(rèn)證

HTML 6最顯著優(yōu)勢是在開發(fā)復(fù)雜的互動類網(wǎng)站和web應(yīng)用程序時可以優(yōu)化整個開發(fā)過程。訪問新版HTML時，瀏覽器應(yīng)及時提供強大的身份驗證，這一點至關(guān)重要，只有確保軟件的可靠性才能真正增強網(wǎng)站和瀏覽器的功能。

3、庫

jQuery是目前世界上最先進(jìn)的JavaScript庫，它給web開發(fā)帶來許多變化，然而，加載jQuery的成本也高，為了加快web應(yīng)用程序開發(fā)過程，大部分網(wǎng)站都選用緩存版本的JS庫，當(dāng)多數(shù)網(wǎng)頁設(shè)計師都喜歡某個特定的庫，就會被用在很多瀏覽器上，為了克服這種情況，web開發(fā)人員應(yīng)及時更新HTML版本，希望HTMl6能夠真正解決這個問題，提供更穩(wěn)定的庫。

4、增強注釋

一個功能齊全的HTML結(jié)構(gòu)要求單詞、句子、段落都必須有詳細(xì)的注釋。大多數(shù)web開發(fā)人員需要一個更強大的版本，最好連圖像和視頻都能夠明確注釋。

5、強化微格式

HTML標(biāo)簽不同于段落、標(biāo)題和頁腳，為了定義基本的細(xì)節(jié)如地址或電話號碼，就需要創(chuàng)建一個標(biāo)準(zhǔn)的標(biāo)簽。標(biāo)準(zhǔn)的標(biāo)簽不僅會提高搜索引擎排名，還能提高網(wǎng)站質(zhì)量，web開發(fā)人員可以用HTML6來定義地點、日期、產(chǎn)品、時間等等。

6、可插入Pre-Processers

為本地設(shè)備或機(jī)器修改代碼時，HTML5雖然支持將pre-processers語言轉(zhuǎn)換成JavaScript，但現(xiàn)有版本的HTML只能處理JavaScript的通用版本，HTML6采用先進(jìn)的功能，可以更好地改善代碼，優(yōu)化開發(fā)過程。

7、添加命令

在HTML的下一個版本中，關(guān)于web頁面的視頻結(jié)構(gòu)分布，預(yù)計添加更多命令。現(xiàn)有版本包含一個特定視頻的關(guān)鍵幀，能夠及時給文本添加注釋和字幕，但web開發(fā)人員為了打造一流視頻，需要更新版本，支持回叫信號，同步機(jī)制等功能。

8、聯(lián)系信息認(rèn)證保護(hù)

網(wǎng)站界面應(yīng)提供一個適當(dāng)?shù)拿睿瑫r提供自動訪問代碼。

9、可插拔的語言

如果HTML6自帶有影響力和可插入的語言，那么web開發(fā)人員可以輕松地創(chuàng)建更有新意的設(shè)計。

10、瀏覽器兼容影像

圖像像素的尺寸大小會在移動端和PC端之間不斷變化，增強版的HTML可以準(zhǔn)確提供圖片尺寸，篩選最優(yōu)照片，輕松解決照片問題。

智能社撰稿，更多知識請關(guān)注微信號zhi_neng_she ，具體代碼可在公眾號內(nèi)‘技術(shù)圈’獲得！

年來，網(wǎng)頁設(shè)計已經(jīng)發(fā)生了很大的變化。一開始，網(wǎng)頁設(shè)計的主要目標(biāo)是為桌面用戶創(chuàng)造一個流暢的瀏覽體驗--畢竟這是人們訪問互聯(lián)網(wǎng)的唯一方式。但從那時起，移動革命已經(jīng)極大地改變了我們?yōu)榫W(wǎng)絡(luò)設(shè)計的方式。

今天，當(dāng)設(shè)計師建立一個新的網(wǎng)站時，他們需要確保它看起來很棒，功能良好，并在各種瀏覽器和設(shè)備上傳達(dá)正確的信息。基本上可以保證，網(wǎng)站設(shè)計的客戶會要求提供他們網(wǎng)站的移動版本。響應(yīng)式設(shè)計原則使之成為可能。

在這個全面的指南中，我們將涵蓋你需要知道的關(guān)于響應(yīng)式網(wǎng)頁設(shè)計的一切--從圍繞它的歷史，到最佳實踐，以及可供學(xué)習(xí)的強大實例。

響應(yīng)式網(wǎng)頁設(shè)計的終極指南

什么是響應(yīng)式網(wǎng)頁設(shè)計？

響應(yīng)式網(wǎng)頁設(shè)計的歷史

適應(yīng)不同的視口

用于設(shè)計響應(yīng)式網(wǎng)站的方法

調(diào)整圖像大小

響應(yīng)式排版的使用

移動優(yōu)先的設(shè)計

響應(yīng)式網(wǎng)站實例

什么是響應(yīng)式網(wǎng)站設(shè)計？

響應(yīng)式網(wǎng)頁設(shè)計是一種設(shè)計網(wǎng)站的方法，它可以在各種屏幕尺寸上呈現(xiàn)網(wǎng)頁。這是用戶界面可塑性的一個例子--一個界面能夠流動，并根據(jù)可用的屏幕空間以理想的排列方式呈現(xiàn)。

但是，響應(yīng)式設(shè)計不僅僅是一種技術(shù)方法，它是良好用戶體驗的支柱。與其把屏幕尺寸和分辨率看作是設(shè)計上的限制，不如把你的內(nèi)容看作是流動的，讓用戶完全控制他們想怎么看。

響應(yīng)式設(shè)計需要結(jié)合流體網(wǎng)格、靈活的圖像和媒體查詢。流暢的網(wǎng)格、靈活的圖像和媒體查詢作為一個整體一起工作，它們根據(jù)用戶的喜好重新格式化網(wǎng)頁，并提供盡可能好的網(wǎng)絡(luò)體驗。

流暢的網(wǎng)格

網(wǎng)格是一個由相交的線條組成的二維結(jié)構(gòu)，讓你把內(nèi)容安排在列和行中。在流體網(wǎng)格中，網(wǎng)格中的每個元素都是以相對于其容器的比例來表示的，所以它的大小取決于它所處的容器的大小。這意味著網(wǎng)格中確切的列數(shù)可以根據(jù)用戶的視口（用戶設(shè)備上可以看到內(nèi)容的可見區(qū)域）的大小而變化。例如，你可以在桌面上顯示一個三欄式布局，而在移動設(shè)備上顯示一個單欄式布局。

相對單位

網(wǎng)頁元素，如內(nèi)容塊或按鈕的大小是以相對單位（如百分比）計算的。相對單位使得根據(jù)視口的大小來確定元素的大小成為可能。

媒體查詢

CSS（層疊樣式表）媒體查詢可以根據(jù)視口的特性改變頁面的風(fēng)格，比如視口的顯示分辨率和瀏覽器窗口的實際大小。

響應(yīng)式設(shè)計的歷史

上世紀(jì)80年代，智能手機(jī)的普及促使網(wǎng)頁設(shè)計界思考如何在不犧牲可用性或性能的情況下，在不同的顯示尺寸和分辨率上顯示內(nèi)容。

網(wǎng)頁設(shè)計師Ethan Marcotte在他2010年的文章《響應(yīng)式網(wǎng)頁設(shè)計》中首次提出了 "響應(yīng)式設(shè)計 "這一術(shù)語。Marcotte的靈感來自于響應(yīng)式建筑設(shè)計，即一個空間會根據(jù)其內(nèi)的人數(shù)自動調(diào)整。顧名思義，響應(yīng)式設(shè)計通過調(diào)整布局元素以適應(yīng)可用空間的變化來響應(yīng)瀏覽器的寬度。

除了響應(yīng)式設(shè)計之外，還出現(xiàn)了第二種更加量身定做的方法：適應(yīng)性設(shè)計。適應(yīng)性設(shè)計是一年前由網(wǎng)頁設(shè)計師Aaron Gustafson在一本書中提出的，設(shè)計師為每個斷點（通常是320px、480px、760px、960px、1200px和1600px）創(chuàng)建一個布局。設(shè)計適應(yīng)不同尺寸的視口，使用媒體查詢來定義小屏幕和大屏幕的屬性將被改變。因此，每個網(wǎng)頁都有多個適合不同屏幕尺寸的固定布局版本。

當(dāng)我們比較響應(yīng)式和自適應(yīng)設(shè)計時，響應(yīng)式通常是高級設(shè)計師更有效的方法。因為你不需要創(chuàng)建多個版本的布局，所以實施和維護(hù)設(shè)計的工作量更少。通過響應(yīng)式設(shè)計，頁面的內(nèi)容會針對每個瀏覽器窗口進(jìn)行優(yōu)化安排。響應(yīng)式網(wǎng)頁設(shè)計也更有利于搜索引擎優(yōu)化，因為它在Googlebot抓取你的網(wǎng)站時可以節(jié)省資源。一個Googlebot用戶代理只需要抓取你的頁面一次，而不是抓取多次來檢索你的設(shè)計的多個版本。

適應(yīng)不同的視口

從巨大的電視屏幕到智能手表的小屏幕，今天人們有多種方式可以訪問網(wǎng)絡(luò)。為了給用戶創(chuàng)造一個舒適的瀏覽體驗，適應(yīng)不同的視口是很重要的。

響應(yīng)式設(shè)計通過允許設(shè)計師針對特定的設(shè)備類別和各種屏幕尺寸來解決這個問題。為了創(chuàng)建一個響應(yīng)式設(shè)計，網(wǎng)頁設(shè)計師需要做兩件事。

1. 在他們所有的HTML頁面上添加 "viewport "元標(biāo)簽。

這個標(biāo)簽為瀏覽器提供了如何渲染網(wǎng)頁的指示，定義了網(wǎng)頁的尺寸和比例。

2. 使用媒體查詢，使其布局符合特定視口的要求。比如說。

增加功能控件的尺寸，如按鈕，或在移動端上增加它們之間的相對距離。這將有助于在觸摸設(shè)備上遵守菲茨定律，并創(chuàng)造更舒適的用戶互動。

顯示或隱藏網(wǎng)站布局中的特定元素。

在特定類型的設(shè)備上改變某些元素的視覺屬性（如字體顏色）。

如何定義媒體查詢

下面是CSS文件中媒體查詢的一個例子。

@media screen and (max-width: 480px) and (orientation: portrait) { .footer { float: none; width: auto; } }
這個CSS媒體查詢的語法最初可能看起來很復(fù)雜，但只要你熟悉了這個結(jié)構(gòu)，解碼信息就變得很容易。在@media之后和第一個開放的{括號之前的部分定義了條件。讓我們回顧一下我們例子中的條件。

媒體類型。媒體類型是一種我們想要應(yīng)用CSS設(shè)置的設(shè)備類型。我們可以定義四類設(shè)備：屏幕（桌面、手機(jī)和平板電腦）、打印（打印機(jī)）、語音（用于為視障用戶大聲讀出頁面的屏幕閱讀器）、所有（用于所有媒體類型）。如果你不指定這個屬性，CSS將默認(rèn)應(yīng)用所有屬性。

媒體特征。min-width設(shè)置了一個最小的瀏覽器或屏幕寬度，某些樣式將適用于此。如果瀏覽器或屏幕的寬度低于這個限制，這些樣式將被忽略。max-width屬性的作用正好相反，任何超過最大瀏覽器或屏幕寬度的東西都不會適用于相應(yīng)的媒體查詢。

方向。設(shè)備方向可以是縱向（垂直方向）或橫向（水平方向）。這個屬性主要適用于移動設(shè)備和平板電腦。

在括號內(nèi)，當(dāng)所有條件都滿足時，可以應(yīng)用一個樣式條件。在我們的例子中，我們要檢查三個條件。

設(shè)備的類型是桌面、移動還是平板電腦？

我們的設(shè)備是縱向的嗎？

我們的設(shè)備屏幕分辨率（最大寬度）是否等于或小于480px？

如果所有條件都滿足，這意味著用戶很可能是在縱向模式的小屏幕移動設(shè)備上觀看我們的作品。在這種情況下，設(shè)備將加載頁腳對象的CSS指令--否則，本節(jié)的指令將被忽略。

如何構(gòu)造媒體查詢

有兩種常見的結(jié)構(gòu)化CSS樣式的方法，要么把它們放在一個文件里，要么為不同類型的設(shè)備使用不同的文件。每種方法都有其優(yōu)點和缺點。例如，將媒體查詢與網(wǎng)站的其他CSS樣式一起全部放在一個CSS樣式表中，你將最大限度地減少渲染網(wǎng)頁所需的系統(tǒng)數(shù)量。此外，通過將媒體查詢分布在不同的文件中（如 desktop.css, mobile.css），將使開發(fā)人員更容易在代碼中導(dǎo)航，因為所有與移動視口相關(guān)的樣式都位于同一個文件中。

分割點

我們在上面的媒體查詢例子中定義的分辨率可以作為一個斷點。斷點是響應(yīng)式網(wǎng)頁設(shè)計的基石，因為它們幫助設(shè)計師定義設(shè)備的類別，并為每組設(shè)備調(diào)整設(shè)計。

"我的網(wǎng)站應(yīng)該使用哪些斷點？"這是網(wǎng)頁設(shè)計師的一個典型問題。沒有一套通用的斷點，因為所有的項目都不同，可能需要不同的分辨率。可以依靠世界范圍內(nèi)的屏幕分辨率統(tǒng)計來定義幾組常見的屏幕分辨率。

360 x 640px（小型移動設(shè)備屏幕）：10.10％。

1366 x 768px（普通的筆記本電腦屏幕）：9.3%。

1920 x 1080px（大型桌面屏幕）：8.35%。

如果你使用Editor X，你會有3個默認(rèn)的斷點來開始使用。

移動設(shè)備為350-750px

平板電腦為751-1000px

1001px和更大的臺式電腦

但這些斷點并不是一成不變的。如果你想調(diào)整，你可以很容易地編輯它們或添加自定義斷點，以適應(yīng)你的項目的需要，而無需潛入代碼。

在為你的項目選擇斷點時，要記住以下兩條基本規(guī)則。

根據(jù)你所擁有的內(nèi)容來選擇斷點。你用來展示內(nèi)容的布局應(yīng)該決定你要使用哪些斷點。

盡量使用最少的斷點。請記住，你將需要調(diào)整內(nèi)容以配合每個斷點。三個或四個斷點將使你有足夠的靈活性來框定你的內(nèi)容。

用于設(shè)計響應(yīng)式網(wǎng)站的方法

CSS媒體查詢是制作響應(yīng)式網(wǎng)站的基本工具。所有現(xiàn)代的網(wǎng)絡(luò)瀏覽器都能解析CSS媒體查詢，所以你在調(diào)整設(shè)計以適應(yīng)特定平臺時不會遇到麻煩。

為了讓你的生活更輕松，在創(chuàng)建CSS媒體查詢的時候，你不應(yīng)該從頭開始。你可以使用一個CSS框架，如Bootstrap、Bulma或Foundation CSS。這種方法的好處是，框架帶有一套預(yù)定義的斷點和基本對象的視覺樣式，如正文、按鈕、輸入欄等。

另一種可用于響應(yīng)式設(shè)計的方法是JavaScript。這種方法可以應(yīng)用于不支持CSS媒體查詢的設(shè)備。可以用JavaScript來檢測瀏覽器窗口的大小，并加載相關(guān)的樣式表。這里有一段代碼，可以用來計算窗口的當(dāng)前大小。

$(window).height(); $(window).width();

每當(dāng)用戶改變他們的瀏覽器窗口時，下面的JQuery代碼將被觸發(fā)，它將即時加載相關(guān)樣式。

<script type="text/javascript">
  $(document).ready(function(){
    $(window).bind("resize", resizeWindow);
    function resizeWindow(e){
      // this code will be triggered every time the user will change the browser window
      var newWindowWidth=$(window).width();

      if(newWindowWidth < 481){  
      // if the size of the windows is less than 481 it's likely that the person browse on mobile   
               $("link[rel=stylesheet]").attr({href : "mobile.css"});       
        }       
    }
  });
</script>

CSS媒體查詢和JavaScript并不是競爭性的方法，它們可以很好地一起工作。

調(diào)整圖像大小

圖像是現(xiàn)代網(wǎng)絡(luò)的一個重要元素。圖像的質(zhì)量在很大程度上影響著人們對設(shè)計的看法--不相關(guān)的圖像或像素化的資產(chǎn)很可能會給你的訪問者造成不好的印象。不僅要精心挑選相關(guān)的圖像（那些能夠向你的受眾傳達(dá)正確信息的圖像），而且要確保圖像能夠很好地適應(yīng)任何瀏覽器的尺寸。

有兩種類型的圖像，光柵圖像（JPG、PNG、TIFF）和矢量圖像（SVG）。第一組代表了網(wǎng)絡(luò)上的大多數(shù)圖像，這組圖像的關(guān)鍵問題是它們不是自然流動的。不像矢量圖像可以在不損失質(zhì)量的情況下擴(kuò)大尺寸，光柵圖像必須為不同的分辨率進(jìn)行修改。

為不同分辨率優(yōu)化光柵圖像的三種方法

讓我們了解更多關(guān)于圖像優(yōu)化的信息，并獲得關(guān)于如何調(diào)整圖像大小的實用技巧。你可以使用CSS屬性為不同的分辨率優(yōu)化你的圖像。

1. 用圖像寬度屬性調(diào)整圖像的大小。寬度屬性定義了圖像的固定寬度。下面的CSS規(guī)則將定義寬度為500px。

這種方法的缺點是，它對你的圖片使用固定寬度，所以它在所有設(shè)備上都會以完全相同的尺寸顯示。這種方法對于響應(yīng)式網(wǎng)站來說不是很好用，因為尺寸不當(dāng)?shù)膱D片很容易破壞布局。

2. 用CSS寬度屬性設(shè)置為100%來調(diào)整圖像大小。

img { width:100%; }

與前一種方法的關(guān)鍵區(qū)別在于，你不在代碼中指定圖片的精確寬度，而是讓瀏覽器根據(jù)需要調(diào)整圖片的大小。有了width: 100%;屬性，圖像就會自動放大和縮小。這種方法的缺點是，圖像在放大時可能會出現(xiàn)像素化。

3. 用CSS最大寬度屬性接收。

img { height: auto; max-width: 100%; }

最大寬度屬性允許圖像保持其長寬比和比例。當(dāng)最大寬度被設(shè)置為100%時，圖像將適合其容器的全部寬度。只要沒有其他基于寬度的圖像CSS樣式覆蓋這一規(guī)則，或者查看區(qū)域比圖像的原始寬度窄，這個圖像就會以其原始尺寸加載。這種方法對響應(yīng)式網(wǎng)頁設(shè)計非常有用。

顯示尺寸和視覺資產(chǎn)

考慮不同類型的設(shè)備如何渲染圖像也很重要。雖然有可能在所有類型的設(shè)備上使用相同的文件，但為小屏幕設(shè)備調(diào)整圖像大小的過程需要額外的計算能力，所以以原始分辨率使用大文件可能會導(dǎo)致性能下降。

同時，高分辨率顯示器，如蘋果 "視網(wǎng)膜 "和安卓 "hDPI"，可能需要你以正常分辨率的兩到三倍提供視覺資產(chǎn)，以達(dá)到體面的視覺質(zhì)量（@2x，和@3x）。為了解決這兩個問題，建議使用一個特殊的工具，如Responsive Breakpoints，它將允許你為每個斷點準(zhǔn)備單獨的圖像。

如果你使用Editor X來建立一個響應(yīng)式網(wǎng)站，你不必寫CSS代碼來使你的光柵圖像在不同的視口正確顯示。該平臺允許你設(shè)置一個精確的寬度或高度，設(shè)置一個最大寬度或高度的百分比，以及設(shè)置一個最大寬度或高度的像素。你還可以設(shè)置一個圖像焦點，這樣當(dāng)以不同格式觀看時，視覺就會保持在中心位置。

響應(yīng)性地使用排版

人們訪問網(wǎng)站是為了獲取內(nèi)容，而書面文字占了其中的絕大部分。這意味著文本在任何視口尺寸下都是可讀的，這一點至關(guān)重要。因此，當(dāng)涉及到響應(yīng)式排版時，有幾件事情需要記住。

不要把文字放在圖形中

將文本放在圖形中，你會立即使其反應(yīng)速度降低。文本不能在不損失質(zhì)量的情況下被放大，因此你必須為每個斷點重新創(chuàng)建視覺資產(chǎn)。

選擇可以縮放的字體

為響應(yīng)式網(wǎng)頁設(shè)計優(yōu)化排版的過程從選擇合適的字體開始。

要做到這一點，網(wǎng)頁設(shè)計師需要確保字體的大小足以讓人一目了然。這一點對于移動設(shè)備尤其重要--用戶不應(yīng)該為了能夠閱讀文字而需要雙擊或捏合變焦。

選擇能清晰縮放的字體，在電視大屏幕和智能手表的小屏幕上同樣可讀。一般來說，建議使用網(wǎng)絡(luò)安全字體，如Helvetica，因為它們經(jīng)過優(yōu)化，在不同的分辨率下看起來都不錯。

適當(dāng)調(diào)整文字大小

在網(wǎng)絡(luò)上，字體的大小可以有兩種不同的方式。

絕對值（像素、點

相對值（百分比，em/rem，視口寬度或高度vw/vh)

讓我們從最流行的選項開始--像素。像素是絕對值。用像素定義的字體大小將基于用戶屏幕的像素大小。當(dāng)你使用像素時，現(xiàn)代瀏覽器能夠使你的設(shè)計在不同的分辨率下看起來相似。

由于大多數(shù)設(shè)計師都使用像素，這個單位在產(chǎn)品團(tuán)隊中非常流行。然而，像素不能使用戶根據(jù)自己的需要調(diào)整文字，并使你的設(shè)計不那么容易獲得。

另一個流行的選擇是一個叫做em的相對值。當(dāng)你使用em時，一個元素的em的實際大小是相對于其父元素的字體大小計算的。em相對值提供了兩個重要的好處。

對設(shè)計師的好處。相對值允許嵌套字體大小。Em從它的父元素中繼承其大小，而rem從根樣式中繼承。

對用戶的好處。當(dāng)你使用相對值時，你給了用戶一個機(jī)會來改變他們喜歡的默認(rèn)字體大小，網(wǎng)站會自動調(diào)整以適應(yīng)他們的需要。

如果你用X編輯器建立一個網(wǎng)站，你可以用文本編輯器來縮放一個文本元素。

現(xiàn)在我們來討論一下百分比。在字體大小為100%的情況下，一個頁面中的所有元素的大小都是相對于瀏覽器的默認(rèn)字體大小而言的。

body { font: normal 100% Roboto, sans-serif; }

最后但并非最不重要的是，當(dāng)字體以 "vw "單位定義時，文本大小將跟隨瀏覽器窗口的大小。

<h1 style="font-size:12vw">Hello World</h1>

另一件要考慮的事情是，不同設(shè)備的字體大小需要不同。它在桌面上應(yīng)該大一些，在移動設(shè)備上應(yīng)該小一些。同樣，使用相對值的好處是，你不僅可以定義一個特定元素的理想尺寸，還可以定義該尺寸與其他元素尺寸的關(guān)系，在你的布局中保持良好的比例。

下面的CSS將為h1元素設(shè)置一個默認(rèn)的字體大小，桌面版為3.5 rem，移動版為2 rem。

h1 { font-size: 3.5rem; } @media only screen and (max-width: 480px) { h1 { font-size: 2rem; } }

雖然沒有精確的字體大小規(guī)則，但建議應(yīng)用黃金比例來找到精確的字體大小。例如，如果桌面的基本字體是16px，那么標(biāo)題h1的大小將通過基本字體大小乘以1.618來計算（大約是26px）。

如果你用Editor X建立一個網(wǎng)站，你可以用文本編輯器為一個文本元素設(shè)置最小和最大的字體大小。

你還可以為不同的斷點設(shè)置文本在不同的最大和最小尺寸范圍之間縮放，以使你的網(wǎng)站排版完全響應(yīng)。這將確保你的文本在你調(diào)整屏幕大小時能順利地縮放。

行長和行距

為了達(dá)到良好的可讀性，你需要限制文本行的長度。一個好的經(jīng)驗法則是，桌面上每行使用50至60個字符，移動設(shè)備上每行使用30至40個字符。可以使用內(nèi)容容器的寬度屬性或使用Ch的 "長度值 "來限制每行的字符數(shù)。Ch代表元素字體中的字形 "0"（0，Unicode字符U+0030）的寬度。

p { overflow: hidden; max-width: 40ch; }

此外，你不應(yīng)該擠壓線條，因為行距太緊會導(dǎo)致眼睛疲勞。最佳的做法是使用120%-140%的行距，以獲得良好的可讀性。行高（line-height）CSS屬性通常用于設(shè)置文本行之間的距離。我們可以用百分比來設(shè)置這個屬性，使其與元素本身的字體大小相對應(yīng)。

p {
line-height: 34%;
}

移動優(yōu)先的設(shè)計

在過去的十年中，移動設(shè)備在我們的日常生活中扮演的角色發(fā)生了巨大的變化。事實上，56%的網(wǎng)站流量來自于智能手機(jī)。移動設(shè)計的優(yōu)化是網(wǎng)頁設(shè)計過程中的一個關(guān)鍵部分--因為一個沒有針對移動設(shè)備進(jìn)行優(yōu)化的網(wǎng)站正在失去其大約一半的流量。

移動優(yōu)先設(shè)計是一種方法，它建議設(shè)計師先創(chuàng)建一個在最小的斷點上運行良好的布局，然后再針對更大的視口進(jìn)行調(diào)整。

移動和桌面設(shè)計之間有三個關(guān)鍵區(qū)別。

顯示器的大小。在手機(jī)上，你有更少的空間來顯示你的內(nèi)容，需要仔細(xì)地確定你想顯示的內(nèi)容的優(yōu)先次序。

交互方式。由于用戶在移動設(shè)備上使用他們的手指與內(nèi)容互動，像懸停效果這樣的動畫就不能很好地發(fā)揮作用。

使用情境。人們可以在旅途中與內(nèi)容互動（例如，在等待火車的時候），所以移動網(wǎng)站應(yīng)該為較短的用戶會話和較少的注意力而設(shè)計。

遵循移動優(yōu)先的用戶體驗設(shè)計方法提供了幾個主要的好處。

使得響應(yīng)式設(shè)計更容易。它將幫助你確定內(nèi)容和功能的優(yōu)先次序，并刪除一切不是絕對必要的東西。因此，你將有可能減少用戶在移動端和你為之設(shè)計的任何其他平臺的認(rèn)知負(fù)荷。

有利于搜索引擎優(yōu)化。谷歌評估網(wǎng)站的排名主要是基于其移動版本的內(nèi)容。如果一個頁面需要移動用戶進(jìn)行額外的互動，例如將內(nèi)容放大以使其可讀，那么谷歌可能不會判斷它是移動友好的。你可以參加谷歌的移動友好測試，以檢查你的網(wǎng)站的設(shè)計。

以下是你在進(jìn)行移動設(shè)計時需要考慮的幾個方面。

實行內(nèi)容優(yōu)先的策略

在你設(shè)計的每一個頁面，都要考慮你想傳達(dá)什么信息。圍繞這個信息構(gòu)建頁面，并將基本信息放在折疊上方。例如，當(dāng)你設(shè)計一個 "聯(lián)系我們 "的頁面時，把信息放在頁面的頂部，這樣用戶就不需要通過滾動來找到它。

創(chuàng)建一個響應(yīng)式網(wǎng)站的過程應(yīng)該總是從規(guī)劃布局開始。將你的內(nèi)容和功能元素組織起來，為訪問者提供盡可能好的體驗。這并不意味著你需要從一開始就創(chuàng)建一個最終的、像素完美的設(shè)計。事實上，我們建議創(chuàng)建一個未來設(shè)計的示意圖，以顯示每一個包含內(nèi)容和功能元素的塊在頁面上的位置。這樣，你就可以與你的團(tuán)隊和利益相關(guān)者一起評估不同的布局變化，并選擇你認(rèn)為對你的用戶最有效的那一個。

使用條件性加載

在確定內(nèi)容的優(yōu)先次序時，你可能想在移動設(shè)備上隱藏一些內(nèi)容。CSS屬性display: none; 允許你這樣做。你可以在CSS中對需要隱藏的特定元素應(yīng)用這個屬性。例如，你可能有兩個CSS樣式，desktop.css用于臺式機(jī)，mobile.css用于移動設(shè)備。

Desktop.css

#content { width: 100%; }

Mobile.css

#content { display: none; }

注意，display:none有時會與visibility: hidden混淆。這是兩個不同的CSS指令。可見性：隱藏只是隱藏了內(nèi)容，所以它變得不可見（沒有被畫出來），不能接受焦點，盡管它仍然在頁面上。另一方面，"顯示：無 "則完全擺脫了內(nèi)容。

為舒適的互動而設(shè)計

用戶通過點擊與桌面網(wǎng)站互動，但移動版本則是通過手指的點擊和滑動。人們也只用一只手來使用他們的移動設(shè)備，因此，優(yōu)化網(wǎng)頁布局，使所有的關(guān)鍵功能元素--如行動號召按鈕--都位于對拇指友好的區(qū)域（用戶不應(yīng)該為了夠到一個重要的元素而伸展他們的拇指）是很重要的。

所有自來水目標(biāo)的尺寸都應(yīng)該適當(dāng)。諸如行動號召按鈕等功能元素的大小至少應(yīng)該是9毫米，這相當(dāng)于用戶拇指的大小。如果你將兩個互動控件并排放置，你需要在這些互動選項之間添加足夠的空白。

使用清晰的視覺指示器

觸摸屏沒有顯示懸停效果的能力，因為沒有光標(biāo)。UI的清晰度在移動設(shè)備上起著更重要的作用，重要的是要把每一個元素都設(shè)計成能讓用戶最大限度地理解其功能的方式。通過使用一致的視覺風(fēng)格是可以實現(xiàn)這一目標(biāo)的。例如，你可以對所有的互動元素使用一種特定的藍(lán)色。

為移動端優(yōu)化導(dǎo)航

大多數(shù)時候，網(wǎng)頁設(shè)計師在移動端依賴漢堡包菜單。然而，可以利用一個更有利的模式，如prioity+導(dǎo)航模式。這種模式保證最優(yōu)先的選項對用戶來說總是可見的，而其余的選項則隱藏在 "更多 "鏈接后面。

牢記移動設(shè)備的硬件能力

加載時間慢是人們放棄網(wǎng)站的一個常見原因。Jakob Nielsen定義了三個響應(yīng)時間限制。0.1秒給人以瞬時反應(yīng)的感覺。理想情況下，你的網(wǎng)站應(yīng)該在0.1秒內(nèi)做出反應(yīng)。1秒保持用戶的思維流暢。10秒大約是保持用戶注意力的極限。但根據(jù)谷歌的研究，當(dāng)頁面加載時間從1秒到3秒，跳出的概率會增加32%。

始終衡量你的網(wǎng)站性能。使用谷歌的速度記分卡和Dexecure等工具來跟蹤你當(dāng)前的性能，例如在移動端加載你的網(wǎng)站所需的時間。查看前端性能檢查表，了解更多關(guān)于性能優(yōu)化的信息。

如果你用Editor X建立一個網(wǎng)站，你的布局的網(wǎng)格中的設(shè)計元素會自動級聯(lián)以適應(yīng)不同的視口，所以當(dāng)在一個較大的斷點上進(jìn)行修改時，會應(yīng)用到每個較小的斷點。

盡量減少打字

響應(yīng)式網(wǎng)頁設(shè)計不僅僅是讓內(nèi)容適合，它也是為了給你的用戶創(chuàng)造更舒適的交互方式。在移動設(shè)備的情況下，打字是用戶旅程中最痛苦的部分之一。

小屏幕使移動設(shè)備上的打字變得困難和容易出錯。只要有可能，盡量在在線表格中使用預(yù)填數(shù)據(jù)。移動端的好處是，你可以利用它的一些硬件能力。

這里有一些關(guān)于如何盡量減少在移動設(shè)備上打字的提示。

使用GEO-location數(shù)據(jù)在運輸和賬單信息中預(yù)先填入用戶城市。你可以使用谷歌的Places API來提供基于用戶位置的準(zhǔn)確建議。

使用設(shè)備攝像頭，讓用戶拍攝信用卡的照片，并自動填寫信用卡信息。

使用Touch ID/Face ID，而不是要求用戶輸入他們的憑證。

在搜索表單中使用語音輸入。

在真實的設(shè)備和不同的瀏覽器上測試你的設(shè)計

當(dāng)你完成你的網(wǎng)站工作時，你應(yīng)該投入時間在真實的設(shè)備上測試它。創(chuàng)建一個用戶在你的網(wǎng)站上應(yīng)該完成的常見任務(wù)的清單，并邀請代表你的目標(biāo)受眾的人參加可用性測試會議。

在測試過程中，你可以看到你的網(wǎng)站在不同平臺（安卓、iOS）上的工作情況，以及它的跨瀏覽器兼容性（Chrome、Safari、Firefox）。如果你懷疑某些CSS樣式指令是否被某個特定的瀏覽器所支持，你可以在Caniuse中檢查。測試將告訴你用戶在哪里面臨摩擦，以及你的網(wǎng)站在哪些方面需要優(yōu)化。

響應(yīng)式網(wǎng)站實例

解釋響應(yīng)式網(wǎng)站設(shè)計如何工作是一回事，看到實踐是另一回事。看看下面的響應(yīng)式網(wǎng)站設(shè)計例子，改變你的瀏覽器大小，看看每個設(shè)計是如何響應(yīng)變化的。

Taupe and Honey是一個為企業(yè)家服務(wù)的女性創(chuàng)意工作室，代表了一個簡單而優(yōu)雅的響應(yīng)式網(wǎng)頁設(shè)計的例子。該網(wǎng)站的布局可以根據(jù)瀏覽器的寬度靈活調(diào)整，并根據(jù)可用的屏幕空間來排列內(nèi)容。當(dāng)你在桌面上瀏覽該網(wǎng)站時，你可以看到一個分屏布局，很好地將視覺效果和文字搭配起來。

然而，一旦瀏覽器窗口變窄，內(nèi)容就會重新流轉(zhuǎn)，使布局更加垂直，因為它轉(zhuǎn)變?yōu)閱螜冢瑸榉奖銤L動進(jìn)行了優(yōu)化。請注意，該網(wǎng)站在桌面上顯示了一個可見的頂層菜單，但在移動端卻將其隱藏在漢堡包圖標(biāo)后面。字體大小也發(fā)生了變化，以便在不同類型的設(shè)備上創(chuàng)造一個舒適的閱讀體驗。

Swank Studio網(wǎng)站的截圖將圖片放在首位，并將文字降到最低。Swank Studio網(wǎng)站的截圖將圖片放在首位，并將文字降到最低。

斯萬克工作室的圖像導(dǎo)向型網(wǎng)站在移動設(shè)備上裁剪英雄圖像，以展示主體的臉部，并將文字降到最低。

Swank Studio是一家豪華創(chuàng)意工作室，是我們名單中的下一個。這個網(wǎng)站遵循一種極簡主義的方法--它使用最少的文字，并在很大程度上依靠圖片來傳達(dá)信息。在大屏幕上，關(guān)鍵信息周圍的留白很寬敞，給網(wǎng)站的訪問者創(chuàng)造了一個積極的印象。

當(dāng)你切換到移動端時，你會注意到兩件事：圖片被裁剪掉，以顯示一個女人的臉，而文字的比例會根據(jù)需要調(diào)整，變得與屏幕的比例更大。這樣做是為了在每個屏幕尺寸上保持視覺平衡，確保移動用戶不會錯過關(guān)鍵信息。

Domaine Alepin網(wǎng)站的截圖，該網(wǎng)站在其主頁上使用人字形布局，在移動端使用單欄式布局。

Domaine Alepin在其主頁上使用人字形布局，在移動端則轉(zhuǎn)換為單欄式布局。這簡化了瀏覽體驗，同時保留了內(nèi)容。

在Domaine Alepin這個開發(fā)商的網(wǎng)站上，我們看到了一個類似的方法。該網(wǎng)站在主頁上采用了 "之 "字形布局。

當(dāng)瀏覽器窗口的寬度被最小化時，設(shè)計使用一個新的單欄布局。在較小的尺寸上沒有刪除任何內(nèi)容，它只是重新安排了一個更好的觀看體驗。

圖像對這個網(wǎng)站起著關(guān)鍵的作用，因此，確保每一個視覺的大小都按比例變化，不至于無法使用是至關(guān)重要的。你也可以注意到字體大小的變化，保持與屏幕的大小成比例。

最后，桌面和移動用戶都可以使用的視差效果是一個相當(dāng)不尋常的設(shè)計選擇。通常情況下，視差滾動在移動設(shè)備上看起來并不漂亮，但Domaine Alepin能夠在兩個平臺上都創(chuàng)造出漂亮的視差過渡。

你在創(chuàng)造好的內(nèi)容方面投入越多，你的用戶就越有機(jī)會喜歡你的網(wǎng)站。如果你使用Editor X，創(chuàng)建響應(yīng)式網(wǎng)站的過程完全不涉及編碼定義網(wǎng)格和斷點，所以你可以專注于你希望觀眾看到的內(nèi)容--無論他們在哪個設(shè)備上。

在線咨詢

上一篇：html5小游戲源代碼程序設(shè)計html源碼網(wǎng)頁電子版
下一篇：2020版最新游戲開發(fā)-Unity3D學(xué)習(xí)路線圖

您的項目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商