今天整理关于响应式布局的知识。响应式布局这个名词现在应该已经很熟悉了，随着移动端的普及，我们的网站的用户体验需要提升，响应式布局可以解决我们的问题。
什么是响应式布局？ 简单点说，就是同一个页面可以适应不同的屏幕大小设备的设计方案，做一个网站同时能兼容多个终端，通过CSS中Media Query（媒介查询）@media功能，来判断我们的终端设备宽度在多少像素内，然后就执行与之对应的CSS样式。
布局及设置meta标签 当创建一个响应式网站，或者非响应式网站变成响应式的时候，首先要关注元素的布局。我在创建响应式布局的时候习惯先写非响应式布局，页面固定宽度大小。如果完成了非响应式那么我在去添加媒体查询（Media Query)和响应式代码。这种操作更容易实现响应式特性。在手机设备上，我们要禁止用户来缩放屏幕。不禁止的话，可能在显示上会造成错位，以及显示的不是手机网站的样式。所以，我们要通过代码来禁止用户在手机端上缩放屏幕，已达到正常的手机网站效果。
通过媒体查询来设置样式media query media query 是响应式设计的核心，它能够和浏览器进行沟通，告诉浏览器页面如何呈现，假如一个终端的分辨率小于980px，那么可以这样写，这个时候的布局会覆盖掉之前设置的布局。
@media screen and (max-width:980px){
#head { … }
#content { … }
#footer { … }
}设置多种视图宽度 假如我们要兼容ipad和iphone视图，我们可以这样设置：
/**ipad**/
@media only screen and (min-width:768px)and(max-width:1024px){}
/**iphone**/
@media only screen and (width:320px)and (width:768px){}响应式的图片
- 大图随容器缩放，保持宽高比
- max-width: 100%;
#wrap img{
max-width:100%;
height:auto;
}【Web|前端知识点整理系列（一）—— 响应式布局】如此设置后ID为wrap内的图片会根据wrap的宽度改变已达到等宽扩充，height为auto的设置是为了保证图片原始的高宽比例，以至于图片不会失真。
推荐阅读
- web网页模板|如此优秀的JS轮播图，写完老师都沉默了
- 接口|axios接口报错-参数类型错误解决
- JavaScript|vue 基于axios封装request接口请求——request.js文件
- JavaScript|JavaScript: BOM对象 和 DOM 对象的增删改查
- JavaScript|JavaScript — 初识数组、数组字面量和方法、forEach、数组的遍历
- JavaScript|JavaScript — call()和apply()、Date对象、Math、包装类、字符串的方法
- 前端|web前端dya07--ES6高级语法的转化&render&vue与webpack&export
- vue|Vue面试常用详细总结
- javascript|vue使用js-xlsx导出excel，可修改格子样式，例如背景颜色、字体大小、列宽等
- css|我用css精灵图拼接了自己的英文名字，不会还有人不知道精灵图技术吧（）