靜態H5聊天輸入對話框html代碼
最近因項目需要做一個android app上面的嵌入一個聊天功能，聊天功能現在是第一版，只需要我們的mm支持客服與用戶聊。如果是native開發那就太麻煩了，開發時間長。如果是h5開發應該比較快，關鍵是可以跨平台，那就不用在安卓蘋果電腦上再重新開發一次。下面我將講述如果用html開發一款聊天的網頁程序。廢話不說了，先上圖。
上圖中就是電腦上運行效果，這里是基本框架，還沒有開發實際與服務器交互的功能，只實現簡單的發送文字等UI的css樣式布局，右邊的常見問題，可以寫上常見的客戶遇到問題，用戶點后，直接發送到聊天框中，這樣體驗會更好。
目前代碼還沒有上傳到csdn，獲取代碼可以 嘉扣 773179801，大家一起討論。
下面說一下網頁的適配。適配上面要合理使用css樣式適配電腦和手機樣式。它是通過@media媒介查詢判斷來執行的CSS樣式，也就是說：如果我要做一個響應式布局網站，同時兼容手機、平板、PC的話就得寫三個與之對應的CSS樣式，通過@media媒介查詢來完成響應式布局。
值得注意的是：在手機設備上，我們要禁止用戶來縮放屏幕。不禁止的話，可能在顯示上會造成錯位，以及顯示的不是手機網站的樣式。所以，我們要通過代碼來禁止用戶在手機端上縮放屏幕，已達到正常的手機網站效果。
禁止代碼如下:1
<metaname=“viewport” content=“width=device-width; initial-scale=1.0”>
加在頭部標簽里。
上圖就是手機上面的運行效果，實際上在pc開發時候 縮小窗口就可以得到這樣的效果。在pc開發時候就可以直接適配的手機端運行效果。
上面的代碼簡單定義了如下幾個重要的JS函數代碼，后面章節講到如何與服務器交互將會填入對應的代碼。
// 按Enter鍵發送信息 $(document).keydown(function(event){ if(event.keyCode == 13){ SendMsg(); } }); /////////////////////////////////////////////前台信息處理///////////////////////////////////////////////////////// // 發送信息 function SendMsg() { var text = document.getElementById("text"); if (text.value == "" || text.value == null) { alert("發送信息為空，請輸入！") } else { AddMsg('default', SendMsgDispose(text.value)); var retMsg = AjaxSendMsg(text.value) //AddMsg('小帥', "what's wrong?"); text.value = ""; document.getElementById('text').Value = ''; } }今天的介紹就到這里，下面將開發這個框架中遇到的適配原理和具體的實現。
隨着互聯網的快速發展，以及html5+css3的迅速崛起。漸漸的響應式布局，也會慢慢的出現在我們的視野里，身為專業的web前端人員，還不學習新技術你就out啦！為什么這樣說呢？因為響應式布局能同時兼容多個終端，比如（手機、平板、PC）做一個網站轉眼間就可以變成3個網站，和現在相比是不是更加具有優勢呢!
可能有些人對“什么是響應式布局”還不是很了解，下面就跟大家簡單說下什么是響應式布局：
響應式布局：簡單點說，就是做一個網站同時能兼容多個終端，由一個網站轉變成多個網站，為我們大大節省了資源。
那么響應式布局的優點和缺點又有哪些呢？
優點：1.面對不同分辨率設備靈活性強
2.能夠快捷解決多設備顯示適應問題
缺點：不能完全兼容所有瀏覽器，代碼累贅，加載時間加長。
說了這么多，可能還有很多人，不明白響應式布局該怎么去做，以及它的開發原理是什么？
原理：簡單點說響應式布局它是通過CSS中Media Query（媒介查詢）@media功能，來判斷我們的終端設備寬度在多少像素內，然后就執行與之對應的CSS樣式。
下面我就以我最近做的一個簡單的響應式布局框架為案列給大家講講：
代碼如下：
`
<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312">
<title>響應式布局</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
*{margin:0;padding:0;text-decoration:none;list-style:none;
font-size:14px;font-family:"微軟雅黑";text-align:center;
color:#fff;}
.clear{clear:both;}
#header,#content,#footer{margin:0 auto;margin-top:10px;}
#header,#footer{margin-top:10px;height:100px;}
#header,#footer,.left,.right,.center{background:#333;}
/*通用樣式*/
/*手機*/
@media screen and (max-width:600px){
#header,#content,#footer{width:400px;}
.right,.center{margin-top:10px;}
.left,.right{height:100px;}
.center{height:200px;}
}
/*平板*/
@media screen and (min-width:600px) and (max-width:960px){
#header,#content,#footer{width:600px;}
.right{display:none;}
.left,.center{height:400px;float:left;}
.left{width:160px;margin-right:10px;}
.center{width:430px;}
}
/*PC*/
@media screen and (min-width:960px){
#header,#content,#footer{width:960px;}
.left,.center,.right{height:400px;float:left;}
.left{width:200px;margin-right:10px;}
.center{width:540px;margin-right:10px;}
.right{width:200px;}
}
</style>
</head>
<body>
<!--header start-->
<div id="header">header</div>
<!--end header-->
<!--content start-->
<div id="content">
<div>left</div>
<div>center</div>
<div>right</div>
<div></div>
</div>
<!--end content-->
<!--footer-->
<div id="footer">footer</div>
<!--end footer-->
</body>
</html>