使用HTML5和Less框架3的自適應Web設計

什麼是響應式網頁設計？這是一項相對較新的技術，由ethan marcotte於2023年中期在他的同名a list apart文章中首次描述。簡而言之，它涉及提供許多適合各種螢幕寬度的站點布局，然後通過使用css3**查詢來相應地提供這些布局。

用傑弗里·扎德曼（jeffrey zeldman）的一句話來形容：

這就是我們中的一些人在2023年代追求「液體」網頁設計的目的，只是它不會令人討厭。

一切都很好，但是您如何使用它呢？畢竟，涼爽

的孩子都

全部做，那麼為什麼不應該嗎？

在這個簡短的教程中，我將引導您完成乙個相當簡單的頁面設計，並在joni korpi的less framework 3的幫助下使其響應。「阿克！」我聽到你大喊；「 css框架適合失敗者！」從不畏懼。用其建立者的話來說，更少只是「或多或少」的框架。這些醜陋的「 .grid-24」類都不存在，相反，您會發現四種不同的常用解析度的一些重置樣式，一些合理的印刷預設設定以及四種具有相關正文寬度的**查詢。這四個布局包含一些有用的注釋，說明如何將它們劃分為對**比例友好的網格，但是是否這樣做完全取決於您。

因此，如果您從未測試過**查詢或響應式設計的水準，那麼less是乙個很好的入門方法，可以很快地看到一些結果。您可能會希望在設計進行過程中調整**查詢的確切詳細資訊，但這將很容易，因為沒有「框架」負擔讓您失望。減少只是乙個有用的起點。

所以，讓我們做這個事情！

對於初學者，請轉到。該站點本身很好地說明了響應式設計的功能，因此請抓住瀏覽器的調整大小手柄，並檢視頁面如何響應各種視口大小。當您玩完後（不用擔心，我可以等待），滾動到頁面底部。有一些自定義選項可用，文字區域包含輸出css和html框架。

就我們的示例而言，您可以保留所有預設選項為選中狀態。將html和css複製到適當命名的檔案中，然後在html檔案中更新style標籤的源，以指向css檔案。

如果立即在瀏覽器中彈出開啟html檔案，您將看到的是頁面上的乙個大藍框。調整瀏覽器的大小，您將看到它調整其尺寸，就像您希望的那樣。有了該基準之後，就該開始在我們自己的響應式布局上進行工作了。

為了便於說明，我們將列出乙個簡單的方法。我進行了快速的創用cc搜尋，以查詢一些要使用的內容。我從麗莎的廚房裡找到了印度鷹嘴豆和南瓜湯的食譜。

less框架提供了四個建議的網格，每個寬度對應乙個。這些由60畫素的列和24畫素的裝訂線組成。最窄的布局（主要用於縱向移動裝置，螢幕寬度為320px）為三列寬。接下來，針對高解析度移動裝置，狹窄的瀏覽器或橫向模式下的移動裝置，有五列布局，目標是480畫素的寬度。預設的八列布局，也將提供給那些不支援**查詢的瀏覽器（包括internet explorer），它的目標是舊的768px螢幕寬度，並且對於平板電腦和上網本也很有用。最後，有13列的布局用於1280畫素以上的螢幕，包括當前大多數台式電腦和具有良好瀏覽器的膝上型電腦。

對於我們的食譜，我們將使布局非常簡單。對於兩種較窄的布局，我們將採用單列設計，對於兩種較寬的布局，將採用兩列設計（配方的影象和建議的配方在邊欄中）。最寬的布局是13列60畫素寬，因此我們將內容和側邊欄之間的8-5拆分。下乙個最大的列是八列，我們將其拆分為5-3。

因為該示例僅是說明性的，並且由於大多數sitepoint讀者都使用現代的，複雜的瀏覽器瀏覽web，所以我將使用新的html5語義元素作為配方的標記。這是在他們最終統治世界之前熟悉他們的一種很酷的方法。

這是乙個骨架：

winter squash soups are a healthy ... rinse the chickpeas ... if you liked this recipe you may also enjoy: toor dal pumpkin soup ... this recipe is republished from ... >.

配方被標記作為article，將含有header中，兩個asides（每乙個用於影象和相關的食譜的列表）中，div為配方本身，和footer。在食譜div，有許多sections，每組成分各乙個，說明列表也各乙個。

讓我們從預設的八列布局開始。在樣式表中向下滾動到該部分（將在重置樣式和版式預設設定的下面）。我們的第乙個任務是設定主要內容的寬度div和asides和浮動它們彼此相對的：

article > div  
article > aside

您會注意到我正在使用子選擇器（>）。當然，這只是出於示例的目的，但是您可能需要依賴更傳統的選擇器，具體取決於您需要支援的瀏覽器，在這種情況下，您需要向標記新增一些class和id屬性。

這裡的數**算很簡單：主div是五列寬，在這些列之間包括四個裝訂線。因此，（5 x 60）+（4 x 24）=396。每邊的填充為24px，則div的寬度為348px。對於asides時，數學是（3×60）+（2×24）= 228的布局的整個寬度，然後由具有餘量的對於所述內容的24個畫素div。

這些樣式已經給我們提供了足夠好的兩列布局，儘管存在一些問題。首先，對於位於其中的列，影象太大。這很容易解決（我在某些邊界上也有一些陰影）：

article > aside img

我還為標題，段落和列表提供了一些預設樣式，但是由於這些樣式與布局無關，因此我將在此處跳過它們。您始終可以檢視最終示例的源**以檢視它們。

好的，現在我們有了預設的布局，讓我們繼續瀏覽樣式表。如您所見，下乙個布局是超寬1280px。在您自己的自適應設計中，您可能希望從兩列設計轉換為三列甚至四列設計，並重新組織整個布局以更好地利用所有可用空間。但是為了說明起見，讓我們擴大現有的布局：

@media only screen and (min-width: 1212px) 
article > div 
article > aside 
article > aside img 
}

請檢視@media宣告的語法：它說明所包含的css規則應僅適用於螢幕，然後僅適用於最小寬度為1212畫素的css規則。

有了這些規則，您現在應該可以擴大瀏覽器視窗的寬度，並在傳遞1212畫素時看到設計彈出到更大的尺寸。好，易於！

最後，讓我們處理用於移動裝置和較小螢幕的較窄的單列顯示器。這些都要求我們覆蓋float宣告，以將所有內容保留在同一列中。對於最小的布局（320畫素），我們還將減小所有字型大小以保持行長可讀：

@media only screen and (max-width: 767px) and (min-width: 480px) 
article > div, article > footer, article > aside 
article > div 
article > aside img 
}@media only screen and (max-width: 479px) 
article > div 
article > header > h1 
article > div > header > h2 
article > div, article > footer, article > aside 
p, section, aside, ul 
}

就是這樣！現在，您可以採用完全自適應的設計，以適應從智慧型手機到寬屏辦公顯示器的螢幕寬度。

**演示以了解實際操作。

響應式布局是使現有站點更容易被更多裝置訪問的好方法。但是，這並不是說就您的移動策略而言，您可以每天打**。正如傑夫·克羅夫特（ jeff croft）和其他人所指出的那樣，乙個好的移動**不僅僅限於狹窄的展示範圍。就是說，根據您的資源，您的受眾和**的焦點，完全響應式布局至少是支援移動裝置的第一步。

less框架3完全不是傳統意義上的框架，它是一種使用網格布局嘗試響應式設計並獲得此類工作所需的css語法和結構的好方法。一旦開始建立自己的響應式設計，就可以將其拋棄並從頭開始製作css，也可以將其用作啟動自己的響應式布局的藍圖。

from:

使用HTML5和Less框架3的自適應Web設計

HTML5框架背景和實體

HTML5開源框架 AmazeUI

html5移動應用框架

使用HTML5和Less框架3的自適應Web設計

HTML5框架 背景和實體

HTML5開源框架 AmazeUI

html5移動應用框架

相關推薦

HTML5框架背景和實體