响应式布局和移动端网页开发 响应式布局介绍 概念 伊桑·马科特(Ethan Marcotte)在2010年提出了响应式网页设计(RWD,Responsive Web Design)这个术语。 在他的一篇文章《Responsive Web Design · An A List Apart Article》中他将已有的三种发开技巧(弹性图片,弹性网格布局,媒体与媒体查询) 进行了整合,命名为响应式网页设计。 那什么才是真正的响应式设计?马科特说,真正的响应式设计方法不仅仅是根据可视区域大小而改变网页布局,而是要从整体上颠覆当前网页的设计方法,是针对任意设备的网页内容进行完美布局的一种显示机制。 响应式布局三要素 弹性图片 弹性图片也称之为叫做响应式图片,是指图片能够跟随父容器的变化而变化,同时宽度受限于父容器,并不能够按照图片原始尺寸展示。 实现方式 1. 将图片的宽度设置为max-width:100% 2.如果提供了高清图,要根据不同设备大小加载不同的图片,则需要额外的处理。 需要采用媒体查询的形式来实现 媒体查询 媒体查询media在css2中就已经存在,在css3当中增加了媒体属性和使用场景 缺点: 媒体查询的缺点:媒体查询的开发方案并不适用于过于复杂的网页。 媒介类型 screen tty tv projection handheld print braille aural all tip 广泛使用的媒介类型只有screen 和 all
响应式布局和移动端网页开发响应式布局介绍概念伊桑·马科特(Ethan Marcotte)在2010年提出了响应式网页设计(RWD,Responsive Web Design)这个术语。在他的一篇文章《Responsive Web Design · An A List Apart Article》中他将已有的三种发开技巧(弹性图片,弹性网格布局,媒体与媒体查询) 进行了整合,命名为响应式网页...