响应式布局

响应式界面有四个层次：

1、同一页面在不同大小和比例上看起来都应该是舒适的；

2、同一页面在不同分辨率上看起来都应该是合理的；

3、同一页面在不同操作方式（如鼠标和触屏）下，体验应该是统一的；

4、同一页面在不同类型的设备（手机、平板、电脑）上，交互方式应该是符合习惯的。

 

 

1、布局及设置meta标签

当创建一个响应式网站，或者非响应式网站变成响应式的时候，首先要关注元素的布局；比如，在手机设备上，我们要禁止用户来缩放屏幕。不禁止的话，可能在显示上会造成错位，以及显示的不是手机网站的样式。所以，我们要通过代码来禁止用户在手机端上缩放屏幕，已达到正常的手机网站效果。

2、通过媒体查询来设置样式media query

media query 是响应式设计的核心，它能够和浏览器进行沟通，告诉浏览器页面如何呈现，假如一个终端的分辨率小于980px，那么可以这样写，这个时候的布局会覆盖掉之前设置的布局。

3、设置多种视图宽度

4、响应式的图片