主流浏览器有5种：IE、chrome、firefox、safari、opera.
浏览器兼容
浏览器私有前缀
- -moz- 火狐浏览器
- -webkit- 360、苹果、猎豹、搜狗、QQ、 Chrome等浏览器
- -o- Opera/欧朋浏览器
- -ms- IE、百度等浏览器
跨浏览器的默认样式
- Normalize.css 是替代 Reset.css，保护有用的浏览器默认样式，修改浏览器自身BUG，优化CSS的可用性，它是模块化的，拥有详细的文档。它从IE8开始支持。
<link rel="stylesheet" href="http://cdn.staticfile.org/normalize/3.0.1/normalize.min.css" type="text/css" />
- Reset.css 移除浏览器的默认样式，然后再根据需要把样式再加回来。
React.js 在浏览器中的兼容情况
- 从 React v15 开始，React DOM 将不会再支持 IE8 了。而中国还有超过 18% 的人在使用 IE8。使用仍然支持 IE8 的 React v0.14 。
- 我们现在使用的版本是 v0.14.6，不支持IE8，支持IE10/11、Egde。火狐、搜狗、360、IE11都有不同程度的兼容问题。
Css3 在浏览器中的兼容问题
- Caniuse.com/#home 查询css3样式在浏览器中的兼容情况
- Css3在Ie中支持不友好，需要在html中加载 ie-css3.htc
常用css内 hack 浏览器兼容写法，这次portal的兼容我使用的是选择器的前缀法，条件注释IE10不支持了且条件注释里的代码是不仅仅对css有效，其它兼容问题也可以使用条件注释方法，portal的兼容只有css的样式有问题
- -ms- ： @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none){ … }
- -webkit-： @media screen and (-webkit-min-device-pixel-ratio:0){ … }
- -moz-：@-moz-document url-prefix() { … }
使用虚拟机 VM VirtualBox
- 下载地址：http://soft.huweishen.com/soft/238.html
- 安装教程：http://tech.huweishen.com/gongju/1544.html
响应式布局
响应式布局方法
- 百分比布局
- bootstrap栅格系统
- Flex 伸缩盒布局
- 媒体查询
Porttal里面用了媒体查询，效果不好，因为侧边栏定宽，导致两栏有交叉，还要再研究。
综合：流式布局和弹性布局及配合媒体查询 是 响应性布局的最好方式。
媒体查询方法：
- 屏幕使用screen;设备使用print;手机设备使用device-width
- Window.screen 命令包含显示设备的信息
- Screen.height / screen.width 两个命令，用来了解设备的分辨率
Head标签中需要引入：
- <meta name=”viewport” content=”width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no” />
具体含义如下：
- Width: 控制viewport的大小。如device-width为设备的宽度。
- Height: 和width相对应，指定高度。
- initial-scale: 初始缩放比例，页面第一次加载时的缩放比例。
- maximum-scale 允许用户缩放到的最大比例，范围从0到10.0
- minimum-scale: 允许用户缩放到的最小比例，范围从0到10.0
- user-scalable： 用户是否可以手动缩放，值可以是: yes,ture 可以缩放；no,false 不可以缩放；
字体自适应：
- 给根元素html,body设置基本字体，单位vw:
html { font-size: calc(112.5% + 4 * (100vw - 600px) / 400); }
- 或用JS根据屏幕宽度计算字体大小：
(function (doc, win) {
vardocEl=doc.documentElement,
resizeEvt='orientationchange'inwindow?'orientationchange':'resize',
recalc=function(){
varclientWidth=docEl.clientWidth;
if(!clientWidth)return;
docEl.style.fontSize=20*(clientWidth/320)+'px'; };
if(!doc.addEventListener)return;
win.addEventListener(resizeEvt,recalc,false);
doc.addEventListener('DOMContentLoaded',recalc,false);})(document,window);
在以前，如果我们想同一个网站对不同设备（比如PC端，手机端，平板端等等）提供支持，一般性的做法是针对不同的设备额外实现一套页面，在web端判断出访问设备类型时再路由到不同的实现。
这种做法的弊端很明显，因为额外的实现，所以后续的更新及维护都比较繁琐且成本越来越高。那么我们有没有一种方法，就是只有一份实现但是可以根据不同的设备自动做展现上的调整。Media Query为这种思路的实现提供了支持。
@media screen and (min- 961px) and (max- 1200px) {
p {
color: pink;
}
}
上面代码的含义是指，当展现页面的宽度大于960px且小于1200px时，将p标签的字体颜色设置为粉色。
自适应（响应式）网页设计
我们可以使用CSS3的Media Query做一些自适应的网页设计。比如，
<head>
<link rel="stylesheet" media="screen and (max- 480px)" href="tiny.css" />
<link rel="stylesheet" media="screen and (min- 481px) and (max- 600px)" href="small.css" />
<link rel="stylesheet" media="screen and (min- 601px) and (max- 960px)" href="middle.css" />
<link rel="stylesheet" media="screen and (min- 961px)" href="pc.css" />
</head>
减少css文件的解析，将所有的媒体查询代码写在同一个css文件中
<head>
<link rel="stylesheet" href="style.css" />
</head>
/*以下为css*/
@media screen and (max- 480px) {
/* your css code */
}
@media screen and (min- 481px) and (max- 600px) {
/* your css code */
}
/* more css code */
以下是功能性示例网站：
- 不同的屏幕大小将导致页面的侧栏发生变化： http://hicksdesign.co.uk/
- 不同的屏幕大小将导致页面导航栏和图片行数发生变化：http://alistapart.com/d/responsive-web-design/ex/ex-site-FINAL.html
- 不同的屏幕大小将导致页面图片的分列不同：http://colly.com/
- 七牛后台官网，使用flex布局，不同屏幕变化，整体布局自适应： https://portal.qiniu.com/signin
所谓的自适应布局远远没有这么简单，并不是靠着在不同屏幕大小上对页面布局做一些调整就可以了。
它还将面临下面的几个问题，
- 不同屏幕尺寸下，图片（视频）等资源的展示如何处理
- 在较小的屏幕尺寸下，往往需要对一些元素进行隐藏，这势必会造成流量（带宽资源）的浪费
- 即使一套页面可以自适应好几种设备了，此时一旦有更新，需要同时维护各个设备相关的css代码并且要做好协调
关于Media Query浏览器的兼容性，除了IE8及其以下的浏览器不支持，其他的主流浏览器基本上都支持
一些PC端的媒体查询断点，断点，断点，重要的事情说三遍：
百度分辨率使用情况查询，可以查询网民地域分布，浏览器市场等，主要是可以查询哪种分辨率使用人数最多：http://tongji.baidu.com/data/screen
/* 无论pc和手机都会显示响应式，不满足要求 （736px为iPhone6 plus横屏渲染宽度，但在pc上浏览器缩小到736px时也有效）*/
@media screen and (max- 736px) { }
/*pc上也会显示给手机做的响应式，不满足要求 （添加设备宽）*/
@media screen and (max- 736px) and (max-device- 1920px) { }
/* pc chrome浏览器拖动宽高为400*800时(max- 414px) and (orientation:portrait)有效，不符合要求；
再拖动宽高为600*500时，screen and (max- 736px) and (orientation:landscape)有效，不符合要求。 */
@media screen and (max- 414px) and (orientation:portrait), screen and (max- 736px) and (orientation:landscape) { }
/* 加上更加严格的横竖屏状态 portrait竖屏 —— landscape横屏 */
@media screen and (max- 414px) and (max-device- 1080px) and (orientation:portrait),
screen and (max- 736px) and (max-device- 1920px) and (orientation:landscape) { }
/* 最后一版，bug出现 MacBook pro(1280 * 800 2倍屏上*/
@media screen and (max- 736px) and (max-device- 736px),
screen and (max- 736px) and (-webkit-min-device-pixel-ratio: 2.0) { }
断点的另一种理解：特定的浏览器宽度下，页面元素出现效果不佳时添加断点。
问题1：屏幕变宽，页面中可能会出现过多空白区域。应当调节元素宽度或者设置其他方式自动来补充页面留白.
问题2：写死高度可能使内容超出模块范围，出现截取或者错版的问题。
问题3：浮动容易导致错版。
问题5：按钮、图片使用一致的对齐方式。
知名互联网公司 移动端字体大小
| 类型 | 基准字体 | 字体区间 |
|---|---|---|
| 国外官网类 | 18~16px | 大字体 ≈30px 标题字体 22px~18px正文字体 18~14px底部最小字体 14~12px |
| 网购类 | 14~12px | 标题 16px正文 14~12px底部最小字体 12px |
| 国内媒体类 | 16px | 标题 22px~18px正文 18~16px附加信息 12px底部最小字体 12px |
行高为 1.3、1.35、1.45、1.5
参考链接：
http://www.w3ctech.com/topic/874
http://blog.gejiawen.com/2015/05/18/css3-media-query-and-responsive-design/