齐博x1第五季《项目实战-留言板》25-移动端模板

即时演示地址：http://x1.alaiyeshi.net/msgboard

pc端模板差不多了，我们本节来制作一套移动端模板

因为功能都开发好，所以移动端模板，我们只要改变其样式和布局即可

移动端模板，留言墙因为移动屏幕空间受限没法用便笺排版，我就用直接用列表方式展示，简单为主

简单修改下css，就可以展示出列表布局

同样，把表单也修改成垂直排列即可：

再“换一换按钮“ 切换数据的时候，我们还需要另外加载一个模板，因为pc端和移动端加载的样式模板是不一样的，所以我们再建立一个

把移动端循环列表的代码复制到新建的wap_ten.htm模板中来

然后我们在切换数据的请求方法中，做一个wap的判断，如果是移动端就返回wap_ten的模板

最后我们在之前的切换数据的js中，更换一下类名，我们的移动端就简单的完成了

用户也可以参考此类方法，做成其他样式的模板，都是非常简单的，只需要熟悉html和css即可，其他的不需要太多的修改

到此我们为其命名为留言板1.20版本，即msgboard 1.20