快速了解
完整资料
资料已展开关于 RWD
RWD
每周免费提供响应式设计文章，工具，技巧，教程和启发性链接的摘要
作者花费数小时策划最好的内容，采访行业领袖，并每周五发布
什么是响应式布局设计？
如何响应式布局
意在实现不同屏幕分辨率的终端上浏览网页的不同展示方式。通过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验
布局及设置meta标签
html
复制代码
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="HandheldFriendly" content="true">通过媒体查询来设置样式media query
media query 是响应式设计的核心，它能够和浏览器进行沟通，告诉浏览器页面如何呈现，假如一个终端的分辨率小于980px，那么可以这样写
css
复制代码
@media screen and (max-width:980px){
#head { … }
#content { … }
#footer { … }
}//这里面的样式会覆盖掉之前所定义的样式。设置多种视图宽度
css
复制代码
/**ipad**/
@media only screen and (min-width:768px)and(max-width:1024px){
//兼容样式
}
/**iphone**/
@media only screen and (width:320px)and (width:768px){
//兼容样式
}相关文章
适合的使用方向
RWD
每周免费提供响应式设计文章，工具，技巧，教程和启发性链接的摘要
什么是响应式布局设计？
每周免费提供响应式设计文章，工具，技巧，教程和启发性链接的摘要
如何响应式布局
每周免费提供响应式设计文章，工具，技巧，教程和启发性链接的摘要
收录线索
CSS3响应式响应式技巧响应式工具课程 / 教程
资料说明
内容根据公开资料整理；版本、兼容性与服务状态请以官网最新说明为准。