先,響應(yīng)式網(wǎng)站設(shè)計(jì)(Responsive Web design)的理念是:頁(yè)面的設(shè)計(jì)與開發(fā)應(yīng)當(dāng)根據(jù)用戶行為以及設(shè)備環(huán)境(系統(tǒng)平臺(tái)、屏幕尺寸、屏幕定向等)進(jìn)行相應(yīng)的響應(yīng)和調(diào)整。
具體的實(shí)踐方式由多方面組成,包括彈性網(wǎng)格和布局、圖片、CSS media query的使用等。無論用戶正在使用筆記本還是iPad,我們的頁(yè)面都應(yīng)該能夠自動(dòng)切換分辨率、圖片尺寸及相關(guān)腳本功能等,以適應(yīng)不同設(shè)備;換句話說,頁(yè)面應(yīng)該有能力去自動(dòng)響應(yīng)用戶的設(shè)備環(huán)境。響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)就是一個(gè)網(wǎng)站能夠兼容多個(gè)終端——而不是為每個(gè)終端做一個(gè)特定的版本。
隨著移動(dòng)設(shè)備的逐漸普及和Web技術(shù)的發(fā)展,跨端的Web開發(fā)需求將會(huì)越來越大。如何在多種設(shè)備上進(jìn)行跨端的界面適配呢?我們可以利用CSS3的Media Query來實(shí)現(xiàn)。今天小編主要講的是移動(dòng)開發(fā)和CSS3結(jié)合,來進(jìn)行多種分辨率適配的例子。
對(duì)新手來說,響應(yīng)式設(shè)計(jì)可能有一點(diǎn)復(fù)雜,但是事實(shí)上比你想象的簡(jiǎn)單。為了幫助大家迅速的了解響應(yīng)式設(shè)計(jì),小編我寫了這篇快速教程。讓大家可以在3個(gè)步驟中學(xué)習(xí)到響應(yīng)式設(shè)計(jì)和媒介查詢(Media Queries)的基本原理(假定你了解基本的CSS知識(shí))。
第一步:Meta標(biāo)簽
大多數(shù)移動(dòng)瀏覽器將HTML頁(yè)面放大為寬的視圖(viewport)以符合屏幕分辨率。你可以使用視圖的meta標(biāo)簽來進(jìn)行重置。下面的視圖標(biāo)簽告訴瀏覽器,使用設(shè)備的寬度作為視圖寬度并禁止初始的縮放。在<head>標(biāo)簽里加入這個(gè)meta標(biāo)簽。
[html] view plaincopy
<meta name="viewport" content="width=device-width, initial-scale=1.0">
IE8或者更早的瀏覽器并不支持Media Query。你可以使用media-queries.js或者respond.js來為IE添加Media Query支持。
[html] view plaincopy
<!--[if lt IE 9]>
<![endif]-->
第二步:HTML結(jié)構(gòu)
在這個(gè)例子里,我有一個(gè)包括頭部、內(nèi)容、側(cè)邊欄和頁(yè)腳的基本頁(yè)面布局。頭部有固定的高度180像素,內(nèi)容容器是600像素而側(cè)邊欄是300像素。
第三步:媒介查詢-Media Queries
CSS3 Media Query-媒介查詢是響應(yīng)式設(shè)計(jì)的核心。它根據(jù)條件告訴瀏覽器如何為指定視圖寬度渲染頁(yè)面。
當(dāng)視圖寬度為小于等于980像素時(shí),如下規(guī)則將會(huì)生效。基本上,我會(huì)將所有的容器寬度從像素值設(shè)置為百分比以使得容器大小自適應(yīng)。
然后為小于等于700像素的視圖指定#content和#sidebar的寬度為自適應(yīng)并且清除浮動(dòng),使得這些容器按全寬度顯示。
對(duì)于小于等于480像素(手機(jī)屏幕)的情況,將#header元素的高度設(shè)置為自適應(yīng),將h1的字體大小修改為24像素并隱藏側(cè)邊欄。
大家可以根據(jù)你的喜好添加足夠多的媒介查詢。我在示例中僅僅展示了3個(gè)媒介查詢。媒介查詢的目的在于為指定的視圖寬度指定不同的CSS規(guī)則,來實(shí)現(xiàn)不同的布局。媒介查詢可以寫在同一個(gè)或者單獨(dú)的樣式表中。
響應(yīng)式的設(shè)計(jì)如今在不斷變化,不斷創(chuàng)新。這讓以前的設(shè)計(jì)想法土崩瓦解。而各種Web的響應(yīng)式設(shè)計(jì)也獲得了越來越多的注意,“讓人們忘記設(shè)備尺寸”的理念將更快地驅(qū)動(dòng)響應(yīng)式設(shè)計(jì),所以Web設(shè)計(jì)也將迎來更多的響應(yīng)式設(shè)計(jì)元素。
今天的文章到此結(jié)束了,想知道更多請(qǐng)關(guān)注我們的公眾好“kelegeji”新號(hào)建設(shè)中,請(qǐng)大家多多包涵,多多指教。我們的官方網(wǎng)站是http://www.kelgj.com(目前在備案中,現(xiàn)在可以訪問http://klgj.yunde168.com找到我們。)
使用ProgressBar.js,可以輕松地為Web創(chuàng)建響應(yīng)式和時(shí)尚的進(jìn)度欄。即使在移動(dòng)設(shè)備上動(dòng)畫效果也表現(xiàn)良好。它提供了一些內(nèi)置形狀,如“直線”,“圓”和“半圓”,但是你也可以使用任何矢量圖形編輯器創(chuàng)建自定義形狀的進(jìn)度條。ProgressBar.js是輕量級(jí)的,MIT開源許可,并支持包括IE9 +在內(nèi)的所有主要瀏覽器。
https://github.com/kimmobrunfeldt/progressbar.js
以下是最簡(jiǎn)單的一個(gè)實(shí)例,從0大100%的進(jìn)度條顯示
<div></div>
var ProgressBar=require('progressbar.js'); // HTML var bar=new ProgressBar.Line('#container', {easing: 'easeInOut'}); bar.animate(1); // Value from 0.0 to 1.0
以下是線、圓、半圓以及自定義形狀的效果圖,可以直接到文檔查看動(dòng)態(tài)的效果
bower install progressbar.js //or npm install progressbar.js
var ProgressBar=require('progressbar.js') var line=new ProgressBar.Line('#container');
require.config({ paths: {'progressbar': '../bower_components/progressbar.js/dist/progressbar'} }); define(['progressbar'], function(ProgressBar) { var line=new ProgressBar.Line('#container'); });
// If you aren't using any module loader, progressbar.js exposes // global variable: window.ProgressBar var line=new ProgressBar.Line('#container');
var circle=new ProgressBar.Circle('#example-percent-container', { color: '#FCB03C', strokeWidth: 3, trailWidth: 1, text: { value: '0' } });
https://github.com/kimmobrunfeldt/react-progressbar.js
在常見的Web開發(fā)中經(jīng)常看到有些地方需要進(jìn)度條顯示或者類似的需求,如果你的項(xiàng)目并不是很龐大,但有些時(shí)候又不需要一些第三方框架的時(shí)候就可以使用這些獨(dú)立的庫(kù)來完成你想要的功能!
今互聯(lián)網(wǎng)行業(yè),越來越注重網(wǎng)站的美觀性和易用性,一個(gè)優(yōu)秀的網(wǎng)站或者系統(tǒng),除了功能強(qiáng)大和內(nèi)容全面,它的頁(yè)面也要美觀、易用,富有設(shè)計(jì)感,而html5+css3的響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)就顯得尤為重要。它會(huì)使你的網(wǎng)站或者系統(tǒng)看起來很有設(shè)計(jì)感,很符合現(xiàn)代互聯(lián)網(wǎng)的科技感,而不是那種只在乎功能不在乎體驗(yàn)的老舊設(shè)計(jì)思想。
而今天小編給大家分享的就是web前端技術(shù),html5+css3的響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)視頻教程,小伙伴可以通過該視頻系統(tǒng)學(xué)習(xí)一個(gè)優(yōu)秀的網(wǎng)站需要怎么設(shè)計(jì),也會(huì)掌握相關(guān)的前端技術(shù)。
有需要的同學(xué),請(qǐng)關(guān)注小編后,給小編發(fā)送私信“web前端”,即可獲得下載地址,也請(qǐng)各位同學(xué)給小編點(diǎn)贊,如果能轉(zhuǎn)發(fā)收藏那就更感謝了。可以讓更多有需要的同學(xué)看到分享,共同學(xué)習(xí)進(jìn)步。打造和諧、共享的IT互聯(lián)網(wǎng)環(huán)境。
*請(qǐng)認(rèn)真填寫需求信息,我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。