响应式并不一定是最好的选择
如果一个点餐网站预算充足，定制一个手机移动版，可以基于GPS在附近店家点餐或者一个dashboard网站有大量数据内容和管理指令，那么单独的响应式设计可能远远不足
如果大多用户使用IE7,8或者更低版本那么响应式意义也不大
响应式设计是基于流动布局、弹性图片、弹性表格？？？、弹性视频和媒体查询等技术的组合。是用百分比布局创建流动的弹性界面，同时使用媒体查询，来限制元素的变动范围。
流动布局不固定div的宽度，而是采用百分比或者em，rem。需要注意的是当em的百分比尺寸时，目标元素尺寸÷上下文元素尺寸=百分比尺寸， 上下文尺寸并不一定永远是父元素的大小。
比如
默认浏览器文字大小是 16px，假设设计稿里 h1 为 69px, span 为 38px，line-height 为 40px，可以看到元素的文字大小（38px）是相对于其父元素的文字大小（69px）而言的，而它的行高（40px）则是相对于其本身的文字大小（38px）而言，所以我们不能一概而论认为上下文元素就是等同于父级元素。
工作原理
应用css3的媒体查询，创建一个包和各种设备尺寸样式的CSS。一旦页面在设备上加载，此时会先检查视口大小，然后加载特定样式。
viewport视口
视口是可视区域大小之浏览器窗口内的内容区域，不包含工具栏、标签栏等。
屏幕尺寸screen.width
设备的物理显示区域
grid view 栅格化
栅格化就是页面被分成多列。一般响应式的栅格化会分成12列，总宽度100%，能够根据窗口大小变化收缩和扩展。首先要保证所有的html元素有box-sizing属性并设置为border-box。这让padding和border都算入总的width和height中。即：
*{
box-sizing: border-box;
}
.col-1 {
width: 8.33%;
}
.col-2{
width: 16.66%;
}
....
[class* = "col-"] {
float
}
media queries 媒体查询
1. @media screen and (max-width:960 px){
body{
...
}
}
@media screen and (max-width:550 px){
body{
...
}
}
???顺序有讲究吧 从大到小
对于老版本不支持媒体查询，可以引入polyfill脚本（腻子脚本polyfill目的就是填平旧版本浏览器对html5、css3的支持上的缺陷，基于js实现进行兼容修复）。这样的脚本有Respond.js，css3-meadiaqueries.js...
2.HTML4和css2中可以通过<link>标签的media属性为样式表制定设备类型，有8种，screen和print为常见，打印时用衬线字体显示更好的可读性，屏幕上则用无衬线
css3中增加了更多查询，可以设置不同类型的媒体条件。
<link rel="stylesheet" media="screen and (orientation: portrait) and （min-width:800px）， projection" href="portrait.css">纵向显示屏， projection？？？
<link rel="stylesheet" media="not screen and (orientation: portrait)" href="portraitcss">优先级如何？？？
3.@import url("phone.css") screen and (max-width: 360px); @import影响加载速度
link与@import的差别
兼容性差别，IE6以下不支持@import
加载顺序差别
link支持使用js控制dom去改变样式，@import不支持
@import在iE中会导致文件下载顺序被改变，放在@import之后的script文件会在css之前被下载执行，这样可能导致js在进行与样式相关操作的时候出错
图片
1. img, object,video,embed { max-width: 100%，height: auto} /object embed???/
如果用{width: 100%}图片也能伸缩但可能超过原大小
2. 给外层#wrapper设置max-width限制流体布局被拉大
#wrapper{
margin-left: auto;
margin-right: auto;
width:96%;
max-width: 1414px;
}
???为啥同时有width max-width
其实应该为不同屏幕提供不同尺寸的图片。
视频
1. Safari只允许在<video>和<audio>中使用MP4、H.264、AAC媒体文件，而firefox和opera只支持ogg和WebM。
<video width="640" height="480" controls autoplay proload="auto" loop poster>
<source src="video/myVideo.ogv" type="video/ogg">
<source src="video/myVideo.mpv" type="video/mp4">
</video>
video{
max-width:100%;
height: auto;
}
2. iframe引入的视频实现响应式
<script src="js/fitvids.js"></script>
<script>
$(document).ready(function(){
$("#content").fitVids();
});
</script>
表格
流体表格不等于响应式表格，比如一个百分比宽度表格，在小屏幕设备上可以正常显示，但是内容整体被压缩小，可能性差，并不代表真正的响应。
1.隐藏不必要的列
2.将横向表头利用css改为纵向显示并固定位置，使用横向滚动条，tbody上应用whitespace：nowrap；tr下应用display：inline-block？？？
3. 将每一行数据对应表头显示在一块区域，接下来每一行以此类推。利用html data属性将表头写在css中 td:before{content: attr（data-title）}；？？？
4. 将纯文本的表格在小屏幕上的饼图或柱状图，以一种更丰富的形式显示
5.用户一张小缩略图显示并提示用户点击查看表格
网友评论