响应式web设计浅析.pptVIP

技术实现 主要实现方法是CSS3?Media Query，以JS来辅助，HTLM5标签并不是必须的。 使用方法：@media?设备类型?and (设备特性) {?样式代码?} 设备类型值 设备特性 Media query兼容的浏览器 IE6，7，8兼容Media query： !--[if lt IE 9] script src=/svn/trunk/css3-ediaqueries.js/script ![endif]-- CSS3 Media Query引入方法 1 link方式： link rel=stylesheet type=text/css href=css/style.css media=all and (max-width: 340px) / 2 xml方式: ?xml-stylesheet rel=stylesheet media=all and (max-width: 340px) href=css/style.css ? 3 @import方式： @import url(example.css) screen and (min-width:800px);/* IE7及更早浏览器不支持@import */ 4 @media方式： /**适配Ipad*?*/ @media all and (max-width: 780px) { ????font-size:18px; } /** 适配Iphone*?*/ @media all and (max-width: 340px) { ????font-size:12px; } 响应式设计的制作原则 1 不使用绝对宽度 2 建议使用相对大小的字体（em） ( em指字体高，任意浏览器的默认字体高都是16px。所以未经调整的浏览器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em。为了简化font -size的换算，需要在css中的body选择器中声明Font-size=62.5%，这就使em值变为16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了。em有如下特点：1. em的值并不是固定的；2. em会继承父级元素的字体大小。 3. px是绝对单位， em是相对单位; 可随页面缩放。保证缩放时候的整体性。) 3 流动布局（fluid grid） 所谓流动布局，就是各个区块的位置都是浮动的，不是固定不变的。.main {?float: right;?width: 70%;?}.leftBar {?float: left;?width: 25%;?} 4. 根据media query来设置CSS 5 图片的自适应（fluid image） 已知屏幕分辨率如下： @media (max-device-width: 1280px) and (orientation: landscape) {} @media screen and (max-width: 1028px) {?} @media screen and (max-width: 1024px) {?} @media screen and (max-width: 960px) {?} @media screen and (max-width: 854px) {?} @media screen and (max-width: 800px) {?} @media (max-device-width: 768px) and (orientation: portrait) {} @media screen and (max-width: 640px) {?} @media (max-device-width: 600px) and (orientation: portrait) {?} @media (max-device-width: 480px) and (orientation: portrait) {?} @media screen and (max-width: 360px) {?} @media screen and (max-width: 320px) {?} ? 移动平台系统特性分析 iPhone和Android浏览器都是Webkit内核。 不支持Flash和Java（包括Java Applet） 不支持插件 (iPhone)不支持基于浏览器的文件下载，但Android支持zip包下载！ 不支持插入本地文件，即不支持input /上传文件。（ios6.1以下版本） 节省缓存。iPhone仅支持小于25kb的缓存 支持c