服務范圍



                    自適應設計網站
                    自主適應
                    瀏覽環境的變化

                    傳統網頁設計
                    (固定寬度頁面布局)
                    or
                    自適應網頁設計
                    (流式頁面布局)


                    多種布局方式組合應用
                    大屏幕、中屏幕使用固定寬度布局。
                    小屏幕使用流式頁面布局。


                    為什么需要自適應網頁設計?
                    “時代在進步,不斷涌現的各種新型設備(手機/平板電腦)、平臺
                    和瀏覽器都需要你的網站的網頁能夠兼容顯示。
                    自適應網頁設計代表了一種必然的設計趨勢
                    今后十年所有的網站都將采用自適應網頁設計。”
                    - Jeffrey Veen


                    小屏幕 + 中屏幕 + 大屏幕
                    一種設計兼容所有尺寸的屏幕


                    誰在使用自適應網頁設計?
                    不僅僅只用在演示、
                    流行設計和頁面美化中。大量的網站已經采用了
                    自適應網頁設計。

                    何時需要采用自適應網頁設計?
                    當你需要考慮以下事情時:
                    時間&金錢
                    各種瀏覽器支持
                    性能
                    內容呈現
                    網站vs移動應用


                    如何實現自適應網頁設計?
                    “停止考慮單一頁面。考慮整個系統。”
                    - Jeremy Keith


                    采用框架
                    (省時)
                    or
                    自己開發
                    (更多自主應用)

                    最佳設計方法
                    分析頁面內容
                    從小屏幕開始(手機支持第一考慮)
                    關掉PhotoShop,打開瀏覽器
                    頁面內容模塊化
                    優化再優化
                    *更好的設計方法會不斷出現!



                    手機上網固然便捷,但是對于網站設計師而言,卻又得面臨新的難題:如何才能在不同大小的設備上呈現同樣的網頁?手機和電腦的顯示是有很大差別的,以前用電腦打開網站是很正常的,但是很可能在手機上的顯示就非常的不適于人閱讀。 很多網站的解決方法,是為不同的設備提供不同的網頁,比如專門提供一個mobile版本,這樣固然保證了效果,但是比較麻煩,同時要維護好幾個版本,大大增加了架構設計的復雜度。“自適應網頁設計”指可以自動識別屏幕寬度、并做出相應調整的網頁設計。


                     “自適應網頁設計”到底是怎么做到的? 首先,在網頁代碼的頭部,加入一行viewport元標簽。 viewport是網頁默認的寬度和高度,上面這行代碼的意思是,網頁寬度默認等于屏幕寬度(width=device-width),原始縮放比例(initial-scale=1)為1.0,即網頁初始大小占屏幕面積的100%。 由于網頁會根據屏幕寬度調整布局,所以不能使用絕對寬度的布局,也不能使用具有絕對寬度的元素。這一條非常重要。 “流動布局”的含義是,各個區塊的位置都是浮動的,不是固定不變的。float的好處是,如果寬度太小,放不下兩個元素,后面的元素會自動滾動到前面元素的下方,不會在水平方向overflow(溢出),避免了水平滾動條的出現。 


                    “自適應網頁設計”的核心,就是CSS3引入的Media Query模塊。它的意思就是,自動探測屏幕寬度,然后加載相應的CSS文件。同一個CSS文件中,也可以根據不同的屏幕分辨率,選擇應用不同的CSS規則。 除了布局和文本,”自適應網頁設計”還必須實現圖片的自動縮放。有條件的話,最好還是根據不同大小的屏幕,加載不同分辨率的圖片。


                    二維碼 返回頂部
                    31选7走势图