起因 因为越来越多的智能移动设备（ mobile, tablet device ）加入到互联网中来，移动互联网不再是独立的小网络了，而是成为了 internet 的重要组成部分。响应式网络设计 （ rwd / awd）的出现，目的是为移动设备提供更好的体验，并且整合从桌面到手机的各种屏幕尺寸和分辨率，用技术来使网页适应从小到大（现在到超大）的不同分辨率的屏幕。
注： responsive web design ＝ rwd，adaptive web design ＝ awd，下同设计
rwd：采用 css 的 media query 技术
流体布局（ fluid grids ）
自适应的图片/视频等资源素材
（为小、中、大屏幕做一些优化，目的是让任何尺寸的屏幕空间都能得到充分利用）
awd： css media query 技术（仅针对有限几种预设的屏幕尺寸设计）
用 javascript 来操作 html 内容
在服务器端操作 html 内容（比如为移动端减少内容，为桌面端提供更多内容）
设计思路 mobile first（从移动端开始，rwd ）：一切从最小屏幕的手机端开始（比如 iphone 的 320px ），先确定内容，然后逐级往大屏幕设计。不同于原来网页设计，总是从桌面电脑的 1024px 开始的。
0
0
css响应式布局是什么
一个新手
发布时间：2017-09-09 13:29:52
|1894人浏览过
|来源于php中文网
原创
相关文章
css 页面局部样式如何引入_通过模块化样式控制作用范围
css 想让表格样式更美观怎么办_使用 css tailwind table 工具类
css选择器权重为什么不生效_通过理解优先级规则解决样式覆盖
css工具如何提高样式开发效率_利用预处理器和自动化工具
如何设计一个个人博客首页_通过HTML和CSS搭建个人博客网站
相关标签:
本站声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
热门AI工具
相关专题
2026赚钱平台入口大全
2026年最新赚钱平台入口汇总，涵盖任务众包、内容创作、电商运营、技能变现等多类正规渠道，助你轻松开启副业增收之路。阅读专题下面的文章了解更多详细内容。
76
2026.01.31
无需付费的漫画app大全
想找真正免费又无套路的漫画App？本合集精选多款永久免费、资源丰富、无广告干扰的优质漫画应用，涵盖国漫、日漫、韩漫及经典老番，满足各类阅读需求。阅读专题下面的文章了解更多详细内容。
67
2026.01.31
漫画免费在线观看地址大全
想找免费又资源丰富的漫画网站？本合集精选2025-2026年热门平台，涵盖国漫、日漫、韩漫等多类型作品，支持高清流畅阅读与离线缓存。阅读专题下面的文章了解更多详细内容。
19
2026.01.31
热门下载
相关下载
精品课程
相关推荐
/
热门推荐
/
最新课程
最新文章
