SUNBET

  • <tr id='ickVhn'><strong id='ickVhn'></strong><small id='ickVhn'></small><button id='ickVhn'></button><li id='ickVhn'><noscript id='ickVhn'><big id='ickVhn'></big><dt id='ickVhn'></dt></noscript></li></tr><ol id='ickVhn'><option id='ickVhn'><table id='ickVhn'><blockquote id='ickVhn'><tbody id='ickVhn'></tbody></blockquote></table></option></ol><u id='ickVhn'></u><kbd id='ickVhn'><kbd id='ickVhn'></kbd></kbd>

    <code id='ickVhn'><strong id='ickVhn'></strong></code>

    <fieldset id='ickVhn'></fieldset>
          <span id='ickVhn'></span>

              <ins id='ickVhn'></ins>
              <acronym id='ickVhn'><em id='ickVhn'></em><td id='ickVhn'><div id='ickVhn'></div></td></acronym><address id='ickVhn'><big id='ickVhn'><big id='ickVhn'></big><legend id='ickVhn'></legend></big></address>

              <i id='ickVhn'><div id='ickVhn'><ins id='ickVhn'></ins></div></i>
              <i id='ickVhn'></i>
            1. <dl id='ickVhn'></dl>
              1. <blockquote id='ickVhn'><q id='ickVhn'><noscript id='ickVhn'></noscript><dt id='ickVhn'></dt></q></blockquote><noframes id='ickVhn'><i id='ickVhn'></i>
                0411-39943997
                工作時間:周一至周日 8:30-22:00
                設計知識
                News and information

                響應式設計 vs 適應式設計圖文對比

                標簽:瀏覽次數:?? 時間:2019-08-29

                響應式設計 vs 適應式設計

                看似相同實則不然。這兩種設計方式彼此相輔相成,所以說也沒有對錯之分。具體情況要依內容而定。


                1.gif

                內容流

                隨著屏幕尺寸越來越小,內容所占的垂直空間也越來越多,也就是說,內容會向下方延伸,這就叫做內容流。如果你習慣了使用像素和點進行設計,可能會覺得這個有點難掌握。不過沒關系,習慣了就很好理解了。

                內容流

                相對單位

                你的設計對象可能是臺式桌面,也可能是移動端屏幕或者介於兩者之間的任意屏幕類型。像素密度也會彼此不同,所以我們需要使用靈活可變,並且能夠適應各種情況的單位。那麽在這種情況下,百分比等相對單位就派上用場了。使用百分比時,我們說寬度█50%就是表示寬度占屏幕大小(或者叫視區,也就是指所打開瀏覽器窗口的大小)的一半。

                相對單位

                斷點

                斷點可以讓頁面布局在預設的點進行變形,也就是說,在臺式桌面上顯示3欄,在移動設備上僅顯示1欄。大多數CSS屬性都可以實現斷點之間的變形。斷點放置的位置通常取決於內容。比如,如果一句話要換行,你可能就需要加上斷點。但斷點使用時需要謹慎——如果搞不清內容之間的邏輯關系,很容易弄的一團亂。

                斷點

                最大和最小值

                有時候內容占滿整個屏幕寬度(例如在移動設備上)是好事,但如果相同的內容在電視屏幕上也撐得滿滿的,貌似就不太合理了。這就是為什麽要有最大/最小值。例如,如果寬度為100%,最大寬度1000px,那麽內容就會以不超過1000px的寬度填充屏幕。

                 最大和最小值

                嵌套對象

                還記得相對位▓置嗎?如果一大堆要素彼此都緊密聯系,那麽必將難以控制。因此,將要素放置到容器中就會讓它們變得更加好理解,並且簡潔明快。這種情況就需要用到像素之類的靜態單位了。靜態單位對於logo和按鈕等不需要擴展的內容來說非常有用。

                 嵌套對象

                移動優先還是臺式桌面優先

                嚴格來說,項目從小屏幕入手過渡到大屏幕(移動優先),還是從大屏幕入手過渡到小屏幕(臺式桌面優先)區別不大。但是,從移動端著手可以給你帶來一些額外的限制,幫助你進▓行決策。通常情況下大家會從兩方面同時著手,所以你還是要看哪種方式最適合你。

                移動優先還是臺式桌面優先

                Web字體 vs 系統字體

                想讓自己的網站擁有炫酷的Futura或Didot效果嗎?那就是用web字體吧。盡管web字體看起來很炫酷,但你要記住,這些字體都需要用戶下載,字越多,用戶加載頁面的時間也就越長。另一方面,系統字體加載速度則快得多(前提是用戶本機就有),但太過普通。

                Web字體 vs 系統字體

                位圖 vs 矢量圖

                你的圖標是否有很多細節,並且應用了很多華麗的效果?如果是,那就用位圖。如果不是,考慮使用矢量圖。如果是位圖,使用jpg、png或gif。矢量圖則最好使用SVG或圖標字體。其各有利弊。但你要時刻牢記圖標尺寸——未經過優化的圖片不能傳到網上。另一方面,矢量圖通常比較小,不過部分比較老的瀏覽器可能不支持矢量圖。還有,如果圖標有很多曲線,那有可能會比位圖還大,所以要明智取舍。

                位圖 vs 矢量圖

                響應式網站的優點: 

                1.跨平臺
                在手機,pad,電腦上均有不俗的表現。
                2.節省人力開發成本。
                不再需要有人特地維護PC頁面,移動頁面。
                3.表現力一致
                在不同的平臺上看到的東西都是基本一致的,會讓感覺體驗良好。


                響應式網站的缺點:

                1.自由度太低,局限性較大。
                需要考慮在手機,pad,PC上三種屏幕下的頁面內元素的呈現,會導致有著非常大的局限,比如說在PC上是橫向滑動的通欄圖,但是▓在手機和pad就是不用的。所以,你就只能用一張單一的圖或者一組靜態圖來表達。
                2.頁面會比較大,在當前國內2G,3G網絡下打開速度會比較慢。
                由於響應式頁面是同時下載多套CSS樣式代碼,可能在手機上就下載PC/pad的冗余代碼,其實毫無意義,而▓且浪費了流量資源。
                3.對於非webkit內核的瀏覽器支持極差(IE6,7,8等基於其內核的國內360、搜狗等瀏覽器)。
                對於非webkit內核的瀏覽器,比如說Windows Phone手機上用的IE瀏覽器,徹底看不了。

                 

                什麽類型網站適合響應式?
                1、 頁面結構、功能簡單的展示型企業官網
                2、 內容型、資訊型▓新聞平臺



                本文地址:/csyrg5/library/shejizhishi/20190829762.html
                上一篇:設計網站時為什麽需要畫線框圖
                下一篇:沒有了
                Copyright? 2011 AG视讯,All rights reserved.
                首頁关于AG视讯新聞資訊服務項目軟件產品解決方案成功案例網站地圖加入我們聯系我們