整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
很多Web前端新手对响应式布局和自适应布局的概念以及制作方法分不清，简单来说响应式布局相当于流动网格布局，而自适应布局等于使用固定分割点来进行布局。接下来就给大家讲解用CSS做响应式布局的方法。
做响应式网站离不开CSS响应式布局查询代码写法，而在此之前，我们需要了解什么是媒体查询以及如何才CSS中引入媒体查询。
什么是媒体查询？
媒体查询可以让我们根据设备显示器的特性（如视口宽度、屏幕比例、设备方向：横向或纵向）为其设定CSS样式，媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成。媒体查询中可用于检测的媒体特性有width、height和color（等）。使用媒体查询，可以在不改变页面内容的情况下，为特定的一些输出设备定制显示效果。
如何在CSS中引入媒体查询？
媒体查询写在CSS样式代码的最后，CSS是层叠样式表，在同一特殊性下，靠后的的样式会重叠前面的样式。
如何用CSS做响应式布局呢？
1、在HTML头部添加以下代码，用来显示兼容移动设备的显示效果。
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
参数详解：
width=device-width ：宽度等于当前设备的宽度
initial-scale=1 ：初始的缩放比例（默认为1）
minimum-scale=1 ：允许用户缩放到的最小比例（默认为1）
maximum-scale=1 ：允许用户缩放到的最大比例（默认为1）
user-scalable=no ：用户是否可以手动缩放（默认为no）
2、引入包含Media的CSS文件
一般情况HTMLCSS代码都是分开写的，Media也不例外。
<link rel="stylesheet" type="text/css" href="m320.css" media="only screen and (max-width:320px)"/>
<link rel="stylesheet" type="text/css" href="m480.css" media="only screen and (min-width:321px) and (max-width:375px)"/>
3、写Media中的代码
以某个网页的响应式布局为例
结构:@media设备类型and (设备特性)｛样式代码｝
/*媒体查询*/
/*当页面大于1200px时，大屏幕，主要是PC端*/
@media (min-width: 1200px) {
}
/*在992 和1199 像素之间的屏幕里，中等屏幕，分辨率低的PC*/
@media (min-width: 992px) and (max-width: 1199px) {
#adver .center {
width: 50%;
margin: -10px 0 0 -25%;
}
main .center h2 {
font-size: 40px;
}
}
/*768和991像素之间的屏幕里，小屏幕，主要是PAD*/
@media (min-width: 768px) and (max-width: 991px) {
#adver .center {
width: 60%;
margin: -10px 0 0 -30%;
}
#adver .search, #adver .button {
font-size: 20px;
}
main .center h2 {
font-size: 35px;
}
}
/*在480和767像素之间的屏幕里，超小屏幕，主要是手机*/
@media (min-width: 480px) and (max-width: 767px) {
header, header .center, header .link {
height: 45px;
}
header .logo, .sm-hidden,.sidebar,.md-hidden {
display: none;
}
header .link {
width: 100%;
line-height: 45px;
}
#adver {
padding: 45px 0 0 0;
}
#adver .center {
width: 70%;
height: 53px;
margin: -10px 0 0 -35%;
}
#adver .search, #adver .button {
height: 45px;
font-size: 18px;
}
.sm-visible {
display: block;
}
main .center h2 {
font-size: 30px;
}
main .center p {
font-size: 15px;
}
main figure {
width: 49.2%;
}
}
/*在小于480像素的屏幕，微小屏幕，更低分辨率的手机*/
@media (max-width: 479px) {
header, header .center, header .link {
height: 45px;
}
header .logo, .xs-hidden, .sm-hidden, .sidebar, .md-hidden {
display: none;
}
header .link {
width: 100%;
line-height: 45px;
}
header .link li {
width: 25%;
}
#adver {
padding: 45px 0 0 0;
}
#adver .center {
width: 80%;
height: 48px;
margin: -10px 0 0 -40%;
}
#adver .search, #adver .button {
height: 40px;
font-size: 16px;
}
.sm-visible {
display: block;
}
footer .bottom, footer .version {
font-size: 13px;
}
main .center h2 {
font-size: 26px;
}
main .center p {
font-size: 14px;
}
main figure {
width: 99%;
}
}
响应式布局的原理就是在不同的窗口大小下显示不同的结构和样式。只要掌握好CSS的样式，响应式布局就没问题。
个网站长得好看能吃吗？还真能！一个“秀色可餐”的网站不仅能增加人们的食欲，还能让你的营业额蹭蹭往上涨！但是，一个长得好看却只能活在电脑端的网站，真的不能吃！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
应式布局就是让网站自动适应用户终端设备如：PC、手机、平板等，首先我们应该遵循移动端优先，交互和设计以移动端为主，pc则作为移动端的扩展，我这里使用媒体查询的方法取得客户端屏幕尺寸，你也可以自己再扩展。
响应式布局
响应式布局CSS代码:
/*响应式布局*/
.tpt-wp{margin:0 auto;width:100%}
.tpt-cm{font-size: 18px;color: #333;text-align: center;background: #f2f2f2;height: 200px;line-height: 200px;padding: 10px;margin: 10px;}
.tpt-md-4{float:left}
.tpt-md-3{float:left}
.tpt-md-2{float:left}
/*浏览器宽度小于767px*/
@media only screen and (max-width:767px){
.tpt-md-4{width:50%}
.tpt-md-3{width:100%}
.tpt-md-2{width:100%}
.tpt-ml-3{display:none}
.tpt-mr-3{display:none}
.tpt-ml-7{width:100%}
.tpt-mr-7{width:100%}
}
/*浏览器宽度大于768px,小于1023px*/
@media only screen and (min-width:768px) and (max-width:1023px){
.tpt-md-4{width:50%}
.tpt-md-3{width:50%}
.tpt-md-2{width:50%}
.tpt-ml-3{display:none}
.tpt-mr-3{display:none}
.tpt-ml-7{width:100%}
.tpt-mr-7{width:100%}
}
/*浏览器宽度大于1024px,小于1199px*/
@media only screen and (min-width:1024px) and (max-width:1199px){
.tpt-md-4{width:33.33333333%}
.tpt-md-3{width:33.33333333%}
.tpt-md-2{width:50%}
.tpt-ml-3{float:left;width:30%}
.tpt-mr-3{float:right;width:30%}
.tpt-ml-7{float:left;width:70%}
.tpt-mr-7{float:right;width:70%}
}
/*浏览器宽度大于1200px*/
@media only screen and (min-width:1200px){
.tpt-md-4{width:25%}
.tpt-md-3{width:33.33333333%}
.tpt-md-2{width:50%}
.tpt-ml-3{float:left;width:30%}
.tpt-mr-3{float:right;width:30%}
.tpt-ml-7{float:left;width:70%}
.tpt-mr-7{float:right;width:70%}
.tpt-wp{width:1200px;margin:0 auto}
}
/*NET*/
四等分布局：
<div class="tpt-wp"> <div class="tpt-md-4"><div class="tpt-cm">4</div></div> <div class="tpt-md-4"><div class="tpt-cm">4</div></div> <div class="tpt-md-4"><div class="tpt-cm">4</div></div> <div class="tpt-md-4"><div class="tpt-cm">4</div></div> </div>
三等分布局：
<div class="tpt-wp"> <div class="tpt-md-3"><div class="tpt-cm">3</div></div> <div class="tpt-md-3"><div class="tpt-cm">3</div></div> <div class="tpt-md-3"><div class="tpt-cm">3</div></div> </div>
二等分布局：
<div class="tpt-wp"> <div class="tpt-md-2"><div class="tpt-cm">2</div></div> <div class="tpt-md-2"><div class="tpt-cm">2</div></div> </div>
左七右三布局：
<div class="tpt-wp"> <div class="tpt-ml-7"><div class="tpt-cm">7</div></div> <div class="tpt-mr-3"><div class="tpt-cm">3</div></div> </div>
左三右七布局：
*请认真填写需求信息，我们会在24小时内与您取得联系。
