三个步骤实现响应式web.ppt

触屏与鼠标 触屏设备已经成为主流。虽然目前多数触屏设备还是小屏幕类型的产品，比如手机，但是市场上越来越多的大屏幕设备也开始使用触屏技术;且不说iPad一类的平板电脑，就连一些笔记本和台式机也加入了这一行列。比如HP Touchsmart tm2t，即使用传统的键鼠设备，同时也加入了触屏技术 相比于传统的基于鼠标指针的互动，触屏技术显然带来了截然不同的交互方式与相应的设计规范;两者又有各自所适用的领域。所幸，要使我们的设计方案同时满足这两类设备的规范，并非一件难事，只是有些地方需要注意。比如，触屏设备无法反映CSS定义的hover行为及相应的样式，因为它没有鼠标指针的概念，手指点击就是click行为。所以不要让任何功能依赖于对hover状态的触发。 有兴趣的话，可以读读这篇Designing for Touchscreen，这里提到的很多建议即有利于改进针对触屏设备的设计方式，同时也不会削弱传统键鼠设备上的用户体验。比如，放在页面右侧的导航列表可以对触屏设备的用户更加友好。因为多数人习惯用右手点击操作，而左手负责握住设备;这样，放在右侧的导航列表即方便右手的点击，又可以避免被握着设备的左手不小心触碰到。而这一点与键鼠设备用户的习惯完全不矛盾。 * * 为小于等于700像素的视图指定#content和#sidebar的宽度为自适应并且清除浮动，使得这些容器按全宽度显示 对于小于等于480像素(手机屏幕)的情况，将#header元素的高度设置为自适应，将h1的字体大小修改为24像素并隐藏侧边栏。 响应式Web 组员：孙慧 张瑞 刘健 谭旭龙 1.响应式Web的设计理念2.响应式Web是怎样进行 3.什么情况下式Web设计方式 4.三个步骤实现响应式web 响应式Web的设计理念 眼下，几乎每个新客户都希望他们的网站可以有专门的移动设备版本。最完美的情况为iPhone、iPad、黑莓、Kindle……各自打造一款——页面分辨率还必须兼容任何设备。谁知道还需要为多少新发明的设备设计开发不同版本的页面?这种疯狂什么时候算个头? 在Web设计和开发领域，我们很快就会发现，要跟上新产品出现的速度，是每一个有着新分辨率的新产品设计一个移动端版本。那么，我们真的是鱼不可兼得，必须舍弃用某种设备的用户换来使用另外一种设备的用户吗？或者还有新的方法？ 响应式Web的理念 页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。具体的实践方式由多方面组成，包括弹性网格和布局、图片、CSS media query的使用等。无论用户正在使用笔记本还是iPad，我们的页面都应该能够自动切换分辨率、图片尺寸及相关脚本功能等，以适应不同设备;换句话说，页面应该有能力去自动响应用户的设备环境。这样，我们就可以不必为不断到来的新设备做专门的版本设计和开发了。 -----摘自Ethan Ma Design”（有求必应网页设计） 显然，我们无法也无需使用运动传感器或是机器人技术，响应式Web设计更多需要的是抽象思维。好在，一些相关的概念已经得到了实践，比如液态布局、帮助页面重新格式化的media queries和脚本等。但是响应式Web设计不仅仅是关于屏幕分辨率自适应以及自动缩放的图片等等，它更像是一种对于设计的全新思维模式。 响应式Web是怎样进行 响应式Web怎样进行？ 弹性图片 响应式Web设计的思路中，一个重要的因素是怎样处理图片方面的问 题。有很多同比缩放图片的技术，其中有不少是简单易行的。其中，由Richard Rutter最先尝试的一种做法比较流行，即使用CSS的max-width属性。这个方法在Ethan Marcotte的液态图片一文中也有提到。 img { max-width: 100%;} 只要没有其他涉及到图片宽度的样式代码覆盖掉这一行规则，页面上所有的图片就会以其覆盖。实际上，就像Jason Grigsby在他的CSS Media Query for Mobile is Fools Gold一文中提到的，液态图片背后的思路，就是无论何时，都确保在其原始宽度范围内样式表在窗口尺寸发生变化时辅助浏览器对图片进行缩放。 一种简而美的方法。 图片本身的分辨率及加载时间是另外一个需要考虑的问题。虽然通过上面的方法，可以很轻松的缩放图片，确保在移动设备的窗口中可以被完整浏览，但如果原始图片本身过大，便会显著降低图片文件的下载速度，对存储空间也会造成没有必要的消耗。 /dx /dx/151230/4752245.html /dx/1601