起因 因为越来越多的智能移动设备( 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 开始的。
Atas ialah kandungan terperinci css响应式布局是什么. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!