<big id="n3dbt"><strong id="n3dbt"></strong></big>
      1. <small id="n3dbt"><delect id="n3dbt"></delect></small>

        <thead id="n3dbt"><ruby id="n3dbt"><rp id="n3dbt"></rp></ruby></thead>
        <th id="n3dbt"></th>
        <span id="n3dbt"></span><span id="n3dbt"></span><span id="n3dbt"></span><strike id="n3dbt"></strike>

        建站百科Website News

        當前位置:首頁 »史上較全的響應式設計資源庫

        史上較全的響應式設計資源庫

        至成科技 2015-03-15 訪問量(978) 評論(0)
        摘要:

        響應式設計起源:至成科技(西安網站制作)在2010年寫了一篇響應式的文章,宣揚這種新式的網頁設計思想,經過3年的發展,響應式設計得到了眾多設計師的承認。

        本文的目的在于至成科技(西安網站制作)為大家集中推薦一些較有價值的響應式設計資源。包含了CSS框架、在線工具、準備階段的工具等等。

        CSS 響應式框架

        這一部分主要介紹了一些較新的CSS響應式框架,更輕量,而且兼容性也不差。(Foundation,Skeleton是較為老式的CSS響應式框架)

        Girder
        Girder 使用了Sass silent classes (占位符,輸出時不會體現)在HTML中組織內容,標記能夠額外處理一些表象類(presentational classes ),比如 “unit_1of4″, “small-2″, “grid4″.

        responsive-design-1

        Cardinal
        Cardinal 是一個小型的、以”移動優先”為理念的CSS框架,默認樣式很實用。靈活的字體和響應式的柵格線系統。

        responsive-design-2

        Typeplate
        Typeplate是一款”排版初學者工具”. 一款簡約的Sass/CSS庫,能夠采用合適的手段處理作品。

        responsive-design-3

        Furatto
        Furatto 基于Sass,包含了JS插件,在Coffeescript中開發的,因此很容易閱讀。交互性很強,支持多種設備。

        http://icalialabs.github.io/furatto

        Kraken
        輕量、移動優先為理念的模板,適合前端開發者。

        responsive-design-5

        Gridism
        Gridism 是一款簡約的響應式柵格線系統,非常好用。

        responsive-design-6

        Sassaparilla
        Sassaparilla 使用了Sass以及Compass技術,讓響應式網頁設計變得簡單。注重于更好的版式布局,打造良好的閱讀節奏。讓編譯更加輕松。

        responsive-design-7

        Cool Kitten
        Cool Kitten是一款滾動視差響應式框架(個人較愛)

        responsive-design-8

        Responsive Boilerplate
        Responsive Boilerplate 極度簡約、非常輕量(2kb)的CSS柵格框架。易懂易用。

        responsive-design-9

        Javascript 響應式插件

        這些腳本要么是一小段代碼,要么是幾個文件,能夠實現網頁設計作品的響應式。大部分自動注釋,因此很方便使用。

        Responsive elements
        Responsive Elements 小型JS庫,能夠輕松實現元素的響應式。

        responsive-design-10

        jPanelMenu
        jPanelMenu 是一款jQuery插件,由一款面板式的菜單創建。CSS動畫更好的實現。

        responsive-design-11

        SelectNav.js
        SelectNav 是一款JS插件,能夠將網站的導航欄轉換為可選擇的下拉菜單。結合了Media Queries,能為移動設備節約空間。

        responsive-design-12

        Adapt.js
        Adapt.js 輕量級JS文件,在瀏覽器載入頁面前,能夠根據寬度,智能判定并載入CSS文件。

        responsive-design-13

        Masonry
        Masonry 是一款先進的jQuery插件,能夠打造動態、適應性的布局。能夠幫助重新排列元素。

        responsive-design-14

        RoyalSlider ($12)
        RoyalSlider 是一款很好用的jQuery圖庫或內容滾動插件,動效、響應式布局、支持觸控,很適合移動端。無論是滾動欄、幻燈片窗還是內容滾動欄、圖庫、視頻庫都能用其實現。

        responsive-design-15

        UberMenu – WordPress ($16)
        UberMenu 是一款非常友好的、高度定制化的、響應式的 Mega Menu WordPress插件。

        responsive-design-16

        Responsive Pricing Tables – WordPress ($15)
        CSS3 Responsive Web Pricing Tables Grids For WordPress CSS3 價格表,兩種價格表樣式,20種可選顏色,可選項豐富。

        responsive-design-17

        響應式設計——導航篇

        響應式設計中較難的部分大概就是導航了。即便你的導航菜單占地很小,但是移動端的設計依然很困難。傳統的網頁設計總是把導航菜單放在頁頂,以便用戶瀏覽。而響應式設計中,情況很復雜。這一環節,將推薦幾種不錯的解決方案。

        Responsive menu patterns

        responsive-design-18

        A Responsive Design Approach for Navigation (文章)

        responsive-design-19

        Flexnav
        FlexNav 是一款使用Media Queries和JS實現的多級菜單,支持觸控、懸停。符合”移動優先”理念。

        responsive-design-20

        Naver
        Naver一款面向響應式導航的jQuery插件

        responsive-design-21

        Navigataur
        Navigataur 是一款簡約的工具,幫助實現響應式導航菜單。

        responsive-design-22

        響應式設計——圖像

        如何根據瀏覽器尺寸、加載速度選擇圖片尺寸?

        CSS Fluid Image Techniques for Responsive Site Design (Article)
        Dudley Storey 創作的一篇先進文章,闡述了該要如何打造”伸縮自如”的圖像

        responsive-design-23

        Clown Car Technique for Responsive Images
        Estelle Weyl, 寫了一篇關于可縮放矢量圖形(SVG)的文章,生動有趣。

        responsive-design-24

        Responsive Img
        Responsive Img 是一款jQuery插件,能夠變換圖像的src屬性,主要根據的是容器的寬度。

        responsive-design-25

        響應式設計工具

        See your site responsive

        responsive-design-26

        Viewport Resizer
        Viewport Resizer 是一款在線工具能夠測試網頁設計是否符合響應式設計的標準。

        responsive-design-27

        Screenqueri.es
        Screenqueri.es 是一款細膩的響應式測試工具。能夠在30多種不同的設備上展示你的網頁設計。

        responsive-design-28

        Responsive Web CSS
        Responsive Web CSS 讓響應式網頁布局變得輕松。只需要添加div,設置一下不同設備上的大小即可。

        responsive-design-29 

        注意:本文肯定會有所遺漏,如果你有什么好資源,請推薦給至成科技(西安網站制作)喲!

             以上內容由至成科技(西安網站建設,西安網站制作)為您提供,更多精彩內容:http://www.vxdmg.com/

        關注“至成科技”微信公眾號,快速獲取互聯網較新資訊

        網友評論

        登錄后可評論,請登錄

        全部評論:0條

        掃描左側二維碼
        關注至成微信公眾號

        西安至成信息科技有限公司  Copyright 2012-2019  xazcit.com  All rights reserved.

        Email:[email protected]     郵政編碼:710016     《中華人民共和國增值電信業務經營許可證》陜B1.B2-20140011     陜ICP備12008874號-1

        聯系地址:西安市經開區鳳城四路西安國際企業中心B座23層06-10室    售前咨詢熱線:029-89390727    售后服務電話:029-89393039

        西安網站建設、網站設計制作公司-至成科技,已為眾多企業提供網站建設網站制作響應式網站設計手機網站建設虛擬主機云主機服務器租用等建站解決方案。

        網絡警察 12321垃圾信息舉報 不良信息舉報 中國文明網 西安工商
        ×
        安徽25选5计划