浏览器兼容和移动端适配方案

1.浏览器兼容：

一、css兼容:

不同浏览器的标签默认的margin和padding不同

问题症状：随便写几个标签，不加样式控制的情况下，各自的margin 和padding差异较大。

碰到频率: 100%

解决方案：

CSS里 *{margin:0;padding:0;} 但是性能不好

一般我们会引入reset.css样式重置；

css3新属性，加浏览器前缀兼容早期浏览器

-moz- /* 火狐浏览器 /

-webkit- / Safari, 谷歌浏览器等使用Webkit引擎的浏览器 /

-o- / Opera浏览器(早期) /

-ms- / IE */

哪些css3属性需要加：

定义关键帧动画 @keyframes

css3中的变形（transform）、过渡(transtion)、动画(animation)

border-radius 圆角

box-shadow 盒子阴影

flex 弹性布局

图片默认有间距

问题症状：几个img标签放在一起的时候，有些浏览器会有默认的间距，通配符清除间距也不起作用。

碰到几率： 20%

解决方案：使用float属性为img布局(所有图片左浮)

块属性标签float后，又有横行的margin情况下，IE 浏览器margin加倍的问题

问题症状: 常见症状是IE6中后面的一块被顶到下一行

解决方案：设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。解决方案是在这个div里面加上display:inline;

二、js兼容：

事件对象兼容

e = e || window.event;

阻止事件冒泡兼容

event.stopPropagation? event.stopPropagation():event.cancelBubble=true;

阻止默认行为兼容

evt.preventDefault?evt.preventDefault():evt.returnValue=false;

事件监听兼容

addEventListener ? addEventListener : attachEvent()

removeEventListener() ? removeEventListener() : detachEvent()

事件目标对象兼容

var src = event.target || event.srcElement;

2.移动端兼容和适配：

移动端适配方案：

1.百分比方案

原理

使用百分比% 定义宽度，高度用px固定，根据可视区域实时尺寸进行调整，尽可能适应各种分辨率，通常使用max-width/min-width控制尺寸范围过大或者过小。

优势

原理简单，不存在兼容性问题

不足

如果屏幕尺度跨度太大，相对设计稿过大或者过小的屏幕不能正常显示，在大屏手机或横竖屏切换场景下可能会导致页面元素被拉伸变形，字体大小无法随屏幕大小发生变化。...设置盒模型的不同属性时，其百分比设置的参考元素不唯一，容易使布局问题变得复杂

2.rem方案

原理

rem是相对长度单位，rem方案中的样式设计为相对于根元素font-size计算值的倍数。根据屏幕宽度设置html标签的font-size，在布局时使用 rem 单位布局，达到自适应的目的，是弹性布局的一种实现方式。

不足

不是纯css移动适配方案，需要引入js脚本在头部内嵌一段 js脚本监听分辨率的变化来动态改变根元素的字体大小，css样式和 js 代码有一定耦合性，并且必须将改变font-size的代码放在 css 样式之前。

3.vh/vw方案

原理

视口是浏览器中用于呈现网页的区域，移动端的视口通常指的是布局视口

vw : 1vw 等于视口宽度的 1%
vh : 1vh 等于视口高度的 **1% **
vmin : 选取 vw 和 vh 中最小的那个
vmax : 选取 vw 和 vh 中最大的那个

使用 css 预处理器把设计稿尺寸转换为 vw 单位，包括文本，布局高宽，间距等，使得这些元素能够随视口大小自适应调整。

优势

纯 css 移动端适配方案，不存在脚本依赖问题...相对于 rem 以根元素字体大小的倍数定义元素大小，逻辑清晰简单，视口单位依赖于视口的尺寸 "1vw ＝ 1/100 viewport width"，根据视口尺寸的百分比来定义元素宽度

不足

存在一些兼容性问题，Android4.4以下不支持

4.rem+vw/vh方案

原理

vw/vh 方案能够实现宽度和高度的自适应，并且逻辑清晰，由于其被支持得较晚，所以存在一定的兼容性问题。将 vw/vh 方案与 rem 方案相结合，给根元素设置随视口变化的vw单位，可以通过postcss-plugin-vwtorem将其转换。具体的计算过程为：

对于1080px宽的设计稿，设置默认根字号的大小为100px，那么设计稿中1px对应的是 100vw/1080 = 0.0925926vw，并且 1rem = 100px，也就可以得到1rem = 9.256926vw

同时可以使用媒体查询限制根元素的最大最小值，实现对页面的最大最小宽度限制，对用户的视觉体验更好。

实用性

rem 弹性布局方式作为移动端web页面适配方法，后期从 rem 过渡到 vw ，只需要通过改变根元素大小的计算方式不需要其他处理。vw 将会成为一种更好的适配方式，目前由于兼容性的原因得不到广泛应用。rem+vw/vh 不存在 vw/vh 的兼容性问题，可以成为由 rem 向 vw/vh 转变的一种过渡方案。

浏览器兼容和移动端适配方案相关推荐

小小Mac:Web移动端适配方案
一.前言在过去的几年时间里,移动端web野蛮生长,智能机的Android阵营和IOS阵营分庭抗礼,随之产生了多个系统版本(系统版本多样);五花八门的屏幕尺寸.屏幕展示技术(如大名鼎鼎的Retina技 ...
flex 移动开发 html5,[ html5 ] 移动端适配方案 flex布局+rem布局
viewport视口 viewport是严格的等于浏览器的窗口.viewport与跟viewport有关的meta标签的关系,详细建议读一读这篇文章:移动前端开发之viewport的深刻理解,view ...
h5响应式布局、PC和移动端适配方案
前言春招真的是太卷了,让我怀疑春招到底在招谁(是我太菜惹qaq).总之还是不能松懈下来,总结一下在实习期间遇到的h5的响应式布局.PC和移动端适配方案的选择以及一些问题.本文部分文案由chat-gp ...
CSS移动端适配方案
文章目录移动端适配移动端适配介绍视口的介绍布局视口和视觉视口理想视口移动端适配方案 rem适配方案基本介绍单位换算 vw适配方案移动端适配移动端适配介绍移动互联网的快速发展,让人 ...
移动端适配方案有哪几种？
虽然我们课程明确的区分各种移动端适配方案,但依然有很多同学搞不清楚移动端等比适配和响应式,这里对移动端主流适配方案给大家做一个分析. 移动端适配是指同一个页面可以在不同的移动端设备上都有合理的布局.主 ...
H5移动端适配方案rem/vw
前言在讲解适配方案之前,我们聊聊为什么要做适配? 因为视口.逻辑像素.分辨率这些变量的不同,在每个设备展示都不一样,需要一种方案来统一. 物理像素:也就是分辨率,一个物理像素是显示器上的最小的物理显 ...
移动端适配方案(rem和vw vh适配)(css预处理器-less)
适配方案: 目前移动端适配方案有两种: 1.flex+rem单位当前市面上用的比较多相对主流(比如小米和淘宝移动端) 2.flex+viewport width/viewport height(v ...
一些常见的移动端适配方案，你了解吗？
前言移动端设备的尺寸很多,而 UI 设计稿一般只会基于一个尺寸(一般是 375px 或 750px )进行设计. 目前移动端适配方案有多种,本文将介绍一些具有代表性的适配方案. 媒体查询 @medi ...
移动端适配方案px2rem
移动端的适配方案 React 暴露webpack配置,即 react-scripts 包 npm run eject ⚠️ 在运行该命令的时候,要先将已经修改的文件提交到本地仓库中,否则会报错! 安装 ...

浏览器兼容和移动端适配方案

浏览器兼容和移动端适配方案相关推荐

最新文章

热门文章