浏览器兼容与响应式布局

主流浏览器有5种：IE、chrome、firefox、safari、opera.

 

浏览器兼容

„  浏览器私有前缀

  1. -moz-            火狐浏览器
  2. -webkit-          360、苹果、猎豹、搜狗、QQ、 Chrome等浏览器
  3. -o-               Opera/欧朋浏览器
  4. -ms-              IE、百度等浏览器

„  跨浏览器的默认样式

  1. 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" />
  1. Reset.css   移除浏览器的默认样式，然后再根据需要把样式再加回来。

„  React.js 在浏览器中的兼容情况

  1. 从 React v15 开始，React DOM 将不会再支持 IE8 了。而中国还有超过 18% 的人在使用 IE8。使用仍然支持 IE8 的 React v0.14 。
  2. 我们现在使用的版本是 v0.14.6，不支持IE8，支持IE10/11、Egde。火狐、搜狗、360、IE11都有不同程度的兼容问题。

„  Css3 在浏览器中的兼容问题

  1. Caniuse.com/#home   查询css3样式在浏览器中的兼容情况
  2. Css3在Ie中支持不友好，需要在html中加载  ie-css3.htc

„  常用css内 hack 浏览器兼容写法，这次portal的兼容我使用的是选择器的前缀法，条件注释IE10不支持了且条件注释里的代码是不仅仅对css有效，其它兼容问题也可以使用条件注释方法，portal的兼容只有css的样式有问题

  1. -ms- ： @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none){ … }
  2. -webkit-： @media screen and (-webkit-min-device-pixel-ratio:0){ … }
  3. -moz-：@-moz-document url-prefix() { … }

„  使用虚拟机 VM VirtualBox

  1. 下载地址：http://soft.huweishen.com/soft/238.html
  2. 安装教程：http://tech.huweishen.com/gongju/1544.html

响应式布局

„  响应式布局方法

  1. 百分比布局
  2. bootstrap栅格系统
  3. Flex 伸缩盒布局
  4. 媒体查询

 

Porttal里面用了媒体查询，效果不好，因为侧边栏定宽，导致两栏有交叉，还要再研究。

综合：流式布局和弹性布局及配合媒体查询 是 响应性布局的最好方式。

„  媒体查询方法：

  1. 屏幕使用screen;设备使用print;手机设备使用device-width
  2. Window.screen  命令包含显示设备的信息
  3. Screen.height / screen.width 两个命令，用来了解设备的分辨率

„  Head标签中需要引入：

  1. <meta name=”viewport” content=”width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no” />

具体含义如下：

  1. Width: 控制viewport的大小。如device-width为设备的宽度。
  2. Height: 和width相对应，指定高度。
  3. initial-scale: 初始缩放比例，页面第一次加载时的缩放比例。
  4. maximum-scale 允许用户缩放到的最大比例，范围从0到10.0
  5. minimum-scale: 允许用户缩放到的最小比例，范围从0到10.0
  6. user-scalable： 用户是否可以手动缩放，值可以是: yes,ture  可以缩放；no,false 不可以缩放；

„  字体自适应：

  1. 给根元素html,body设置基本字体，单位vw:

html { font-size: calc(112.5% + 4 * (100vw - 600px) / 400); }

  1. 或用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 */

以下是功能性示例网站：

  1. 不同的屏幕大小将导致页面的侧栏发生变化： http://hicksdesign.co.uk/
  2. 不同的屏幕大小将导致页面导航栏和图片行数发生变化：http://alistapart.com/d/responsive-web-design/ex/ex-site-FINAL.html
  3. 不同的屏幕大小将导致页面图片的分列不同：http://colly.com/
  4. 七牛后台官网，使用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/

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/baiyygynui/p/5903749.html