- 還沒升級成響應式網頁設計? 01-01
- 助力清華同方新媒體—記8月31日鋒云科技成功中標清華同方官網響應式網站升級項目! 01-01
- 為什么有的網站建設的“很爛” 卻能排在首頁? 01-01
- 企業網站建設如何突出網站價值 01-01
移動端的設備占據了人們大部分的日常生活,無論是購物、聊天、找工作還是看新聞視頻玩游戲,任何場所地點都能滿足人們的需要。而隨著移動端設備的廣泛流行,網頁設計也進入到了一個新的不同的階段,平常在pc端瀏覽的網頁出現在各個分辨率不同的移動端時,頁面效果發生了變化,各種問題接踵而來,而網頁建設者們為了更大地改善用戶體驗想盡了不同的辦法,響應式設計就應運而生了。
所謂的響應式設計就是一個頁面根據不同設備的分辨率展示出不同的效果,那它是怎么實現不同分辨率出現不同的展示樣式呢?
第一:為了適應屏幕,多數的移動端瀏覽器會把html網頁的的寬度縮放成屏幕的寬度(這也是普通網頁在移動端變小不清晰還可以縮放的原因),而我們可以設置頁面head里的meta標簽的viewport屬性,<meta name="viewport" content="width=device-width, initial-scale=1.0">,我們也可以設置其他的屬性
頭部添加viewport標簽后,html結構布局和平常一樣抒寫就可以.
第二:css部分是最主要部分,我們在設置頁面寬度的時候最好不要用絕對單位值px,而是用%百分比。在寫完特定的一個css樣式之后,可以使用Media QueriesCSS3 media query ,它像一個if語句,告訴瀏覽器根據屏幕的寬度調取相應的css:
上面的圖片就是說當屏幕不大于410px的時候就采用下邊的樣式。
由此可見,響應式設計,其實是根據多個屏幕分辨率寫了不同的css樣式,從而實現不同的布局展現出的不同的效果。雖然它可以使頁面效果看起來比較統一,但是也有一定的缺點,就是代碼工作量大,比較繁瑣