适合前端响应式设计新手学习参考：

 

　　1、布局的响应式：

 

　　不能使用绝对尺寸

 

　　使用float使布局具有流动性，同时不易出现横向滚动条

 

　　2、字体的响应式

 

　　使用相对字体

 

　　3、图片视频等媒体资源的响应式

 

　　设置宽度max-width:100%;或者width：100%；

 

　　4、css3媒体查询的使用

 

　　响应式设计的关键是媒体查询的应用，有两种方式可以应用媒体查询

 

　　①<link type=”text/css” rel=”stylesheet” media=”screen and （min-width: 400px） and （max-device-width: 600px）”  href=></link>

 

　　②在css文件中通过@import url（“tinyScreen.css”） screen and （max-device-width: 400px）;导入

 

　　5、html中meta标签设置视口宽度为理想视口宽度（只对移动端浏览器有效）