Top

1.reset.css

  1. body,
  2. p,
  3. ul,
  4. ol,
  5. li,
  6. dl,
  7. dt,
  8. dd,
  9. h1,
  10. h2,
  11. h3,
  12. h4,
  13. h5,
  14. h6,
  15. form,
  16. fieldset,
  17. legend,
  18. input,
  19. select,
  20. textarea,
  21. button,
  22. th,
  23. td {
  24.   margin: 0;
  25.   padding: 0;
  26. }
  27. h1,
  28. h2,
  29. h3,
  30. h4,
  31. h5,
  32. h6 {
  33.   font-size: 100%;
  34. }
  35. ul,
  36. dl,
  37. ol {
  38.   list-style: none;
  39. }
  40. img,
  41. fieldset,
  42. input[type='submit'] {
  43.   border: 0 none;
  44. }
  45. img {
  46.   display: inline-block;
  47.   overflow: hidden;
  48.   vertical-align: top;
  49. }
  50. em {
  51.   font-style: normal;
  52. }
  53. strong {
  54.   font-weight: normal;
  55. }
  56. table {
  57.   border-collapse: collapse;
  58.   border-spacing: 0;
  59. }
  60. button,
  61. input[type='button'] {
  62.   cursor: pointer;
  63.   border: 0 none;
  64. }
  65. textarea {
  66.   word-wrap: break-word;
  67.   resize: none;
  68. }
  69. menu {
  70.   margin: 0;
  71.   padding: 0;
  72. }
  73. body {
  74.   -webkit-user-select: none;
  75.   -webkit-text-size-adjust: 100% !important;
  76.   font-family: Helvetica;
  77. }
  78. input[type='number'] {
  79.   -webkit-user-select: text;
  80. }
  81. a,
  82. button,
  83. input,
  84. img {
  85.   -webkit-touch-callout: none;
  86. }
  87. input,
  88. select,
  89. textarea {
  90.   outline: none;
  91. }
  92. a,
  93. button,
  94. input {
  95.   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  96. }
  97. html,
  98. body {
  99.   height: 100%;
  100. }
  101. a {
  102.   text-decoration: none;
  103. }

  1. html

    1. <meta
    2. content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"
    3. name="viewport"
    4. />
    5. <!-- viewport-fit ios11 新特新 适配X 必须为viewport-fit=cover 要不然constant函数不生效-->
    6. <meta
    7. name="viewport"
    8. content="width=device-width, viewport-fit=cover, initial-scale=1, shrink-to-fit=no, user-scalable=0, maximum-scale=1, minimum-scale=1"
    9. />
    10. <meta content="yes" name="apple-mobile-web-app-capable" />
    11. <meta content="black" name="apple-mobile-web-app-status-bar-style" />
    12. <meta content="telephone=no" name="format-detection" />
    13. <meta content="email=no" name="format-detection" />
    14. <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    15. <!-- user-scalable=0 禁止用户缩放 -->
    16. <meta name="theme-color" content="#000000" />
    17. <!-- IOS中禁用将数字识别为电话号码/忽略Android平台中对邮箱地址的识别 -->
    18. <meta name="format-detection" content="telephone=no, email=no" />
    19. <!-- 启用360浏览器的极速模式(webkit) -->
    20. <meta name="renderer" content="webkit" />
    21. <!-- 避免IE使用兼容模式 -->
    22. <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    23. <!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 -->
    24. <meta name="HandheldFriendly" content="true" />
    25. <!-- 微软的老式浏览器 -->
    26. <meta name="MobileOptimized" content="320" />
    27. <!-- uc强制竖屏 -->
    28. <meta name="screen-orientation" content="portrait" />
    29. <!-- QQ强制竖屏 -->
    30. <meta name="x5-orientation" content="portrait" />
    31. <!-- UC强制全屏 -->
    32. <meta name="full-screen" content="yes" />
    33. <!-- QQ强制全屏 -->
    34. <meta name="x5-fullscreen" content="true" />
    35. <!-- UC应用模式 -->
    36. <meta name="browsermode" content="application" />
    37. <!-- QQ应用模式 -->
    38. <meta name="x5-page-mode" content="app" />
    39. <!-- windows phone 点击无高光 -->
    40. <meta name="msapplication-tap-highlight" content="no" />

  2. ios 滚动卡顿解决

    1. <body ontouchstart=""></body>
    1. body,
    2. html {
    3. touch-action: manipulation;
    4. overflow: auto;
    5. -webkit-overflow-scrolling: touch;
    6. }

  3. 特殊机型 ```css / iPhoneX适配 / @media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) { .class { } }

/ 适配iPhone4 分辨率为960x640，web窗口的高度仅有832px，容易引起适配的问题，如页面的主体按钮被隐藏在屏幕外 /

@media (device-height: 480px) and (-webkit-min-device-pixel-ratio: 2) { .class { } }

/ 当小于800px屏幕时，就加载style2.css文件 / @import url(‘style2.css’) screen and (max-device-width: 800px);

  2. 5. iPhone X
  4. 安全区域指的是一个可视窗口范围，处于安全区域的内容不受圆角（corners）、齐刘海（sensor housing）、小黑条（Home Indicator）影响
  6. :::info
  7. viewport-fit<br />iOS11 新增特性，苹果公司为了适配 iPhoneX 对现有 viewport meta 标签的一个扩展，用于设置网页在可视窗口的布局方式，可设置 三个值：<br />auto:
  8. :::
  9. :::info
  10. 默认值，跟 contain 表现一致。页面内容显示在 safe area 内。viewprot-fit:auto 等同于 viewport-fit:contain
  11. :::
  12. :::info
  13. contain:
  14. :::
  15. :::info
  16. 可视窗口完全包含网页内容（左图）。页面内容显示在 safe area 内。viewport-fit:contain
  17. :::
  18. :::info
  19. cover:
  20. :::
  21. :::info
  22. 网页内容完全覆盖可视窗口（右图）。页面内容充满屏幕。viewport-fit:cover
  23. :::
  24. :::info
  25. constant 函数
  26. :::
  27. :::info
  28. iOS11 新增特性，Webkit 的一个 CSS 函数，用于设定安全区域与边界的距离，有四个预定义的变量（单位是 px）：
  29. :::
  30. :::info
  31. safe-area-inset-left：安全区域距离左边界距离
  32. :::
  33. :::info
  34. safe-area-inset-right：安全区域距离右边界距离
  35. :::
  36. :::info
  37. safe-area-inset-top：安全区域距离顶部边界距离
  38. :::
  39. :::info
  40. safe-area-inset-bottom：安全区域距离底部边界距离
  41. :::
  43. :::info
  44. 网页默认不添加扩展的表现是 viewport-fit=contain，需要适配 iPhoneX 必须设置 viewport-fit=cover，不然 constant 函数是不起作用的，这是适配的必要条件。
  45. :::
  46. :::info
  47. 官方文档中提到将来 env()要替换 constant ()，目前还不可用
  48. :::
  49. :::info
  50. 这两个函数都是 webkit 中 css 函数，可以直接使用变量函数，只有在 webkit 内核下才支持
  51. :::
  52. :::info
  53. constant: 针对 iOS < 11.2 以下系统
  54. :::
  55. :::info
  56. env: 针对于 iOS >= 11.2 的系统
  57. :::
  59. <a name="a118aa8f"></a>
  60. #### 适配例子
  62. 第一步：设置网页在可视窗口的布局方式
  63. ```html
  64. <meta name="viewport" content="width=device-width, viewport-fit=cover" />

第二步：页面主体内容限定在安全区域内

  1. body {
  2.   /* 适配齐刘海 */
  3.   padding-top: constant(safe-area-inset-top);
  4.   /* 适配底部黑条 */
  5.   padding-bottom: constant(safe-area-inset-bottom);
  6. }

第三步：fixed 元素的适配

  1. bottom 不是 0 的情况

    1. /* bottom 不是 0 的情况  */
    2. .fixed {
    3. bottom: calc(50px (原来的 bottom 值) + constant(safe-area-inset-bottom));
    4. }

  2. 吸底的情况（bottom=0）

    1. /* 方法 1 ：设置内边距 扩展高度 */
    2. /* 这个方案需要吸底条必须是有背景色的，因为扩展的部分背景是跟随外容器的，否则出现镂空情况。 */
    3. .fix {
    4. padding-bottom: constant(safe-area-inset-bottom);
    5. }
    6. /* 直接扩展高度 */
    7. .fix {
    8. height: calc(60px (原来的高度值) + constant(safe-area-inset-bottom));
    9. }
    1. /* 方法 2 ：在元素下面用一个空 div 填充， 但是背景色要一致 */
    2. .blank {
    3. position: fixed;
    4. bottom: 0;
    5. height: 0;
    6. width: 100%;
    7. height: constant(safe-area-inset-bottom);
    8. background-color: #fff;
    9. }
    10. /* 吸底元素样式  */
    11. .fix {
    12. margin-bottom: constant(safe-area-inset-bottom);
    13. }

  3. 使用@supports 隔离兼容模式

因为只有有齐刘海和底部黑条的机型才需要适配样式，可以用@support 配合使用：

  1. @supports (bottom: constant(safe-area-inset-bottom)) {
  2.   body {
  3.     padding-bottom: constant(safe-area-inset-bottom);
  4.   }
  5. }

因为只有有齐刘海和底部黑条的机型才需要适配样式，可以用@support 配合使用：

  1. @mixin iphonex-css {
  2.   padding-top: constant(safe-area-inset-top); //为导航栏+状态栏的高度 88px
  3.   padding-top: env(safe-area-inset-top); //为导航栏+状态栏的高度 88px
  4.   padding-left: constant(safe-area-inset-left); //如果未竖屏时为 0
  5.   padding-left: env(safe-area-inset-left); //如果未竖屏时为 0
  6.   padding-right: constant(safe-area-inset-right); //如果未竖屏时为 0
  7.   padding-right: env(safe-area-inset-right); //如果未竖屏时为 0
  8.   padding-bottom: constant(safe-area-inset-bottom); //为底下圆弧的高度 34px
  9.   padding-bottom: env(safe-area-inset-bottom); //为底下圆弧的高度 34px
  10. }
  12. @mixin iphonex-support {
  13.   @supports (bottom: constant(safe-area-inset-top)) or
  14.     (bottom: env(safe-area-inset-top)) {
  15.     body.iphonex {
  16.       @include iphonex-css;
  17.     }
  18.   }
  19. }

@media 媒体查询

  1. @mixin iphonex-css {
  2.   padding-top: constant(safe-area-inset-top); //为导航栏+状态栏的高度 88px
  3.   padding-top: env(safe-area-inset-top); //为导航栏+状态栏的高度 88px
  4.   padding-left: constant(safe-area-inset-left); //如果未竖屏时为 0
  5.   padding-left: env(safe-area-inset-left); //如果未竖屏时为 0
  6.   padding-right: constant(safe-area-inset-right); //如果未竖屏时为 0
  7.   padding-right: env(safe-area-inset-right); //如果未竖屏时为 0
  8.   padding-bottom: constant(safe-area-inset-bottom); //为底下圆弧的高度 34px
  9.   padding-bottom: env(safe-area-inset-bottom); //为底下圆弧的高度 34px
  10. }
  12. /* iphonex 适配  */
  13. @mixin iphonex-media {
  14.   @media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
  15.     body.iphonex {
  16.       @include iphonex-css;
  17.     }
  18.   }
  19. }

:::info 100vh 在 ios 的 Safari 和 Chrome 是恒定不变的，并不会随着顶部地址栏和底部工具栏的隐藏而减小。原因大概说的是因为改变视口高度会使页面重新布局，而滚动的同时重新布局会导致影响 fps。所以浏览器厂商选择了视口高度固定为最大值而不随浏览器控件的隐藏改变。
在 ios 的 Safari 和 Chrome 对 env(safe-area-inset-bottom)的表现也不一样，其 Safari 中 env(safe-area-inset-bottom)会随着底部工具栏的隐藏而变化，其值为 0 或 34。而在 Chrome 中 env(safe-area-inset-bottom)被固定为 34 不随工具栏隐藏而改变。
以上信息测试环境为

iPhone Xs Max ::: :::info IOS 12.2 ::: :::info Chrome 74.0.3729.121 :::

  1. .image {
  2.   background-image: url(image@1x.png);
  3. }
  4. @media (min-resolution: 2dppx) {
  5.   .image {
  6.     background-image: url(image@2x.png);
  7.   }
  8. }
  10. meidaImage(@1, @2, @3)
  11.   .image
  12.      background-image: url(@1)
  13.    @media(min-resolution: 2dppx)
  14.       .image
  15.         background-image: url(@2);
  16.    @media(min-resolution: 3dppx)
  17.       .image
  18.         background-image: url(@3);

适配方案

方案一：amfe-flexible+postcss-pxtorem

:::info amfe-flexible：根据设备宽度，修改根元素 html 的大小，以适配不同终端 ::: :::info postcss-pxtorem：将 css 中的 px 转为 rem 单位，用了它就不用自己计算 rem 值了 ::: :::info 注意：amfe-flexible 是 lib-flexible 的优化，主要区别是 amfe-flexible 不会改变视口大小 ::: :::info 安装 + 配置 :::

  1. 安装 amfe-flexible 和 postcss-pxtorem

    1. npm i -s amfe-flexible
    2. npm i postcss-pxtorem --save -dev

  2. 配置 amfe-flexible

    1. // 入口文件main.js中引入
    2. import 'amfe-flexible/index.js'

  3. 在 index.html 中修改 meta

    1. <meta
    2. name="viewport"
    3. content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"
    4. />

:::info amfe-flexible 干了什么呢？ ::: :::info 给元素动态改写 font-size 的值 ::: :::info 设置 1rem = viewWidth / 10 ::: :::info 设置页面刷新时重置 rem ::: :::info 支持 0.5px :::

  1. 配置 postcss-pxtorem 在 vue.config.js 中添加
    1. const pxtorem = require('postcss-pxtorem')
    2. const autoprefixer = require('autoprefixer') 主要用来处理浏览器前缀问题
    3. module.exports = {
    4. css: {
    5.  sourceMap: false,
    6.  loaderOptions: {
    7.    postcss: {
    8.      plugins: [
    9.        autoprefixer(),
    10.        pxtorem({
    11.          unitPrecision: 5, //保留小数位
    12.          selectorBlackList: ['.recharge', '.van'], //过滤的类名
    13.          replace: true, //默认直接替换属性
    14.          mediaQuery: false,
    15.          minPixelValue: 6, //所有小于设置的样式都不被转换
    16.          rootValue: 37.5, //默认根目录字体大小(px)
    17.          propList: ['*'],
    18.        })
    19.      ]
    20.    }
    21.  }
    22. }
    23. }

方案二：postcss-px-to-viewport + vm

:::warning 什么情况下适合使用 vw 呢？
容器适配，可以使用 vw

文本的适配，可以使用 vw

大于 1px 的边框、圆角、阴影都可以使用 vw

内距和外距，可以使用 vw :::

方案三：rem + vw （结合方案一和方案二） 

  1. 1. vite + vant 可以使用postcss-pxtorem, postcss-px-to-viewport vite中暂时缺少参数file对vant适配
  2. 例：file.dirname.includes(path.join('node_modules', 'vant')) ? 375 : 750;
  4. 2. webpack + vant 俩方案都可，推荐使用postcss-px-to-viewport。
  1. // postcss.config.js
  2. const path = require('path');
  3. module.exports = ({ file }) => {
  4.  const designWidth = file.dirname.includes(path.join('node_modules', 'vant')) ? 375 : 750;
  5.  return {
  6.   plugins: {
  7.     "postcss-px-to-viewport": {
  8.       unitToConvert: "px",
  9.       viewportWidth: designWidth,
  10.       unitPrecision: 6,
  11.       propList: ["*"],
  12.       viewportUnit: "vw",
  13.       fontViewportUnit: "vw",
  14.       selectorBlackList: [],
  15.       minPixelValue: 1,
  16.       mediaQuery: true,
  17.       landscape: false
  18.     }
  19.   }
  20.  }
  22.   https://github.com/evrone/postcss-px-to-viewport/blob/master/README_CN.md

H5 在IOS中时间格式 new Date()

不支持的格式：2020-04-15 12:30:59
支持的格式：”2020-04-15 12:30:59”.replace(/-/g, “/”) 斜杠

IOS 浏览器内不支持新建tab跳页面：在H5支付时, form中ios: target=”_self”, android: target=”_blank” 即可

H5中 IOS不支持 伪元素 :active 在doucument 绑定touchstart 事件即可