整合營(yíng)銷(xiāo)服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線(xiàn)：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線(xiàn)：
這里小編為大家總結(jié)了一些HTML5響應(yīng)式Web開(kāi)發(fā)框架，沒(méi)有最好，只有更合適，每個(gè)人都可以根據(jù)自己的工作需求和項(xiàng)目選擇不同的開(kāi)發(fā)框架。
GroundworkCSS2是一款響應(yīng)式HTML5、CSS以及JavaScript框架。這套框架擁有一套強(qiáng)大的網(wǎng)格系統(tǒng)外加對(duì)應(yīng)劃分功能，足以滿(mǎn)足各類(lèi)臺(tái)式機(jī)、智能手機(jī)以及平板設(shè)備的需要。
其網(wǎng)站還提供數(shù)量可觀(guān)的使用示例及說(shuō)明文檔，足以幫助大家快速實(shí)現(xiàn)原型設(shè)計(jì)以及面向標(biāo)準(zhǔn)網(wǎng)站、電子商務(wù)網(wǎng)站以及圖片庫(kù)等應(yīng)用場(chǎng)景的布局模板。
值得強(qiáng)調(diào)的是，這套框架還提供其它一些功能，例如響應(yīng)式文本以及易于定制特性。
MontageJS是一套極具人氣的HTML5框架，其專(zhuān)長(zhǎng)之處在于支持高性能與可擴(kuò)展性Web應(yīng)用的開(kāi)發(fā)。這套框架提供一系列面向組件的HTML模板，從而幫助這些組件擺脫對(duì)JavaScript或者CSS的依賴(lài)性。
它還提供一套模塊化方法，能夠?qū)崿F(xiàn)組件的可復(fù)用性及代碼組織。另外，MontageJS的其它優(yōu)勢(shì)還包括基于云的視覺(jué)創(chuàng)作環(huán)境、功能性反應(yīng)綁定(簡(jiǎn)稱(chēng)FRB)以及隱含事件代理等等。
52Framework是一套強(qiáng)大的前端開(kāi)發(fā)框架，其能夠充分發(fā)揮HTML5、CSS3以及JavaScript的可觀(guān)潛能。
這套框架當(dāng)中捆綁有大量?jī)?nèi)置功能，具體包括HTML5視頻播放器、HTML5表單驗(yàn)證、CSS3屬性、網(wǎng)格系統(tǒng)以及HTML5canvas示例等。
TwitterBootstrap是一套強(qiáng)大的前端框架，能夠利用HTML、CSS以及JavaScript快速簡(jiǎn)單地實(shí)現(xiàn)Web應(yīng)用開(kāi)發(fā)任務(wù)。
這套框架為開(kāi)發(fā)人員提供一系列極具實(shí)用性的功能，具體包括一套12列響應(yīng)式網(wǎng)格系統(tǒng)、JavaScript插件外加HTML元素等等。
它還提供一系列可復(fù)用組件，從而實(shí)現(xiàn)導(dǎo)航、下拉菜單、面包屑導(dǎo)航、排版、提醒以及進(jìn)度條等功能。
SproutCore是一款高人氣前端框架，且利用MVC架構(gòu)規(guī)范構(gòu)建而成。立足于HTML5的強(qiáng)大能力，它允許我們通過(guò)高效客戶(hù)端邏輯與高質(zhì)量主題特性構(gòu)建出運(yùn)行速度出色且具備可擴(kuò)展能力的Web應(yīng)用程序。
Foundation是目前網(wǎng)絡(luò)社區(qū)內(nèi)應(yīng)用范圍最廣的前端開(kāi)發(fā)框架之一。這套框架能夠提供一系列覆蓋其網(wǎng)格系統(tǒng)的布局選項(xiàng)，同時(shí)具備多種現(xiàn)代功能特性，包括復(fù)雜布局、動(dòng)畫(huà)效果、快速原型設(shè)計(jì)以及更多。
它還提供數(shù)套內(nèi)置HTML模板，幫助大家快速開(kāi)發(fā)出各類(lèi)網(wǎng)站與網(wǎng)頁(yè)成果，具體包括電子商務(wù)首頁(yè)、旅行網(wǎng)站、在線(xiàn)雜志、博客站點(diǎn)以及產(chǎn)品頁(yè)面等。
Base是一款輕量級(jí)、模塊化HTML/CSS框架，能夠幫助我們開(kāi)發(fā)出各類(lèi)極為出色的網(wǎng)站應(yīng)用。
Base的設(shè)計(jì)目標(biāo)在于同各類(lèi)新型與早期瀏覽器相兼容，并能夠順暢運(yùn)行在各類(lèi)移動(dòng)設(shè)備之上，而這種能力也使其成為一套強(qiáng)大的跨平臺(tái)及響應(yīng)式前端HTML5框架。
另外，Base框架還在其官方網(wǎng)站上提供一系列免費(fèi)的單頁(yè)面網(wǎng)站設(shè)計(jì)模板供大家使用。
OnsenUI是一套基于元素的定制化HTML5UI框架，且具備響應(yīng)式布局支持能力。這套框架提供相當(dāng)廣泛的WebUI組件選項(xiàng)。
它也支持PhoneGap與Cordova，意味著其能夠輕松完成混合型應(yīng)用的開(kāi)發(fā)任務(wù)。OnsenUI的最大優(yōu)勢(shì)在于能夠同jQuery庫(kù)或者Angular.js框架快速結(jié)合，從而顯著提高使用效率。
Enyo是一款先進(jìn)的前端開(kāi)發(fā)框架，適用于開(kāi)發(fā)與原生應(yīng)用類(lèi)似的HTML5應(yīng)用。
它還是一款極具人氣的跨平臺(tái)框架，目前被廣泛用于開(kāi)發(fā)各類(lèi)響應(yīng)式與主流Web應(yīng)用，具體包括blogWalker、ENotes、GrouponMobile應(yīng)用以及Confero等等。
Enyo提供一系列功能特性，例如UI組件、功能部件、事件處理以及調(diào)試能力等等。
Ionic是一套先進(jìn)的HTML5框架，主要用于混合型移動(dòng)應(yīng)用的開(kāi)發(fā)工作。
這套框架在Angular.js支持方面經(jīng)過(guò)優(yōu)化，且提供相當(dāng)豐富的HTML、CSS以及JavaScript組件。
其還擁有一套強(qiáng)大的命令行界面(簡(jiǎn)稱(chēng)CLI)，其中的卓越功能包括實(shí)時(shí)重載與日志記錄整合，這意味著我們能夠更為輕松地跨越不同平臺(tái)對(duì)Ionic應(yīng)用進(jìn)行開(kāi)發(fā)、測(cè)試與部署。
「鏈接」
個(gè)網(wǎng)站長(zhǎng)得好看能吃嗎？還真能！一個(gè)“秀色可餐”的網(wǎng)站不僅能增加人們的食欲，還能讓你的營(yíng)業(yè)額蹭蹭往上漲！但是，一個(gè)長(zhǎng)得好看卻只能活在電腦端的網(wǎng)站，真的不能吃！2016年，已經(jīng)有超過(guò)80%的網(wǎng)民有在移動(dòng)端購(gòu)物的經(jīng)歷，如果你的網(wǎng)站不能在移動(dòng)端“顏值在線(xiàn)”，就別怪客戶(hù)都被別家攬走了！
解決的辦法只有一個(gè)，就是把自家網(wǎng)站做成響應(yīng)式的。要么也可以另外開(kāi)發(fā)移動(dòng)站。要把網(wǎng)站變成響應(yīng)式網(wǎng)站，給大家說(shuō)三個(gè)簡(jiǎn)單的步驟。
1.布局
在建響應(yīng)式布局的時(shí)候，最好先建一個(gè)非響應(yīng)式的布局，測(cè)試沒(méi)問(wèn)題后，再把布局改成響應(yīng)式的，添加響應(yīng)式代碼和媒體查詢(xún)。
在HTML頁(yè)面的<head>和</head>標(biāo)簽之間復(fù)制以下代碼：
媒體查詢(xún)的意思是根據(jù)不同設(shè)備設(shè)置不同的布局樣式。媒體查詢(xún)?nèi)Q于網(wǎng)站布局，我們可以這樣定義：第一個(gè)，適合平板電腦橫向顯示，最大寬度為1060PX，#primary 占在其父容器寬度的67%，#senondary 占30%，再加上3%的左外邊距。 第二個(gè)，適合豎向平板電腦和更小的屏幕尺寸。
編碼完成后，可以測(cè)試下布局是怎么響應(yīng)的。
2.媒體
響應(yīng)式布局是響應(yīng)式網(wǎng)站的“骨架”，媒體元素（視頻、圖像）是響應(yīng)式網(wǎng)站的“皮肉”。
下面這段CSS代碼能讓你的網(wǎng)站圖像不超過(guò)顯示終端尺寸。
用CSS3 來(lái)為匹配 min-device-width 條件的媒體指定替換圖像：
圖像能這樣設(shè)置，怎樣實(shí)現(xiàn)響應(yīng)式的視頻呢？
HTML：
CSS：
3.字體
CSS3 規(guī)范引入了一個(gè)新的單位叫 rem，和 em 類(lèi)相似，但相對(duì)于 HTML 元素來(lái)說(shuō)， rem 更易于使用。
rem 是相對(duì)于 HTML 元素的，不要忘了重置 HTML 的字體大小：
完成后，您可以定義響應(yīng)式的字體大小，如下所示：
完成這三步后，你就能擁有一個(gè)響應(yīng)式的網(wǎng)站了。不過(guò)這個(gè)教程對(duì)大部分用戶(hù)來(lái)說(shuō)，還是有點(diǎn)復(fù)雜了。如果不會(huì)程序，是不是就不能做響應(yīng)式網(wǎng)站了呢？并不是。目前一些自助建站工具已經(jīng)非常強(qiáng)大，以建站寶盒為代表的H5模板建站，非常適合不懂編程的小白。拖拽操作，能打字就能建站，網(wǎng)站做出來(lái)高端大氣，尤其適合要做營(yíng)銷(xiāo)型響應(yīng)式網(wǎng)站的企業(yè)。
零基礎(chǔ)建響應(yīng)式網(wǎng)站：http://www.iisp.com/design/?s=yuqiuping
機(jī)、平板燈手持設(shè)備的增多，網(wǎng)站要順應(yīng)變化，就必須要做響應(yīng)式開(kāi)發(fā)，響應(yīng)式網(wǎng)站最大的特點(diǎn)在于可以在不同設(shè)備下呈現(xiàn)不同的布局，是基于html5+css3技術(shù)，目前越來(lái)越多的網(wǎng)站開(kāi)始采用了響應(yīng)式設(shè)計(jì)，而下面15款工具可以方便測(cè)試你的html5響應(yīng)式效果。
Responsinator
http://www.responsinator.com/
Responsinator提供了大家在不同設(shè)備viewport下查看網(wǎng)站效果的特性，提供了iphone，android，ipad，kindle及其多種設(shè)備上的預(yù)覽效果，你可以方便的看到需要支持的設(shè)備的響應(yīng)式設(shè)計(jì)效果圖。
Responsive.is
http://responsive.is/
responsive提供了5種設(shè)備下的預(yù)覽效果展示
Kuapingce
http://www.kuapingce.com/
跨屏測(cè) 取自“跨屏”+“評(píng)測(cè)”，結(jié)合在一起取名 跨屏測(cè)，網(wǎng)址是跨屏測(cè)的拼音 ，創(chuàng)建于2015年12月。它是國(guó)內(nèi)首個(gè)致力于跨屏幕響應(yīng)式測(cè)試的工具類(lèi)的產(chǎn)品，目的是為了幫助你查看你的網(wǎng)站的跨屏幕（響應(yīng)式）效果，跨屏測(cè)收集了主流屏幕的尺寸大小，方便你快速了解網(wǎng)站在不同設(shè)備下的樣子。
Responsive Web Design Testing Tool
http://mattkersley.com/responsive/
類(lèi)似responsivator，但是界面更簡(jiǎn)單
Responsivepx
http://responsivepx.com/?m.gbin1.com#1035x480&scrollbars
允許你用拖動(dòng)的方式來(lái)修改窗口大小，模擬不同的設(shè)備屏幕
screenqueri.es
http://screenqueri.es/
它支持localhost本地方式測(cè)試你的應(yīng)用或者網(wǎng)站。
Aptus
https://itunes.apple.com/gb/app/aptus/id510487565?mt=12
一個(gè)工具類(lèi)的瀏覽器，可以幫助你測(cè)試響應(yīng)式設(shè)計(jì)
Bricss
http://www.benjaminkeen.com/open ... design-bookmarklet/
一個(gè)幫助你測(cè)試響應(yīng)式的書(shū)簽，你可以方便的整合到你的瀏覽器里
Izilla Media Query Debugger
http://izilla.com.au/git/izilla.mq.debugger.bookmarklet.html
這個(gè)js可以幫助你添加偽元素到body元素上用來(lái)偵測(cè)寬高 ，當(dāng)然你也可以使用他們提供的bookmark：http://izilla.com.au/git/izilla.mq.debugger.bookmarklet.html
Screenfly
http://quirktools.com/screenfly/
支持4種設(shè)備的在線(xiàn)響應(yīng)式設(shè)計(jì)測(cè)試工具，并且還提供相關(guān)開(kāi)發(fā)的設(shè)計(jì)圖和文檔。
ViewPort Resizer
http://lab.maltewassermann.com/viewport-resizer/
另外一個(gè)書(shū)簽式的工具
Jresizer
http://www.toddmotto.com/jresize ... ponsive-development
一個(gè)jQuery的響應(yīng)式開(kāi)發(fā)工具插件，幫助你創(chuàng)建響應(yīng)式的窗口，方便你的開(kāi)發(fā)和設(shè)計(jì)流程
Resize My Browser
http://resizemybrowser.com/
一個(gè)簡(jiǎn)單的幫助你創(chuàng)建指定寬高新開(kāi)窗口的web工具
juicer
http://juicecreative.co.uk/juicer/website/index.php
一個(gè)在線(xiàn)的展示響應(yīng)式的工具，支持iphone，android等設(shè)備的顯示，帶有實(shí)物圖。
ish
http://bradfrostweb.com/demo/ish/
一個(gè)比較新的在線(xiàn)查看響應(yīng)式效果的web工具，支持不同尺寸的展示。
原文地址：http://bbs.qietu.cn/forum.php?mod=viewthread&tid=15059
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
