自适应，响应式，一步到位

自适应和响应式还是有点区别的：
什么是自适应？
自适应布局是当屏幕大小改变时，页面随着屏幕进行缩放，元素位置和整体设计不变；在小屏幕上会出现元素过小，观看费劲的问题
什么是响应式？
根据屏幕大小的变化，转化页面的呈现样式，排版布局，适配不同的屏幕。

这里我个需求，是需要做自适应的

需求:
有一个pc端的网页，没有用框架，且多数元素都用px来固定大小，用手机打开网址只显示局部；现在要在手机查看这个网页，可以完全显示

这是一个自适应的需求，自适应就是为了解决如何才能在不同大小的设备上呈现同样的网页

解决方法：
一，头部meta标签编辑
这个真的好好用

<meta name="viewport" content="width=device-width, initial-scale=0.3, minimum-scale=0.1, maximum-scale=2.0, user-scalable=yes" />

viewport ： 表示的是显示窗口；
width=device-width : 表示的是显示窗口的宽度等于设备的屏幕宽度，
initial-scale=1.0，表示初始的缩放比例为1.0；
minimum-scale ： 表示的是允许缩放的最小比例
maximum ： 表示的是允许缩放的最大比例
user-scalable ： 表示是否允许用户进行页面的缩放，值可以为yes或者no

二，不能使用绝对单位（px），绝对宽高，要用rem,%,em，再结合媒体查询去计算页面元素跟随屏幕大小变化的比率

用百分比%

width:100%;
width:auto;
div  {
    width:15%;
}

单位用em或rem，页面默认像素16px

html {
　　　　font-size: 16px;
　　}
p{
　　　　font-size: 1em; // 相当于p=16px
　　}

详细用法相关链接: rem的用法，适配移动端.

假如现在需求要改成不同的显示形式：
那么可以用一下方法：
1，媒体查询
给不同屏幕定义不同样式，某些样式或模块在特定宽度下才出现
2，使用流动布局：
假如宽度太小，放不下几个元素，后面的元素会自动往下掉到前面元素的下方，不会在水平方向overflow（溢出）

.one {
　　　　float: right;
　　　　width: 40%;
　　}
.two {
　　　　float: left;
　　　　width: 40%;
　　}

3，用框架
例如：bootstrap,foundation,ulkit

参考链接： 16个最佳响应式HTML5框架分享详细用法相关.

随笔，写的不全面，多多包涵～