整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
个网站长得好看能吃吗？还真能！一个“秀色可餐”的网站不仅能增加人们的食欲，还能让你的营业额蹭蹭往上涨！但是，一个长得好看却只能活在电脑端的网站，真的不能吃！2016年，已经有超过80%的网民有在移动端购物的经历，如果你的网站不能在移动端“颜值在线”，就别怪客户都被别家揽走了！
解决的办法只有一个，就是把自家网站做成响应式的。要么也可以另外开发移动站。要把网站变成响应式网站，给大家说三个简单的步骤。
1.布局
在建响应式布局的时候，最好先建一个非响应式的布局，测试没问题后，再把布局改成响应式的，添加响应式代码和媒体查询。
在HTML页面的<head>和</head>标签之间复制以下代码：
媒体查询的意思是根据不同设备设置不同的布局样式。媒体查询取决于网站布局，我们可以这样定义：第一个，适合平板电脑横向显示，最大宽度为1060PX，#primary 占在其父容器宽度的67%，#senondary 占30%，再加上3%的左外边距。 第二个，适合竖向平板电脑和更小的屏幕尺寸。
编码完成后，可以测试下布局是怎么响应的。
2.媒体
响应式布局是响应式网站的“骨架”，媒体元素（视频、图像）是响应式网站的“皮肉”。
下面这段CSS代码能让你的网站图像不超过显示终端尺寸。
用CSS3 来为匹配 min-device-width 条件的媒体指定替换图像：
图像能这样设置，怎样实现响应式的视频呢？
HTML：
CSS：
3.字体
CSS3 规范引入了一个新的单位叫 rem，和 em 类相似，但相对于 HTML 元素来说， rem 更易于使用。
rem 是相对于 HTML 元素的，不要忘了重置 HTML 的字体大小：
完成后，您可以定义响应式的字体大小，如下所示：
完成这三步后，你就能拥有一个响应式的网站了。不过这个教程对大部分用户来说，还是有点复杂了。如果不会程序，是不是就不能做响应式网站了呢？并不是。目前一些自助建站工具已经非常强大，以建站宝盒为代表的H5模板建站，非常适合不懂编程的小白。拖拽操作，能打字就能建站，网站做出来高端大气，尤其适合要做营销型响应式网站的企业。
零基础建响应式网站：http://www.iisp.com/design/?s=yuqiuping
机，平板设备的暴增，直接促进了移动互联网的大潮来袭，互联网迎来了更多的变革，包括web前端行业也是， 现在变为移动web前端开发了，有多少人迎风倒下，又有多少人经受了这场革命的洗礼。这次教大家如何为自己网站添加响应式，快速抓住移动互联网用户。
流行的有某适配，如果你愿意每年支出高额的费用的话，这里介绍的是一个屌丝如何为网站添加响应式，响应式实现原理非常简单：就是通过css3 media query技术通过浏览器窗口宽度的判断，来调整合适的布局。
1，在网站head区间里面添加
<meta content="width=device-width,initial-scale=1" name="viewport">
2,在head区域添加
<link rel="stylesheet" href="css/responsive.css">，在目录下新建 responsive.css文件。
3，书写css代码
/*当宽度为640的时候的样式*/
@media only screen and (max-width:640px) {
}
/*当宽度为480的时候的样式*/
@media only screen and (max-width:480px) {
}
书写css代码需要你有一些css基础，可以上w3school学习下，切图网开发了一款用于快速响应式布局的css框架——快切，它包含了很多具有响应式的组件构成，基于它可以快速完成响应页面的搭建。
http://kuaiqie.qietu.com
如果你对web前端技术感兴趣，加我们微信：qietuwang
套模板不仅仅带后台（SiteServer CMS），而且还带模板使用说明手册的。不仅仅可以下载到模板，还能下载到整个后台，本地直接配置起来就可以使用。
在线浏览地址：http://templates.siteserver.cn/medraut/index.html
GitHub下载地址：https://github.com/siteserver/template-medraut
这是一套响应式的企业网站，适合企业、公司、或者产品型公司。分类展示，信息展示、增加网站的互动性。跟Banner大图对应起来，整个网站展示方面可以做的非常绚丽多彩。
在线浏览地址：http://templates.siteserver.cn/girish/index.html
GitHub下载地址：https://github.com/siteserver/template-girish
这一套自适应的站长模板，这套模板，我们会发现它虽然模块不少，有评论、有注册登录、有搜索、有文章排行、专题等模块，但它的结构还是比较简单的，模板页面数量少，首页、栏目页、文章内容页，栏目页还跟首页结构一样。
在线浏览地址：http://templates.siteserver.cn/batraz/index.html
GitHub下载地址：https://github.com/siteserver/template-batraz
这是一套响应式网站模版，适应于互联网、企业、媒体、产品型公司以及各种企业集团网站模板所有图片在手机端都进行过处理，而响应式网站不同设备内容源码是一样的。因此，你不得不担心响应式网站在移动端的速度以及流量消耗，我们采用图片处理技术后，在手机上会只加载尺寸更小的图片。
在线浏览地址：http://templates.siteserver.cn/albrecht/index.html
GitHub下载地址：https://github.com/siteserver/template-albrecht
这是一套学校模板，适用于各类大学、综合院校，当然删减一些栏目，一样适用各个中小学网站。同样作为一套自适应的学校模板，这套模板包含了学校主页、院系列表页、院系主页、科研专题页、教学专题页、周边生活专题、图片列表页、人员列表专页、新闻列表页、搜索结果页、内容页等板块。
在线浏览地址：http://templates.siteserver.cn/scevola/index.html
GitHub下载地址：https://github.com/siteserver/template-scevola
这是一套响应式博客模版，适应于科技、个人博客、互联网、媒体等产品型公司网站模板。所有图片在手机端都进行过处理，简单而又清爽的企业、博客响应式模板。
在线浏览地址：http://templates.siteserver.cn/milenko/index.html
GitHub下载地址：https://github.com/siteserver/template-milenko
这是一套响应式的单页宣传性网站，适合一些房产、或者产品型公司，简单的展示一些个人或者企业信息。图片切换板块对图片进行分类展示，可以保持内容图片的多样性又不杂乱，增加网站的互动性。可以一次性展示多张图片，跟banner大图对应起来，整个网站展示方面可以做的非常绚丽多彩。整个网站单页展示，虽然看起来略显单薄，但对应有些企业来说非常适合，展示必要的信息，用户浏览起来直观、不繁重。
在线浏览地址：http://templates.siteserver.cn/aeson/index.html
GitHub下载地址：https://github.com/siteserver/template-aeson
这是一套响应式网站模版，适应于地产、汽车、互联网、建筑、媒体、家居、产品型公司以及各种企业集团网站模板所有图片在手机端都进行过处理，而响应式网站不同设备内容源码是一样的。
在线浏览地址：http://templates.siteserver.cn/kevan/index.html
GitHub下载地址：https://github.com/siteserver/template-kevan
这是一套响应式网站模版，适应于企业、汽车公司、产品型公司以及各种企业集团网站模板所有图片在手机端都进行过处理，而响应式网站不同设备内容源码是一样的。因此，你不得不担心响应式网站在移动端的速度以及流量消耗，我们采用图片处理技术后，在手机上会只加载尺寸更小的图片。
*请认真填写需求信息，我们会在24小时内与您取得联系。
