web 页面自适应处理。 其实，要说的是移动端网页自适应。只要设计图宽度标准化（有固定宽度，一般是 750px 宽度为标准），就方便实现整个页面的自适应。
继续阅读
分类目录
如上图，在调试的时候，你会看到 user agent stylesheet 定义的样式，而且是不能改的。
user agent stylesheet是浏览器自动加上的格式，user agent stylesheet将被你在自己的css中设置的任何内容覆盖。它们只是最底层：在没有页面或用户提供的任何css的情况下，浏览器仍然必须以某种方式呈现内容，而css只是描述了这一点。
因此，如果你认为css存在问题，那么你的HTML或css或两者（您没有写任何内容）确实存在问题。
解决方法
- 方法一
由于 user agent stylesheet 的优先级很低，自己写样式覆盖即可。在你的css中添加被user agent stylesheet所覆盖了的样式，例如，我这可以重新定义div的样式：
div{
display: inline-block;
}
操作一波
先安装
yarn add element-china-area-data
然后在 code 中
<el-cascader size="large" :options="options" v-model="selectedOptions" @change="handleChange">
import { regionData , CodeToText } from "element-china-area-data";
handleChange() {
var loc = "";
for (let i = 0; i < this.selectedOptions.length; i++) {
loc += CodeToText[this.selectedOptions[i]];
}
alert(loc);
}
在某些场景下，需要对区域进行首字母排序。不仅要提取出地区的首字母，并且还要对相同首字母的地区也进行排序。
开始
首先，我们有这样的一些数据：
var cityData = [
[
{
"label":"北京市",
"value":1101
}
],
[
{
"label":"天津市",
"value":1201
}
],
[
{
"label":"石家庄",
"value":1301
},
{
"label":"唐山",
"value":1302
},
{
"label":"秦皇岛",
"value":1303
}
]
]
这是一个二维数组，可以先把它弄成一维数组。然后通过 pinyin.js 取出每个 label 的首字母，并且有相同首字母的数据放在同一个数组里。然后进行二次排序。这里在 pinyin.js 中新增加了一个 getFirstChar 方法。
/**
* 获取整个词汇的首字母
* @param {String} str 输入的中文字符串
*/
getFirstChar(str) {
if (typeof(str) != "string")
throw new Error(-1, "函数getCamelChars需要字符串类型参数!");
if (!str) {
throw new Error(-1, "不能是空字符串");
}
str = str.substr(0, 1);
return this._getChar(str);
}
计算如下。
import Pinyin from '../../../static/js/pinyin.js';
let pinyin = new Pinyin();
let temp = {};
let keys = [];
for(let item1 of city) {
for(let item2 of item1) {
if (item2.label == '直辖市') {
continue;
}
let fc = pinyin.getFirstChar(item2.label);
if (temp[fc]) {
temp[fc].push(item2);
} else {
keys.push(fc);
temp[fc] = [item2];
}
}
}
keys = keys.sort();
let list = [{
title: '热门',
letter: 'hot',
value: []
}]
function sortItem(item1, item2) {
return item1['label'].localeCompare(item2['label']);
}
for(let key of keys) {
list.push({
title: key,
letter: key,
value: temp[key].sort(sortItem)
});
}
参考类库
在 uniapp 中，如果 view 定义了 display:flex ，那么 v-show 就无效了。也就是总是 true，总是会显示出来。
想要在小程序中使用区域聚合很不好搞啊。单纯的聚合，腾讯地图小程序就已经支持。可是区域聚合貌似只有高德有。
聚合
高德区划聚合
https://developer.amap.com/demo/amap-ui/demos/amap-ui-districtcluster/top-adcodes
https://developer.amap.com/api/amap-ui/reference-amap-ui/geo/district-cluster
微信聚合
https://developers.weixin.qq.com/miniprogram/dev/api/media/map/MapContext.initMarkerCluster.html
https://developers.weixin.qq.com/miniprogram/dev/component/map.html
高德难言
https://developer.amap.com/faq/other-interface/amap-applets/create-project/66485
既然不支持，又想搞怎么办呢。自己写算法，实现 market 的调整。这个时候，大家就要齐心。放大到一定比例展示省级别，再放大到一定比例显示市级别，再放到一定比列显示县级别，再放到一定比例显示镇级别。就以镇为最小单位，把每个镇里相关的数据放在一个数组里，镇的放在县里依次到省，全国。这样似乎就失去了腾讯地图聚合的初衷了。 地图有 initMarkerCluster 方法和 markerClusterCreate 时间，不用可惜啊。
随着苹果 8 以后的手机等出现，顶部，底部自适应问题是手机应用（app,web,小程序）要解决的问题。对于网页和小程序可以使用 env(safe-area-inset-bottom) 等解决。
env()和constant()，是IOS11新增特性，Webkit的css函数，用于设定安全区域与边界的距离，有4个预定义变量：
- safe-area-inset-left：安全区域距离左边边界的距离
- safe-area-inset-right：安全区域距离右边边界的距离
- safe-area-inset-top：安全区域距离顶部边界的距离
- safe-area-inset-bottom ：安全距离底部边界的距离
而env()和constant()函数有个必要的使用前提，H5网页设置viewport-fit=cover的时候才生效，小程序里的viewport-fit默认是cover。
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
适配底部代码：
height: calc(96rpx+ constant(safe-area-inset-bottom));//兼容 IOS<11.2
height: calc(96rpx + env(safe-area-inset-bottom));//兼容 IOS>11.2
padding-bottom: constant(safe-area-inset-bottom);//兼容 IOS<11.2
padding-bottom: env(safe-area-inset-bottom);//兼容 IOS>11.2
// 先constant再env
文章来源第二个有说到兼容性问题。
文章来源
console.log(0.1+0.2);
# 输出 0.30000000000000004
对于 js 浮点数计算不正确问题，请参考下边：
app 通常会有启动页，引导页和闪屏这三个前奏页面。启动页必须有，不可跳过。引导页通常是第一次启动有和更新版本后有。闪屏可能有广告的嫌疑，用户可点击跳过，也可以等待倒计时跳过。
像 soul 就是强制有 启动页和闪屏。不过闪屏都是一些比较漂亮的图片。
启动页 splash
引导页 guid
闪屏 flash
launchFlag