A. 做響應式web 頁面怎麼設計
響應式Web設計的方法
介紹完響應式Web的背景和概念之後,是時候該介紹具體的實現方法了,其實響應式Web設計的方法很簡單,就是利用CSS3的媒體查詢Media Queries和Viewport來解決問題的。
首先我們一起來看看Media Queries,這里我只會對其做一個簡單的列舉介紹。
通過媒體查詢的設置,我們可以根據屏幕寬度、屏幕方向等各個屬性來載入不同場景下不同的CSS文件來渲染頁面的視覺風格。具體的使用方法有以下兩種:
1、通過link標簽:
<link rel="stylesheet" type="text/css" media="screen and (max-width: 479px)" href="testcssbywidth1.css" />
示例代碼代表當當前屏幕寬度小於479px的時候,載入testcssbywidth1.css文件來渲染頁面。
2、CSS中直接設置:
@media screen and (max-width:479px) {
/* 具體的CSS屬性設置 */
}
對於Media Queries的一些常用屬性,只對常用的幾個做一個簡單列舉說明,其他的屬性請各位自行查閱相關資料:
width:描述終端設備顯示區域的寬度,接受max/min的前綴;
height:描述終端設備顯示區域的高度,接受max/min的前綴;
device-width:描述終端設備屏幕的寬度,接受max/min的前綴;
device-height:描述終端設備屏幕的高度,接受max/min的前綴;
orientation:描述終端設備處於橫屏還是豎屏的狀態,取值分別為:landscape/portrait。
當我們調整瀏覽器大小的時候,上面通過媒體查詢屬性的操作就可以完成響應式Web設計的工作,但是這卻不能滿足移動終端的瀏覽器,因為移動瀏覽器默認頁面是為寬屏幕設計的,所以會把他縮小來適應小屏幕,但是終端設備卻無法識別正確的寬度,所以光靠媒體查詢是解決不了移動終端設備的響應式Web設計的
B. h5是什麼響應式是什麼
H5 就是 htm5,但是很多人說的 h5 指的是手機端瀏覽器 app
響應式就是讓一套代碼適用不同的終端,
手機屏幕大小不一樣,要讓頁面在不同手機顯示優雅,
入門學習前端:零基礎入門前端學習HTML5?JavaScript?CSS?
C. 什麼是響應式web設計
響應式Web設計是在開發和設計網站過程中產生的一種方式,它的目的是讓內容布局能隨用戶使用顯示器的不同而變化。再明確點說,這種設計概念,就是讓原本1292像素寬,4欄的內容,能夠很好地顯示在1025像素寬的用戶屏幕上,同時還能自動簡化成2欄。當然,讓它很好的適應智能手機和其他種類電腦的屏幕也就成了水到渠成的事了。這種特殊的設計形式就被成為「響應式Web設計」。
響應式Web設計的優點:可以兼容所有尺寸的屏幕,隨著手持設備(手機)屏幕尺寸繁多,也有很好的兼容性;而且開發一次,pc版和觸屏版,手機版融合為一;
響應式Web設計的缺點:對前端工程師要求比較高,它的屏幕兼容要求前端工程師對各種瀏覽器差異性了解比較多,對於大數據展示的門戶站點,如果用同一頁面,即時瀏覽器不崩潰,在手機上一個頁面,很難滑到最底部,帶來操作是十分不方便的,觸屏版和手機版對優質信息展示不足。
綜合優缺點:響應式Web設計在企業站點,微型或者小站還是可以用的,對於大中型站點不合適(尤其大信息量展示的)。
D. 國內優秀的響應式WEB網站有哪些
互聯網時代,網頁這種東西是不可或缺的,也是視覺設計師還有程序員們一直在努力的方向,一個適用性良好,美觀的網站,總能得到更多的關注。網頁從靜態的到動態,再從動態到如今的響應式Web網站,這都是網頁設計的進步。
總而言之,現在的響應式Web可以說是大勢所趨,是現在的潮流也是未來網頁發展的趨勢,畢竟這種良好的交互性,是非常棒的。
E. 如何將web頁面改成響應式
第一步:檢測網頁響應式
瀏覽器打開調試模式,打開響應式設計模式,在預覽區域拖動大小范圍,如果頁面元素隨大小變化而自適應,則頁面是響應式頁面,反之,頁面是固定非響應式頁面。如圖:
第二步:編輯網頁源文件
用Dreamweaver打開頁面源文件,查看代碼樣式及文件結構,(Web頁面的視覺效果由CSS樣式表文件控制)。如圖:
第三步:植入響應式代碼
在CSS樣式表中插入以下代碼:
@media screen and (min-width:200px) and (max-device-width:640px){
/*這里寫元素的樣式*/
}
代碼解釋:這句代碼是指定了在200像素~640像素之間的終端,顯示的效果,在其他終端不顯示。
第四步:橫屏響應式設計
在CSS中插入以下代碼
@media screen and (min-width:200px) and (max-device-width:640px){
.box{ width:100%;height:auto; margin:0 auto; background:#FFFFFF;}
}
控制元素在終端的橫向展示(全屏拉伸縮放無滾動條),垂直方向用滾動條展示。如圖:
第五步:豎屏響應式設計
在CSS中插入以下代碼
@media screen and (min-width:200px) and (max-device-width:640px){
.box{ width:auto;height:100%; margin:0 auto; background:#FFFFFF;}
}
控制元素在終端的橫向展示(全屏拉伸縮放無滾動條),垂直方向用滾動條展示。如圖:
第六步:全屏響應式設計
在CSS中插入以下代碼
@media screen and (min-width:200px) and (max-device-width:640px){
.box{ width:100%;height:100%; margin:0 auto; background:#FFFFFF;}
}
控制元素在終端的橫向展示(全屏拉伸縮放無滾動條),垂直方向用滾動條展示。如圖:
7
第七步:加工檢測
響應式設計完成之後,用不同的終端全部檢測一遍,有不合格的地方繼續修改,這是程序員必須知道的也不能忽視的。
F. 什麼是web響應式網站
響應式Web設計(Responsive Web design)的理念是:
頁面的設計與開發應當根據用戶行為以及設備環境(系統平台、屏幕尺寸、屏幕定向等)進行相應的響應和調整。具體的實踐方式由多方面組成,包括彈性網格和布局、圖片、CSS media query的使用等。無論用戶正在使用筆記本還是iPad,我們的頁面都應該能夠自動切換解析度、圖片尺寸及相關腳本功能等,以適應不同設備;換句話說,頁面應該有能力去自動響應用戶的設備環境。響應式網頁設計就是一個網站能夠兼容多個終端——而不是為每個終端做一個特定的版本。
G. 響應式Web設計的概念,應該怎樣做響應式Web設計
前言 現在使用移動設備人越來越多,移動版的Website隨之也越來越重要;但是移動端設備的大小不一,屏幕解析度各不相同,我們不可能為 BlackBerry,iPhone, iPad等等每個都做單獨的頁面設計。所以我們需要的Website設計要能迎合多種device的要求並且兼容所有的屏幕解析度,這種設計就叫響應式 Web設計 什麼是響應式Web設計(Responsive Web design)? 響應式Web設計是一種Web設計和開發能夠根據屏幕大小、平台和方向對用戶的行為和環境做出響應的設計。它包括了靈活的網格和布局,圖像和智能使用CSS的media queries特性。當用戶從Laptop切換到iPad上時,該網站應能自動地切換CSS規則以適應Device解析度,圖像尺寸和腳本執行。換句話說,響應式Web設計是具備能夠自動響應用戶喜好的技術。這將一勞永逸的滿足對每個新上市的移動終端都要進行不同設計和開發的需求。 需要注意的是:響應式Web設計不僅僅是 下圖列出了一些最常見的: 所以,如果你要使你的客戶滿意,你必須讓你的網站能夠自動調整並適合上述設備的屏幕。例如,你應該為不同的設備定製不同的布局結構: 定製布局 同樣,有些時候,根據需要顯示或隱藏一些內容: 顯示或隱藏內容 很明顯,我們不能為每一種設備定製一個頁面。所以,我們應該如何處理這種情況呢?
H. 移動式web和響應式web的區別
其實移動web和傳統的web並沒有本質的區別。但是,同一個頁面不可能被桌面瀏覽器和移動瀏覽器同時瀏覽,asp.net可以為移動web提供一個系統自適應結構,這個結構可以為瀏覽器提供特定的輸出,而且可以將呈現邏輯細分為較小的部分,這樣在顯示區域和輸入設備硬體都有限的情況下更好的工作。
移動web開發這部分跟web前端開發差別不大,使用的技術都是html+css+js。區別為手機瀏覽器是webkit的天下,pc端是IE的天 下。手機網頁可以理解成pc網頁的縮小版加一些觸摸特性。因為是在瀏覽器中進行的網頁開發,所有最終代碼具有跨系統平台的特性。web app開發特指的是用html5技術開發,之所以叫web app是因為他比較接近客戶端應用程序的用戶體驗,可以和系統深度融合,調用一些只有客戶端才能調用的功能(比如在移動設備上利用html5開發出的網頁可以訪問電話、攝像頭等本地功能).
I. 將web網頁項目改成響應式應該怎麼做
需要後台嗎?前端手機端直接使用bootstrap 寫響應式界面就行了,不需要網上的SSH的