国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

關于響應式設計的一些關鍵點

golden_hamster / 2916人閱讀

摘要：這里使用到的最多的中的屬性，即媒體查詢響應式設計實踐原則漸進增強漸進增強英語是網頁設計的一種策略，強調可訪問性，語義標記，外部樣式表和腳本技術。

1、響應式設計關鍵點在于：

媒體查詢、流動網格、彈性圖片，而不是flex布局或者是自適應布局

響應式和自適應的最直觀的區別是：
自適應是為了解決如何才能在不同大小的設備上呈現同樣的網頁，直觀地來看就是盒子會根據屏幕分辨率的大小進行伸縮變換。
所以，就是PC端與手機端瀏覽的時候就是一個設計的板式，這樣子當然是體驗比較差的。

響應式設計就解決了這個問題，即不同大小的設備，不同類型的設備顯現不同的網頁，具體的區別在于不同的大小或設備類型的設備，加載不同的css。
這里使用到的最多的css3中的@media屬性，即媒體查詢

2、響應式設計實踐原則

progressive enhancement（漸進增強）

漸進增強(英語：Progressive enhancement)是網頁設計的一種策略，強調可訪問性，語義HTML標記，外部樣式表和腳本技術。 漸進增強使用Web技術以分層的方式，允許所有人訪問網頁的基本內容和功能，使用任何瀏覽器或互聯網連接，同時還給更先進的瀏覽器軟件或更大的帶寬提供了這些頁面的一個增強版本。

graceful degradation (優雅降級)

優雅降級，用一句話來說就是：一開始就構建完整的功能，然后再針對低版本瀏覽器進行兼容。
區別：優雅降級是從復雜的現狀開始，并試圖減少用戶體驗的供給，而漸進增強則是從一個非常基礎的，能夠起作用的版本開始，并不斷擴充，以適應未來環境的需要。降級（功能衰減）意味著往回看；而漸進增強則意味著朝前看，同時保證其根基處于安全地帶。
3、設置斷點

應用css3中的媒體查詢屬性，常見的斷點設置如下：

（小屏幕）----（中屏幕）----（大屏幕）
-- 0~480 ------- 481~800------801~1400

小屏幕對應的是我們最常用的移動設備，即手機。中屏幕一般是平板的視覺效果，而大屏幕則是我們平時的筆記本或者是大屏幕了。

4、一個原則：先針對受眾多的進行設計

我們在進行設計的時候，一個原則就是，那一種設備的用戶比較多，就先針對它來設計。設計完再考慮其他的使用情況。抓住主要的目標用戶。

5、相關單位

vw、vh、em、rem

vw 相對于視窗的寬度：視窗寬度是100vw
vh 相對于視窗的高度：視窗寬度是100vh
這里重點要理解視窗的定義，避免掉坑，譬如，當我們手機輸入文本，彈出鍵盤的時候，vh就縮小來。這時候vh并不近似等于屏幕大小，而是除來手機鍵盤之外的部分。

并不是所有瀏覽器都會兼容rem，為了代碼的健壯性，在css中寫兩行：

font-size: 16px;
font-size: 1rem;
6、常見的響應式框架

以下列出一些對響應式設計做出相應處理的前端框架，我們可以根據使用習慣與實際情況進行相應的選擇：

bootstrap

foundation

semantic UI

Pure.css（輕量級）

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/113042.html

相關文章

  • 響應式設計個人的一些總結

    摘要：所以一個網，甚至是響應式設計，在兩個平臺上都會損害您整體的。三響應式與如果把網站作為一個單獨的網站，如果網站的內容與桌面版的內容相對缺少，導致用戶回到桌面端的網站，會記錄這種選擇，使搜索排名降低，國內百度就不知道會怎樣。 一、為什么需要響應式設計（responsible web design） 1. 響應式發展背景 1、屏幕尺寸的快速變化，iphone為320x480，分辨率在未來可以...

    LeoHsiun 評論0 收藏0

  • 關于響應式web設計

    摘要：手機網站電腦網站平版網站響應式網站在沒有足夠經費跟精力的做一個手機網站的情況下，響應式網站是個不錯的選擇。 手機網站+電腦網站+平版網站 = 響應式網站 在沒有足夠經費跟精力的做一個手機網站的情況下，響應式網站是個不錯的選擇。它有以下的優點： 減少工作量（網站代碼只要一份，只需要做js方面的改動及可以了） 節省時間（每個設備都得到考慮，搜索也友好） 首先是[][1]的設置：大多數手...

    bbbbbb 評論0 收藏0

  • 關于響應式web設計

    摘要：手機網站電腦網站平版網站響應式網站在沒有足夠經費跟精力的做一個手機網站的情況下，響應式網站是個不錯的選擇。 手機網站+電腦網站+平版網站 = 響應式網站 在沒有足夠經費跟精力的做一個手機網站的情況下，響應式網站是個不錯的選擇。它有以下的優點： 減少工作量（網站代碼只要一份，只需要做js方面的改動及可以了） 節省時間（每個設備都得到考慮，搜索也友好） 首先是[][1]的設置：大多數手...

    morgan 評論0 收藏0

  • 重溫"什么是響應式網頁設計？響應式布局的實現原理"

    摘要：概念響應式網頁設計最初是由提出的一個概念為什么一定要為每個用戶群各自打造一套設計和開發方案設計應該做到根據不同設備環境自動響應及調整。預計到年，移動互聯網的數據流量將超越端的流量。 概念 響應式網頁設計最初是由 Ethan Marcotte 提出的一個概念：為什么一定要為每個用戶群各自打造一套設計和開發方案？Web設計應該做到根據不同設備環境自動響應及調整。當然響應式Web設計不僅僅是...

    Nekron 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<