什么是响应式布局 ？
实现不同屏幕分辨率的终端上浏览网页的不同展示方式。通过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验。

响应式设计的步骤

(1)Meta标签定义

	<meta name="viewport" content="width=device-width, initial-scale=1, 
	maximum-scale=1, user-scalable=no">
	解释:
		viewport:			是可视窗口大小，
		width=device-width:	等于当前设备宽度，
		initial-scale=1:	初始缩放比例为1，
		minimum-scale - 允许用户缩放到的最小比例
		maximum-scale - 允许用户缩放到的最大比例
		user-scalable=no:	用户是否可以手动缩放，默认不可以。
(2)设置媒体查询的断点,告诉屏幕到什么时候变化
	
	max-device-width:960px		等于960px
	min-width:960px			大于960px
	max-width:1024px			小于1024px
(3)设备类型(media type):
	
	all所有设备；
	screen 电脑显示器；
	print打印用纸或打印预览视图；
	handheld便携设备；
	tv电视机类型的设备；
	speech语意和音频盒成器；
	braille盲人用点字法触觉回馈设备；
	embossed盲文打印机；
	projection各种投影设备；
	tty使用固定密度字母栅格的媒介，比如电传打字机和终端。

(4)设置视图宽度

	@media screen and (max-width: 980px) {
	    body {
	        width:95%;
	       }
	}
	@media (min-width:768px) and (max-width:1024px){
		#head { … }
		#content { … }
		#footer { … }
	}
(5)字体设置(rem是相对于根元素的，不要忘记重置根元素字体大小)
		
		html{font-size:100%;}
		完成后，你可以定义响应式字体：
		@media (min-width:640px){body{font-size:1rem;}}
		@media (min-width:960px){body{font-size:1.2rem;}}
		@media (min-width:1200px){body{font-size:1.5rem;}}
(6)设置图片

	<img src="image.jpg"
     data-src-600px="image-600px.jpg"
     data-src-800px="image-800px.jpg"
     alt="">
	CSS控制：
	@media (min-device-width:600px) {
	    img[data-src-600px] {
	        content: attr(data-src-600px, url);
	    }
	}
	
	@media (min-device-width:800px) {
	    img[data-src-800px] {
	        content: attr(data-src-800px, url);
	    }
	}

实例

控制登录页面不同宽度的设备定位不同

1. 代码

   //设备宽度大于768一个样式，小于768一个样式
   <style>
      @media all and (min-width: 768px) {
           form {
               top: 60% !important;
               left: 30% !important;
           }
       }
       @media all and (max-width: 768px) {
           form {
               top: 70% !important;
           }
       }
   </style>
   

2. pc端
   

3. 移动端
   

如果您觉得本篇对你有帮助,可以点关注,给个赞,支持一下,过程有遇到什么问题也欢迎评论私信,进行交流