---
title:样式兼容
date: 2019-08-08 20:30:00
updated: 2019-08-08 20:30:00
categories:
- 浏端兼容
- 网页开发
tags:
- css
---
关于如何解决浏览器样式兼容的一些技术/经验分享
解答思维？
样式兼容=客户需求=产品需求=哪些特性+哪些终端+哪些系统+哪些浏端+哪些地区+使用占比
01.解决网页样式/脚本兼容的问题，其实就是要理清客户的需求。因为客户需求决定了产品需求，对能/要使用哪些特性有影响。
02.解决网页样式/脚本兼容的问题，从客户那获取那方面的信息。想了解客户要支持哪些终端（车载设备？电视设备？桌面设备？手机？平板？。。。），要支持哪些操作系统（android？window？linux?iso?），要支持哪些浏览器(微软的ie/edge,苹果的iso,火狐,uc等)以及版本，要支持哪些地区的人使用（全球？亚洲？中国？）以及用户占比（比如是所有的中国人的浏览器还是80%的中国人的浏览器）
一些工具？
确定哪些浏览器是我们想要兼容的，可使用browserslist工具查找。这在了解客户需求后或想设置兼容哪些版本时，是很有帮助的。
01.首先通过在.browserslistrc文件中写上相关配置。
02.通过npx browserslist命令，查看本项目想要兼容的平台版本及浏览器种类和版本。
确定某个特性是否可以在相关平台/浏览器中可用。可通过caniuse-cmd工具（命令行）。这在编码css或js前很实用。
01.比如想知道css的flex特性是否可以使用caniuse flex;
02.比如想指定web的websockets接口是否可以使用caniuse websockets。
当然，也可以直接在caniuse的feat-index中查看。（网页版）
01.比如想知道css的flex特性是否可以使用search=flex
02.从表中可以看到，目前为止(2019.08.10)，在中国88.65%的用户浏览器是完全支持的，3.68%的用户浏览器是部分支持，总共92.64%的用户浏览器能够支持。
已经编好了样式，想知道那些我们想兼容的浏览器中，哪些样式的特性是可以用的，哪些不能用。通过doiuse工具命令版/接口版、网页版可以做到。这在选择组件类库时很有用，或者在确定编好的css/js后是否支持想要兼容的浏览器表很有用。
01.比如想知道dist目录下的app.css能否用在这些浏览器上————ie9或ie9以上，或全球范围内1%的用户可用，或最新的浏端的2个版本，输入命令：doiuse --browsers "ie >= 9, > 1%, last 2 versions" ./dist/app.css
如果想使用某个特性，想知道支持多少的用户，可用使用它iwanttouse
在网站中插入浏端的支持情况,可用CanIUse Embed工具
想在readme.md文件中插入浏览器兼容问题，可用选择该工具browsers-support-badges
想知道某浏览器的使用情况，可参考caniuse:browser-usage-table，statcounter:browser-market-share
01.近一年来(201807-201907)，在中国，各浏览器的使用占比。这在要决定支持哪些浏览器时，可能会用到。
02.近一年来(201807-201907)，在中国，各个系统的使用占比。这在要决定支持哪些系统时，可能会用到。
03.近一年来(201807-201907)，在中国，各个终端的使用占比。这在要决定支持哪些终端时，可能会用到。
此处的终端仅为（手机/平板/桌面），其他终端的数据，比如车载/电视等，这里没有提供。
04.近一年来(201807-201907)，在中国，搜索引擎的使用占比。这在要做seo优化时，可能会用到。
05.近一年来(201807-201907)，在中国，社交媒体的使用占比。
06.近一年来(201807-201907)，在中国，设备尺寸的使用占比。
网友评论