浏览器兼容与响应式布局

Posted 2020-08-10 礼拜16

主流浏览器有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" />

2. 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);