2015年全球主流浏览器市场份额和响应式网页设计原则

    
 
        浏览器每年的一次排行榜又到了，2015年全球主流浏览器的市场份额会是多少呢？而HTML5的出现给浏览器市场带来什么样的冲击呢？响应式的网页设计原则要遵循什么样的浏览器设计原则呢？让我们一起往下看吧！

        在过去的4月份，浏览迷曾带大家简单体验了没定名之前的Spartan浏览器，QQ浏览器也放出了全新的9.0双核测试版本，Chrome浏览器跨入全新的V42时代，360极速浏览器开启V42内核的8.3版本，最后，在微软一年一度的技术大会上，全新Spartan 浏览器最终定名Edge。这些事情是否给浏览器市场份额带来变化呢？一起来看一下2015年4月最新浏览器排行榜。

       来自Net Market Share 的 数据，4月份，占据全球浏览器排行榜首位的仍然是IE浏览器，总市场份额为55.83%，较上个月的56.54%继续出现下降。Chrome浏览器位居第二位，最新市场份额25.68%，2015年3月份同期数据则为24.99%，增长0.69个百分点。Firefox火狐浏览器以11.7%的市场份额位居第三位，而3月份的市场份额为11.89%，有所下降。

       Safari浏览器4月份占据了5.12%的市场份额，较上个月的5%份额出现上升。Opera占据1.19%的市场份额，而3月份则为1.15%。

       具体到浏览器版本，IE11浏览器以25.04%的份额位居第一位（3月份24.22%），IE8以16.05%的份额排名第二（3月份为17.3%）。Chrome 41 版本以8.86%的市场份额位居第三位。IE9则以8.1%的份额排名第四（3月份为8.31%）。

        另一份来自StatCounter的 统计数据则显示： Chrome 浏览器名列第一，市场份额52.96%，而上个月同期数据为52.44%。 IE浏览器位居第二位，市场份额19.85%，3月份同期数据为19.59%，继续下跌。火狐浏览器在2015的4月份中占据18.27%市场份额，较上月份额的18.44%出现小幅下降。Safari浏览器市场份额为5.23%，3月份份额为5.88%，也是小幅下降。第五位的 Opera 市场份额为1.73%，与上月数据相同。

       响应式网页设计是针对多屏幕问题的一个很好的解决方案，但从印刷的视角来看有点困难。没有固定的页面尺寸，没有毫米或英寸，没有任何的物理限制，无 从下手。为了desktop和mobile单独使用像素设计的方法也成为了过去，因为越来越多的设备都可以打开网站。因此，我们需要弄清楚响应式网页设计 的一些基本原则，接受流体网页，而不是与之相抗。为了让它保持简单，我们将着眼于布局（是的，响应式比它更复杂，如果你想了解更多，这是一个很好的开端。）

　　响应式 vs 自适应网页设计

　　它们看起来似乎是相同的，但事实并非如此。这两种方法相辅相成，并没有说哪个是正确的那个是错误的，内容决定一切。

　　内容流动

　　随着屏幕尺寸变小，内容将会占据更多的垂直空间，而下方的内容就会被接着往下推，这就是所谓的流动。如果你是使用像素和磅来进行设计的，这可能会有点棘手，但是当你习惯了之后，就会变得很有意义了。

　　相对单位

　　画布大小可以是desktop、mobile或是它们之间的任何尺寸。像素密度也可以有所不同，所以我们需要灵活的、在各种屏幕上都可以使用的单位。这就是相对单位(如百分比)派上用场的时候了。所以设置50%的宽度也就意味着它会占据屏幕(或视图，即打开的浏览器窗口的尺寸)的一半。

　　断点

　　断点允许布局在预定义的点改变。例如：desktop屏幕上有3列，但是在mobile上只有一列。大多数CSS属性可以根据断点改变。通常你会根据具体的内容来设置断点。如果一个句子超过了屏幕长度，你可能就需要为其添加一个断点。但是使用断点是需要谨慎——当它很难理解什么内容会影响什么内容的时候，它可能会迅速地导致混乱。

　　最大值和最小值

　　有时候，如果内容占据了屏幕的整个宽度是很好的，比如在移动设备上。但是如果是在电视屏幕上，相同的内容，占据了你的屏幕整个的宽度，通常就意义不大了。这就是Min/Max值发挥作用的时候了。比如说，设置width为100%，然后max-width是1000px，那么内容会填满屏幕，但是不会超过1000px。

　　嵌套对象

　　还记得相对位置吗?让很多元素的位置依赖于其它元素来定位是很难控制好的，因此使用容器来包裹元素可以让它更易理解，也更整洁。这就是静态单位(比如像素)发挥作用的时候了。对于你不想要模块化的内容(比如logo或按钮)，它们是有用的。

　　Mobile优先 还是Desktop优先

　　从技术上讲，如果一个项目是从一个较小的屏幕开始，变成较大的屏幕(mobile优先)，还是反过来(desktop优先)，并没有太大的差别。然 而它还是增加了额外的限制，可以帮助你决定是否从mobile优先开始。通常大家在一开始的时候都会两端一起写，所以，还是看看哪个运行起来更好。

　　网页字体 vs 系统字体

　　希望你的网站上有很酷的Futura或Didot字体吗?可以使用网页字体!虽然它们看起来非常棒，但是记住字体放得越多，你加载页面的时间也会越长。在另一方面，加载系统字体确是快如闪电，但当用户本地没有这套字体时，它就会返回默认的字体。

　　位图 vs 矢量图

　　你是否想过在图标上添加很多的细节和花哨的效果?如果想过的话，使用位图比较合适。如果没有，可以考虑使用矢量图。对于位图，使用的是jpg、png或gif格 式的图像，而对于矢量图，最好的选择是SVG或图标字体。每个都有对应的优势和缺点。但是图片的大小也需要重视——网页上的图片必须经过优化。另一个方 面，矢量图通常比较小，但是一些旧版的浏览器不支持。此外，如果它有很多曲线的话，它也可能会比位图要重。所以，慎重选择。

    以上是北京恒泰博远小编为你分享的2015年全球主流浏览器市场份额和响应式网页设计原则，怎么样的主流浏览器规则，去规定什么样的网页设计原则呢？让我们拭目以待吧！