整合營銷服務(wù)商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
長一段時間以來，都以為響應(yīng)式網(wǎng)站就是自適應(yīng)網(wǎng)站，這是兩個一樣的概念。后來機緣巧合認(rèn)識了一位前端大拿，給我好好上了一課，終于能把這兩種網(wǎng)站前端表現(xiàn)形式給講透了?，F(xiàn)摘錄如下：
1、響應(yīng)式網(wǎng)站由來
最開始網(wǎng)站都會被設(shè)計成固定寬度的頁面，最開始的PC顯示器的分辨率種類不多，因為當(dāng)時電腦本來就少，即使有變化也是 800、900、1050、1200等幾種。比如 GitHub的網(wǎng)頁就是固定寬度為1020px來定制的。
后來隨著顯示器越來越多，以及筆記本的普及，這種方式的頁面出現(xiàn)了問題。在大屏顯示器上整個頁面顯的特別小，在小屏顯示器上網(wǎng)頁又出現(xiàn)滾動條導(dǎo)致用戶體驗極其的差。為了解決在各種不同大小和分辨率的設(shè)備上如何正確顯示網(wǎng)站的問題，前前后后也出現(xiàn)了好多種方案。
提供不同版本：最開始的解決方法，是為不同的設(shè)備提供不同版本的網(wǎng)頁。比如一個站點為PC、Mobile、Pad提供三個不同的版本。這樣做固然保證了效果，但同時要維護好幾個版本比較麻煩，而且網(wǎng)站有多個入口，會大大增加系統(tǒng)架構(gòu)的復(fù)雜度。
自適應(yīng)：后來人們就開始想能不能"一次設(shè)計，普遍適用"，即讓同一個頁面自動適應(yīng)不同大小的設(shè)備，從而解決為不同設(shè)備提供不同版本的頁面問題。這就是所謂自適應(yīng)布局解決方案。
響應(yīng)式： 采用自適應(yīng)布局的話，如果設(shè)備太小，就算網(wǎng)頁能夠根據(jù)屏幕大小進行適配，但是在太小屏幕顯示內(nèi)容過多會看不清楚。為了解決這個問題而衍生出來的一種新的布局方式，那就是響應(yīng)式布局。
2、響應(yīng)式和自適應(yīng)的區(qū)別
先給出兩個具體例子讓大家直觀感受一下兩種的效果：
響應(yīng)式網(wǎng)站：https://www.microsoft.com/zh-cn/
自適應(yīng)網(wǎng)站：http://m.ctrip.com/html5/
響應(yīng)式和自適應(yīng)兩種布局方式都是為了解決在不同大小和分辨率的設(shè)備上正確顯示網(wǎng)頁的問題。不同的是兩種布局方式采取了不同的解決方法而矣。
最開始出現(xiàn)的一種新的布局方式其實是寬度自適應(yīng)布局。我們平時談?wù)摰淖赃m應(yīng)布局，大部分時候指的就是寬度自適應(yīng)布局。 自適應(yīng)是為了解決如何才能在不同大小和分辨率的設(shè)備上呈現(xiàn)同樣的網(wǎng)頁。在網(wǎng)頁內(nèi)容和布局主體保持基本不變的前提下，讓同一張個頁面自動適應(yīng)不同大小和分辨率的設(shè)備，根據(jù)設(shè)備屏幕寬度，自動調(diào)整網(wǎng)頁內(nèi)容大小。 如下圖所示：
自適應(yīng)布局：網(wǎng)頁內(nèi)容和布局完全一樣
從上圖可以看出采用自適應(yīng)布局的話，不管設(shè)備屏幕尺寸如何變化，打開同一個頁面看到的內(nèi)容和布局基本上是一樣的，不同的只是內(nèi)容的尺寸。
這樣就會引發(fā)一個問題，那就是如果設(shè)備太小，就算網(wǎng)頁能夠根據(jù)屏幕大小進行適配，但是在太小屏幕顯示內(nèi)容過多會看不清楚，從而極大損害用戶體驗。
響應(yīng)式布局正是為了解決這個問題而衍生出來的一種新的布局方式。它可以自動識別屏幕尺寸并做出相應(yīng)調(diào)整的網(wǎng)頁設(shè)計，頁面布局和展示的內(nèi)容可能會隨著屏幕尺寸變化而有所變化。如下圖所示：
響應(yīng)式布局：網(wǎng)頁內(nèi)容和布局隨著屏幕尺寸變化而變化
網(wǎng)絡(luò)上也有網(wǎng)友用這么一張圖來總結(jié)響應(yīng)式和自適應(yīng)的區(qū)別：
如上圖所示，對于同一個頁面（圖中的Html），如果用響應(yīng)式布局來處理的話，用不同設(shè)備（電腦、平板、手機）去訪問此頁面，最后看到的布局和內(nèi)容有很大不同。
而如果用自適應(yīng)布局去處理的話，那不管訪問設(shè)備如何的不同（上圖是三臺尺寸不一樣的手機），最后看到的頁面內(nèi)容和布局基本上還是一樣的，就是尺寸略有不同。
進一步詳細(xì)說明，如下圖所示，屏幕寬度大于720像素，則4張圖片并排在一行：
如果屏幕寬度在不大于720像素，則4張圖片分成兩行：
如果屏幕寬度在小于600像素話，網(wǎng)站主導(dǎo)航由平鋪變成了下拉：
其實響應(yīng)式和自適應(yīng)兩種布局方式從外觀上很難分辨，但從技術(shù)角度來說他們運行的機理不同。所以最后從技術(shù)角度再來總結(jié)一下兩者的區(qū)別：
響應(yīng)式布局不管使用什么設(shè)備都是在服務(wù)器把數(shù)據(jù)推送到瀏覽器后，腳本或CSS自行檢測設(shè)備屏幕大小后執(zhí)行對應(yīng)的樣式表內(nèi)容，并且一直通過本地腳本在監(jiān)聽屏幕大小的變化，隨時做出樣式響應(yīng)的變化，這是主動的。
自適應(yīng)是用戶請求訪問時會夾帶設(shè)備信息，服務(wù)器據(jù)此做出判斷并調(diào)適應(yīng)對應(yīng)設(shè)備樣式文件+HTML內(nèi)容+JS，返回給瀏覽器以這種方式響應(yīng)不同設(shè)備。
為了幫助小伙伴們更好的學(xué)習(xí)WEB前端，技術(shù)學(xué)派整理了WEB前端的相關(guān)學(xué)習(xí)視頻及學(xué)習(xí)路線圖。
關(guān)注“技術(shù)學(xué)派”后，評論轉(zhuǎn)發(fā)文章，私信回復(fù)：WEB前端
5自適應(yīng)是現(xiàn)在主流的技術(shù)，導(dǎo)航欄菜單是最常見的一種，今天我們一起來學(xué)習(xí)一下它是如何使用HTML，CSS和JavaScript來構(gòu)建響應(yīng)式導(dǎo)航欄和漢堡菜單的。
這就是它的樣子，是不是很熟悉呢？
H5導(dǎo)航菜單
好的，那就先從HTML開始：
<header class=”header”>
<nav class=”navbar”>
<a href=”#” class=”nav-logo”>WebDev.</a>
<ul class=”nav-menu”>
<li class=”nav-item”>
<a href=”#” class=”nav-link”>Services</a>
</li>
<li class=”nav-item”>
<a href=”#” class=”nav-link”>Blog</a>
</li>
<li class=”nav-item”>
<a href=”#” class=”nav-link”>About</a>
</li>
<li class=”nav-item”>
<a href=”#” class=”nav-link”>Contact</a>
</li>
</ul>
<div class=”hamburger”>
<span class=”bar”></span>
<span class=”bar”></span>
<span class=”bar”></span>
</div>
</nav>
</header>通過這些代碼，我們實現(xiàn)了：
以上就是我們需要的HTML代碼。
現(xiàn)在讓我們添加CSS樣式重置代碼
（此外，我們將導(dǎo)入所需的字體，并添加一些基本的CSS來重置所有的默認(rèn)樣式。）
@import url(‘https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,500;1,400&display=swap’);
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 62.5%;
font-family: ‘Roboto’, sans-serif;
}
li {
list-style: none;
}
a {
text-decoration: none;
}現(xiàn)在讓我們給每個元素逐個添加樣式：
header和navbar：
.header{
border-bottom: 1px solid #E2E8F0;
}
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 1.5rem;
}hamburger樣式：
.hamburger {
display: none;
}
.bar {
display: block;
width: 25px;
height: 3px;
margin: 5px auto;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
background-color: #101010;
}其他元素的基本樣式：
.nav-menu {
display: flex;
justify-content: space-between;
align-items: center;
}
.nav-item {
margin-left: 5rem;
}
.nav-link{
font-size: 1.6rem;
font-weight: 400;
color: #475569;
}
.nav-link:hover{
color: #482ff7;
}
.nav-logo {
font-size: 2.1rem;
font-weight: 500;
color: #482ff7;
}完成這些之后，看起來應(yīng)該是這樣的：
但是它不是響應(yīng)式的，所以我們還需要添加媒體查詢css代碼。
@media only screen and (max-width: 768px) {
.nav-menu {
position: fixed;
left: -100%;
top: 5rem;
flex-direction: column;
background-color: #fff;
width: 100%;
border-radius: 10px;
text-align: center;
transition: 0.3s;
box-shadow:
0 10px 27px rgba(0, 0, 0, 0.05);
}
.nav-menu.active {
left: 0;
}
.nav-item {
margin: 2.5rem 0;
}
.hamburger {
display: block;
cursor: pointer;
}
}這里媒體查詢就是通過設(shè)置position: fixed; left: -100%;來隱藏nav-menu。
此外，我們將hamburger設(shè)置為display: block;，所以現(xiàn)在可見。
我們還添加了一個額外的類.nav-menu.active，它在nav-menu上設(shè)置left: 0;?，F(xiàn)在，到了添加javascript的時候了，以便在我們單擊漢堡菜單時，會在nav-menu上添加此active類。
添加JavaScript
const hamburger=document.querySelector(“.hamburger”);
const navMenu=document.querySelector(“.nav-menu”);
hamburger.addEventListener(“click”, mobileMenu);
function mobileMenu() {
hamburger.classList.toggle(“active”);
navMenu.classList.toggle(“active”);
}此處的函數(shù)mobileMenu()在hamburger和nav-menu上也添加了一個active類，從而打開mobile menu。單擊hamburger時，我們可以使用hamburger上的active類來創(chuàng)建X動畫?，F(xiàn)在就開始做吧。
// Inside the Media Query.
.hamburger.active .bar:nth-child(2) {
opacity: 0;
}
.hamburger.active .bar:nth-child(1) {
transform: translateY(8px) rotate(45deg);
}
.hamburger.active .bar:nth-child(3) {
transform: translateY(-8px) rotate(-45deg);
}現(xiàn)在看起來應(yīng)該是這樣的：
但是有一個問題，當(dāng)我們單擊鏈接時，漢堡菜單不會關(guān)閉?，F(xiàn)在讓我們解決一下這個問題。
const navLink=document.querySelectorAll(“.nav-link”);
navLink.forEach(n=> n.addEventListener(“click”, closeMenu));
function closeMenu() {
hamburger.classList.remove(“active”);
navMenu.classList.remove(“active”);
}closeMenu()函數(shù)從nav-menu和hamburger中刪除active類，從而關(guān)閉mobile menu。
H5導(dǎo)航菜單就是這樣，實現(xiàn)了用HTML，CSS和javascript構(gòu)建一個響應(yīng)式的導(dǎo)航欄菜單。希望你喜歡并分享這篇文章。感謝大家的閱讀。
更多干貨等著你~ 點贊、分享，關(guān)注哦
TML5和CSS3的不斷風(fēng)行，對 的需求也越來越火，越來越受到開發(fā)者和設(shè)計師們的喜歡。不過大眾對響應(yīng)式框架卻有著不同的態(tài)度和觀點，一些人認(rèn)為一個懂HTML5和CSS3的專業(yè)設(shè)計師應(yīng)該自己寫框架，這樣才能做出別具特色的網(wǎng)站；另一些人覺得響應(yīng)式設(shè)計框架能夠方便設(shè)計師快速、有效的搭建出一個實用、漂亮的網(wǎng)站，在節(jié)省時間和精力等方面不可或缺。關(guān)于這個爭論我們易點科技還是比較支持后者的觀點。我們認(rèn)為即使是再有經(jīng)驗的Web前端開發(fā)人員也應(yīng)該好好研究一下 ，它能給我們提供一些借鑒意義和便利，在今天這個快速發(fā)展的時代，設(shè)計師動手寫框架做網(wǎng)站（合理安排柵格、布局、media queries ）實在太耗時了。另外，在使用響應(yīng)式框架時設(shè)計師也可以充分發(fā)揮自己的創(chuàng)造力，定制化一些特征，做出有新意的網(wǎng)站。今天我們就來介紹一些目前設(shè)計師經(jīng)常使用的響應(yīng)式框架，大家可以結(jié)合自己的實際需求合理選擇使用。
Bootstrap
Bootstrap是由Twitter推出的一個用于前端開發(fā)的開源工具包，它可謂是目前最流行的HTML5框架，用戶基數(shù)最大，在國內(nèi)的知名度也最高。Bootstrap的口號就是"簡單、直觀、強悍，讓web開發(fā)更迅速、簡單"，它也確實在努力達成這一點：基本涵蓋了構(gòu)建 的所有組件，如bootstrap編輯器、定制jQuery插件，能夠?qū)崿F(xiàn)自定義表單元素、Javascript交互性和跨瀏覽器兼容性等多項功能。對于大部分站長來說，Bootstrap方便簡單，搭建一個比較美觀的響應(yīng)式網(wǎng)站也很快速，是他們的頭號選擇。
不過，Bootstrap也并非無可挑剔。雖然Bootstrap能夠兼容Chrome、Firefox、Safari、Opera、360和搜狗等多個瀏覽器，但由于它是基于HTML5和CSS3開發(fā)的，一些特征對IE瀏覽器并不是那么友好，在IE瀏覽器上可能出現(xiàn)無法顯示等問題。還有，如果你的網(wǎng)站定制化設(shè)計的內(nèi)容太多，使用bootstrap作為框架底層進行修改一般會涉及到大量樣式的復(fù)寫，可能會造成CSS層級的混亂，不利于網(wǎng)站后期的維護。
Foundation
Foundation基于靈活的柵格，采用最新的技術(shù)，成為了先進的響應(yīng)式前端框架的代表。它的整體框架設(shè)計觀是以移動端為先，因此它很突出的一個特點就是在手機等移動設(shè)備上表現(xiàn)更好。與此同時，F(xiàn)oundation支持用戶使用定制化服務(wù)（定義柵格、顏色、字體大小等），提供了多種Web的UI組件，比如表單、按鈕等，在操作使用上也足夠靈活 。與Bootstrap受到廣泛使用相比，F(xiàn)oundation由于中文版文檔、教程較少在國內(nèi)顯得比較低調(diào)，不過也有不少站長認(rèn)為使用Bootstrap框架 的人實在是太多了，做出的網(wǎng)站都像一個模子刻出來的，無法讓自己的網(wǎng)站在一眾競爭對手中脫穎而出，此時反而會更傾向于使用Foundation以做出一個高大上、別具一格的網(wǎng)站。不過這個框架也有自己的缺點，那就是兼容性的問題，F(xiàn)oundation 4已經(jīng)放棄了對IE8的兼容，在國內(nèi)瀏覽器的大環(huán)境下Foundation的行為究竟是利還是弊，我們也不好輕易下定論。
Skeleton
相比前兩者來說，Skeleton在國內(nèi)用戶心目中沒有那么高的地位。它使用簡單的網(wǎng)格系統(tǒng)，有一系列CSS和JS文件的集合，這使得基于Skeleton的網(wǎng)站能夠根據(jù)不同分辨率的設(shè)備（電腦、平板、手機等）快速調(diào)整，能讓用戶界面更友好，優(yōu)化用戶體驗。雖然Skeleton只定義了部分標(biāo)準(zhǔn)HTML元素以及960px的標(biāo)準(zhǔn)模板，但并不影響一般網(wǎng)站的搭建需求。也正是因為這個原因它比較容易上手，尤其適合一些小項目的搭建。
Golden Grid System
如果你對網(wǎng)格系統(tǒng)很感興趣，Golden Grid System一定是你的不二之選。它一開始呈現(xiàn)為16列網(wǎng)格，但是你也可以將它折疊起來，將視窗縮小到8列或4列的布局，適應(yīng)平板和手機的瀏覽?？偨Y(jié)來說，它是為了增加 兼容性的折疊式網(wǎng)格，具有四個明顯的特征：列、跨頁、底線、script。使用Golden 柵格系統(tǒng)框架做網(wǎng)站有不少優(yōu)點，比如，可以幫助建立清晰、規(guī)則的排版，增加網(wǎng)頁的可讀性；作為網(wǎng)頁設(shè)計師和前端開發(fā)人員的橋梁，方便他們溝通；實現(xiàn)自適應(yīng)，改變布局響應(yīng)不同大小的屏幕。這么多好處，你還沒心動嗎？
Less Framework
Less Framework是經(jīng)典的響應(yīng)式框架之一，它是一款支持自適應(yīng)的CSS網(wǎng)格系統(tǒng)，涵蓋4種布局和3種字體預(yù)設(shè)來滿足電腦、平板、手機等不同視窗的需求。Less Framework的工作原理是基于一個單一的網(wǎng)格，改變布局列的數(shù)量和外邊緣的寬度來做出不同的布局。CSS作為一門非程式語言，對不少設(shè)計師來說都比較有難度，Less的出現(xiàn)恰好解決了這一問題，它大大簡化了CSS代碼的編寫，降低了網(wǎng)頁的維護成本，讓設(shè)計師可以用更少的代碼做出更出更好的網(wǎng)站。這一點跟它的名稱less相呼應(yīng)，難怪這么多設(shè)計師愛上了這個框架。
Gumby
如果你在 方面是個新手，Gumby框架對你來說絕對是個上手的好地方。 Gumby是一個基于SASS（一門CSS擴展語言解析器）響應(yīng)式的CSS框架，它自帶模板以及Web UI工具包，有各種好看的按鈕、表格、導(dǎo)航、標(biāo)簽、JS文件，響應(yīng)速度快。它還支持無編碼設(shè)計，就算你不懂技術(shù)操作起來也很簡單，很容易上手，在后期維護方面也沒有什么障礙。
320 and UP
這個框架首先面向小屏幕，使用一個小型的屏幕樣式表，包含了一些顏色、排版布局等設(shè)置屬性，確保了網(wǎng)站內(nèi)容的優(yōu)先。小屏幕都能適應(yīng)良好，在大屏幕上就更沒有什么問題了。
1140px CSS Grid System
一個響應(yīng)式網(wǎng)站并不僅僅意味著滿足小分辨率設(shè)備的需要，還需要在一般電腦屏幕上顯示良好的同時適應(yīng)更大分辨率的布局。1140網(wǎng)格框架就能夠做到這一點，它可以完美適應(yīng)1280分辨率顯示器。在較小的顯示器上，它可以根據(jù)瀏覽器的寬度變成流體形式，并自適應(yīng)瀏覽窗口。
以上就是有關(guān) 的介紹。不同的響應(yīng)式框架各有優(yōu)缺點，沒有一個響應(yīng)式框架是完美的。還有，要記住使用框架做網(wǎng)站并不意味著我們可以當(dāng)甩手掌柜，還是需要合理評估自己的需求，適當(dāng)?shù)淖远x一些內(nèi)容，將框架與自己的想法相結(jié)合，這樣才能充分發(fā)揮響應(yīng)式框架在網(wǎng)站建設(shè)中的積極作用，在節(jié)省時間的同時做出一個美觀、實用的響應(yīng)式網(wǎng)站。
當(dāng)然，如果您確實天生對代碼過敏，又想擁有一個高質(zhì)量易推廣的響應(yīng)式網(wǎng)站，那么也可以聯(lián)系我們易點科技，讓我們幫您實現(xiàn)夢想
*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
