隨著互聯網的發展,各種移動終端層出不窮,門戶網站也不再局限于在電腦上顯示了,現如今的網站越來越多的考慮各個終端的兼容性了。
在以前做一個門戶網站,只需要考慮臺式電腦的顯示情況和在筆記本上的顯示情況就ok了,這里說的筆記本一般指屏幕分辨率為1366px,一般這種網站,設計師可以隨心所欲的發揮自己的設計思維,天馬行空,因為局限較小。而現在,越來越多的網站追求響應式彈性布局,想要兼容更多的終端,如:小屏尺寸的筆記本、ipad、手機等,這些終端由于實際屏幕不及臺式電腦廣闊,所以對設計師的要求就有點多了,設計這樣的網站,需要考慮在PC端的顯示風格,到ipad端的顯示風格,到手機上的顯示風格,就需要設計的更有操作空間,不能再像之前一樣只考慮到PC端的界面就行了。這也就需要設計師設計頁面時給頁面的元素模塊更多的操作空間。
在設計師設計好頁面之后,就是前端工程師接手進行頁面開發,將網站頁面設計稿轉化為html文件,運用div + css進行頁面布局,在做響應式網站頁面時,也要考慮如何布局更加簡約,以更少的代碼實現兼容各個終端的頁面布局。而在進行響應式頁面開發的時候,第一件事情就是在頁面代碼頭部添加以下代碼設置屏幕按照1:1的尺寸顯示,在iPad和手機的瀏覽器上也能讓網站全視圖瀏覽,并且禁止用戶縮放網站頁面。
代碼如下:
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
添加以上代碼后,對于各個終端的兼容性調整則需要在CSS文件中運用媒體查詢來設置頁面在各個終端上的實際顯示樣式。如下:
@media screen and (max-width:980px){
}
這里聲明的是在瀏覽器寬度小于等于980px的時候,網站顯示調用這個區間里的樣式進行布局。
響應式網站應該兼容各個終端,大致的終端尺寸為:pc( > 1366px),筆記本(1024px - 1366px),ipad( 768px - 1024px ),手機( < 768px )。
當然,有些頁面模塊不是十分規律的就需要根據實際情況來寫一些特殊分辨率下的顯示樣式了。
以上就是關于淺談響應式網站開發(響應式網站和普通網站),希望對你有幫助,更多內容關注創新互聯。
本文標題:淺談響應式網站開發(響應式網站和普通網站)
新聞來源:http://m.newbst.com/news15/318665.html
成都網站建設公司_創新互聯,為您提供定制網站、網站維護、網站制作、電子商務、軟件開發、網站建設
廣告
聲明:本網站發布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網站立場,如需處理請聯系客服。電話:028-86922220;郵箱:631063699@qq.com。內容未經允許不得轉載,或轉載時需注明來源:
創新互聯