<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-04-01 訪問量(2006) 評論(0)
        摘要:


        CSS3 Media Queries

        上面演示的一些代碼范例是CSS2.1與CSS3通吃的。現在讓我們來看看怎樣使用CSS3專有的media queries功能來創建響應式Web設計。其中某些方法在當前就有切實的使用價值,不久的將來則一定會全部派上用場。

        min-widthmax-width這兩個屬性很靠譜。通過min-width的設置,我們可以在瀏覽器窗口或設備屏幕寬度高于這個值的情況下,為頁面指定一個特定的樣式表;max-width則反之。

        下面的幾個示例中,我們使用的是將多個media queries整合在單一樣式表中進行編碼的句法。如前文所述,這樣做更加高效,減少請求數量。

        @media screen and (min-width: 600px) {
             .hereIsMyClass {
                  width: 30%;
                  float: right;
             }
        }

        上面代碼中定義的類(hereIsMyClass)只有在瀏覽器或屏幕寬度超過600px時才會有效。

        @media screen and (max-width: 600px) {
             .aClassforSmallScreens {
                  clear: both;
                  font-size: 1.3em;
             }
        }

        而這段代碼的作用則相反:aClassforSmallScreens類只有在瀏覽器或屏幕寬度小于600px時才會有效。

        可以看出min-width和max-width可以同時判斷設備屏幕尺寸與瀏覽器實際寬度。有些時候,我們希望通過 media queries作用于某種特定的設備,而忽略其上運行的瀏覽器是否由于沒有較大化而在尺寸上與設備屏幕尺寸產生不一致的情況。這時,我們需要使用min-device-widthmax-device-width,用來判斷設備本身的屏幕尺寸。

        @media screen and (max-device-width: 480px) {
             .classForiPhoneDisplay {
                  font-size: 1.2em;
             }
        }
        @media screen and (min-device-width: 768px) {
             .minimumiPadWidth {
                  clear: both;
                  margin-bottom: 2px solid #ccc;
             }
        }

        還有一些其他方法,可以幫我們有效的使用media queries鎖定某些指定的設備。可以參考下面兩篇出自Thomas Maier的文章:

        CSS for iPhone 4 (Retina display)

        How To: CSS for the iPad

        對于iPad來說,orientation屬性尤其有用。它的值可以是landscape(橫屏)或portrait(豎屏)。

        @media screen and (orientation: landscape) {
             .iPadLandscape {
                  width: 30%;
                  float: right;
             }
        }
        @media screen and (orientation: portrait) {
             .iPadPortrait {
                  clear: both;
             }
        }

        不幸的是,這個屬性目前確實只在iPad上有效。對于其他可以轉屏的設備,譬如iPhone,可以使用min-device-width和max-device-width來變通實現;詳情可以參考”Determine iPhone orientation using CSS“一文。

        我們還可以將上述屬性組合使用,來鎖定某個屏幕尺寸范圍:

        @media screen and (min-width: 800px) and (max-width: 1200px) {
             .classForaMediumScreen {
                  background: #cc0000;
                  width: 30%;
                  float: right;
             }
        }

        上面的代碼可以作用于瀏覽器窗口或屏幕寬度在800px至1200px之間的所有設備。

        其實,很多設計師和開發者仍會選擇使用多個樣式表的方式來實現media queries。如果從資源的組織和維護的角度出發,其益處確實高于效率的損耗的話,那么這樣做也有效不壞:

        
        

        所以吶,凡事沒有絕對,較好根據實際情況決定使用media queries的方式。比如,對于iPad,我們可以將多個media queries直接寫在一個樣式表中。因為iPad用戶隨時有可能切換屏幕定向,這種情況下,要頁面在極短的時間內響應屏幕尺寸的調整,我們必須選擇 效率較高的方式。

        JavaScript

        JavaScript也是我們的武器之一,特別是當某些舊設備無法好支持CSS3的media query時,它可以作為后備支援。幸運的是,已經有專門的JS庫來幫助舊瀏覽器(IE 5+,Firefox 1+,Safari 2等)支持CSS3的media queries。使用方法很簡單,下載css3-mediaqueries.js并在你的頁面中調用它。

        而下面的代碼則演示了怎樣使用簡單的幾行jQuery代碼來檢測瀏覽器寬度,并為不同的情況調用不同的樣式表:

        
        

        類似這樣的解決方案還有很多。所以我們要清楚,media queries不是一個絕對先進的答案,它只是一個以純CSS方式實現響應式Web設計思路的手段。借助JavaScript,我們則可以實現更多的變化。這篇”Combining Media Queries and JavaScript“向我們展示了JavaScript配合media queries的更多細節信息。

        顯示或隱藏內容

        通過前文的學習,我們已經了解到,對于響應式Web設計,同比例縮減元素尺寸以及調整頁面結構布局,是兩個重要的方式方 法。但是對于頁面中的文字內 容信息來說,則不能簡單的只從”同比縮小”和”調整布局結構”這兩方面去處理。對于手機等移動設備來說,在文字內容方面,已經有了很多較佳實踐方式和指導 原則:簡化的導航、更易聚焦的內容、以信息列表代替傳統的多行文案內容等。

        響應式Web設計的思想,一方面要頁面元素及布局具有足夠的彈性,來兼容各類設備平臺和屏幕尺寸;另一方面,則是增強可讀性和易用性,幫助用戶在任何設備環境中都能更容易的獲取較重要的內容信息。

        有一條樣式代碼,我們已經使用了多年:

        display: none;

        我們可以在一個針對某類小屏幕設備的樣式表中使用它來隱藏掉頁面中的某些塊級元素,也可以使用前文的方法,通過JS判斷 當前硬件屏幕規格,在小屏幕設備的情況下直接為需要隱藏的元素添加工具類class。比如,對于手機類設備,我們可以隱藏掉大塊的文字內容區,而只顯示一 個簡單的導航結構,其中的導 航元素可以指向詳細內容頁面。

        注意,不要使用visibility: hidden的方式,因為這只能使元素在視覺上不做呈現;display屬性則可幫助我們設置整塊內容是否需要被輸出。對于移動設備來說,避免這些不必要的資源浪費還是很重要的。我們來看一個簡單的示例:

        圖中上半部分是大屏幕設備所顯示的完整頁面,下面的則是該頁面在小屏幕設備的呈現方式。頁面HTML代碼如下:

        	
        	
        
        

        Left Sidebar Content | Right Sidebar Content

        Main Content

        下面是默認的主樣式表,其中,我們要隱藏掉鏈接導航部分(sidebar-nav),因為默認樣式適用的設備屏幕會足夠大,足夠顯示包括兩個側邊欄在內的所有內容。

        #content{
            width: 54%;
            float: left;
            margin-right: 3%;
        }
        #sidebar-left{
            width: 20%;
            float: left;
            margin-right: 3%;
        }
        #sidebar-right{
            width: 20%;
            float: left;
        }
        .sidebar-nav{display: none;}

        下面是用于小屏幕移動設備的樣式表代碼。現在,我們要隱藏掉兩個側邊欄,并使sidebar-nav顯示出來。借助 JavaScript,當用戶點擊sidebar-nav中的鏈接時,對應的側邊欄可以恢復顯示。當然,觸發恢復顯示的方式有很多種,即可以通過JS改變 側邊欄的display屬性值, 也可以為其添加額外的布局樣式。

        #content{
            width: 100%;
        }
        #sidebar-left{
            display: none;
        }
        #sidebar-right{
            display: none;
        }
        .sidebar-nav{display: inline;}

        現在,我們的頁面已經可以隨著設備和屏幕規格的變更,響應式的做到元素的同比縮放、布局結構的改變、內容的優化調整。特 別是對于手機設備,我們還要 在實踐過程中注意一些該類設備共有的設計指導原則。比如,針對手機設備,使用一個特定的樣式,將頁面原有的文字導航元素變為更易操作的圖標形式。下面的一 些文章資源可作參考閱讀:

        Mobile Web Design Trends For 2009

        7 Usability Guidelines for Websites on Mobile Devices

        觸屏與鼠標

        觸屏設備已經成為主流。雖然目前多數觸屏設備還是小屏幕類型的產品,比如手機,但是市場上越來越多的大屏幕設備也開始使用觸屏技術;且不說iPad一類的平板電腦,就連一些筆記本和臺式機也加入了這一行列。比如HP Touchsmart tm2t,即使用傳統的鍵鼠設備,同時也加入了觸屏技術。

        相比于傳統的基于鼠標指針的互動,觸屏技術顯然帶來了截然不同的交互方式與相應的設計規范;兩者又有各自所適用的領域。 所幸,要使我們的設計方案同時滿足這兩類設備的規范,并非一件難事,只是有些地方需要注意。比如,觸屏設備無法反映CSS定義的hover行為及相應的樣 式,因為它沒有鼠標指針的概 念,手指點擊就是click行為。所以不要讓任何功能依賴于對hover狀態的觸發。

        有興趣的話,可以讀讀這篇”Designing for Touchscreen“, 這里提到的很多建議即有利于改進針對觸屏設備的設計方式,同時也不會削弱傳統鍵鼠設備上的用戶體驗。比如,放在頁面右側的導航列表可以對觸屏設備的用戶更 加友好。因為多數人習慣用右手點擊操作,而左手負責握住設備;這樣,放在右側的導航列表即方便右手的點擊,又可以避免被握著設備的左手不小心觸碰到。而這 一點與鍵鼠設備用戶的習慣有效不矛盾。

        結論

        這篇文章真是又臭又長,終于快完了。我們確實進入了web開發的新時代,隨著科技進步我們還會繼續優化我們的體驗。今天我們設計的網站應該能夠適應未來和現在,了解響應式web設計不需要太多的學習,他絕對比為每款設備提供設計方便的多。

        響應式web設計并不是較好的,這只是個單純的概念,它可以有效的提高用戶體驗但是卻不能有效解決。我們要面對不斷出現的新設備出現,找出一個更好的解決方案,不斷的改善用戶體驗。

        響應式web設計可以提供一個比較滿意的效果,他給廣泛的應用設備提供了一個自定義的解決方案,無論是一個老式舊筆記本還是較先進的設備都能夠獲得比較好的體驗,這才是作為網頁設計師較想看到的,設計師眼中只有用戶,用戶感覺好自己就高興,自己苦點累點又算什么呢?

        以上內容由至成科技(西安網站設計,西安網站制作)為您提供,更多精彩內容: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计划 吉林11选5任选推荐彩经网 福建十一选五前三直 天津时时彩专家杀号 福建休彩36选7走势图 香港六合彩博彩解料 新浪竞彩足球比分直扩播 世界排球锦标赛 中超足协杯决赛直播 篮球打法规则 白小姐开奖 香港赛马资料一码中特 山东福彩中心 河北快3走势图彩经网 内蒙古时时彩最快开奖 体育彩票让分胜负