静态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>