前言

为了确保项目样式的可维护性和拓展性，我们一般在项目开始，跟ui设计确定一些公共设计规范，比如font-size、font-family、color等等，来统一项目的公共样式。

一、变量

  1. //
  2. // variables.less
  3. // --------------------------------------------------
  5. // font
  6. // --------------------------------------------------
  7. @font-family-default: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft Yahei', Arial, sans-serif;
  8. @font-size-title-default: 18px;
  9. @font-size-master: 16px;
  10. @font-size-main: 14px;
  11. @font-size-default: 12px;
  12. @font-size-secondary: 10px;
  13. @font-weight-bold: 600;
  14. @font-weight: 500;
  15. @font-weight-light: 400;
  16. @line-height-default: 1;
  17. // Colors
  18. // --------------------------------------------------
  19. // 通用
  20. @color-white: #FFF;
  21. @color-blue: #3969FE;
  22. @color-red: #F23D20;
  23. @color-gray: #999;
  24. @color-warn: #FA553C;
  25. // 背景色
  26. @color-bg-white: @color-white;
  27. @color-bg-gray: #F8F8F8;
  28. @color-bg-gray2: #FAFAFA;
  29. @color-bg-gray-light: #F5F5F5;
  30. @color-bg-gray-dark: #F8F9FC;
  31. @color-bg-gray-dark2: #F1F1F1;
  32. @color-bg-blue: @color-blue;
  33. @color-bg-blue-light: #F2F6FF;
  34. @color-bg-blue-dark: #4E79FF;
  35. @color-bg-red-light:rgba(250,85,60,0.05);
  36. // 边框
  37. @color-border-grey: rgba(0,0,0,0.05);
  38. // 字体颜色
  39. @color-text: #333 ; //文案色
  40. @color-text-gray-light: #666; // 浅灰色文案
  41. @color-text-gray: @color-gray; //灰色文案
  42. @color-text-white: @color-white; //有背景色的文案
  43. @color-text-blue: @color-blue;
  44. @color-text-green: #129352; 
  45. @color-text-red: @color-red; // 预警的颜色
  46. @color-text-red-assistant: #FA553C;
  47. @color-text-black: #000;
  48. // 分割线
  49. @color-split-10: rgba(0,0,0,0.1);
  50. @color-split-20: rgba(0,0,0,0.2);
  51. @color-split: rgba(0,0,0,0.05);  //分割线的颜色
  52. @color-split2: rgba(0,0,0,0.07);  //分割线的颜色
  54. // 多弹窗层级问题 z-index
  55. @navbar-z-index: 1000;
  56. @tabbar-z-index: 1000;
  57. @backtop-z-index: 1100;
  58. @search-z-index: 1200;
  59. @product-z-index: 1200;
  60. @search-popup-z-index: @search-z-index + 10;
  61. @category-popup-z-index: @search-z-index - 10;
  63. // componets
  64. // --------------------------------------------------
  65. // chart
  66. @color-chart-blue: #5374E8;
  67. @color-chart-green: #10AC84;
  68. @color-chart-tip-bg: #243850;
  69. // popup
  70. @popup-background-color: @color-white;
  71. @popup-transition-duration: .2s;
  72. // overlay
  73. @overlay-background-color: rgba(0, 0, 0, .4);
  74. // toast
  75. @toast-font-color: @color-white;
  76. @toast-max-width: 70%;
  77. @toast-border-radius: 7px;
  78. @toast-container-padding: 24px;
  79. @toast-message-padding-top: 8.5px;
  80. @toast-background-color: rgba(0, 0, 0, .7);
  81. @toast-icon-font-size: 40px;
  82. @toast-default-width: 148px;
  83. @toast-default-min-height: 137px;
  84. @toast-default-padding: 15px;
  85. @toast-default-font-size: 14px;
  86. @toast-default-message-padding-top: 19px;
  87. @toast-text-min-width: 104px;
  88. @toast-text-font-size: 16px;
  89. @toast-text-padding: 15px 20px;
  90. @toast-position-top-distance: 50px;
  91. @toast-position-bottom-distance: 50px;

二、混合宏函数

  1. //
  2. // mixins.less
  3. // --------------------------------------------------
  5. // special font-family
  6. // --------------------------------------------------
  7. @import 'variables.less';
  9. .PingFangSC-Light() {
  10.     font-family: PingFangSC-Light;
  11. }
  13. .PingFangSC-Regular() {
  14.     font-family: PingFangSC-Regular;
  15.     font-weight: @font-weight-light;
  16. }
  18. .PingFangSC-Medium() {
  19.     font-family: PingFangSC-Medium;
  20.     font-weight: @font-weight;
  21. }
  23. .PingFangSC-Semibold() {
  24.     font-family: PingFangSC-Semibold;
  25.     font-weight: @font-weight-bold;
  26. }
  27. .rem($px) {
  28.      @return ($px / $vw_fontsize ) * 1rem;
  29. }
  30. // flex
  31. // --------------------------------------------------
  33. // 垂直居中
  34. .flex-col-center() {
  35.     display: flex;
  36.     flex-flow: row nowrap;
  37.     align-items: center;
  38. }
  40. // 两侧
  41. .flex-between() {
  42.     display: flex;
  43.     flex-flow: row nowrap;
  44.     align-items: center;
  45.     justify-content: space-between;
  46. }

三、基础

  1. //
  2. // base.less
  3. // --------------------------------------------------
  5. html {
  6.     /*滚动事件发生在 html 元素上；JS 中可以监听 html 的滚动*/
  7.     overflow-y: auto;
  8.     /*让 html 和浏览器窗口高度一致*/
  9.     height: 100%;
  10.     line-height: 1;
  11.     /*少数浏览器默认背景色为浅灰色，所以设置默认背景颜色为纯白*/
  12.     background-color: @color-bg-white;
  13.     -webkit-font-smoothing: antialiased;
  14.     -moz-osx-font-smoothing: grayscale;
  15.    -webkit-text-size-adjust: 100%;
  16. }
  19. html,
  20. body {
  21.     /*body 宽度大 html 度时，某些浏览器会出现内部滚动条；所以设置「html、body」宽度相同且「overflow-x: hidden」*/
  22.     overflow-x: hidden;
  23.     width: 100%;
  24.     padding-bottom: constant(safe-area-inset-bottom);//为底下圆弧的高度 34px
  25. }
  27. body {
  28.     /*设置基本字体配置*/
  29.     font-size: @font-size-main;
  30.     /*让绝对定位元素，根据 body 定位*/
  31.     position: relative;
  32.     /*设置网页基本字体颜色为浅灰色*/
  33.     color: @color-text-gray-light;
  34.     /*使字体渲染更顺滑*/
  35.     -webkit-font-smoothing: antialiased;
  36.     -moz-osx-font-smoothing: grayscale;
  37.     text-rendering: optimizeLegibility;
  38.     -webkit-overflow-scrolling: touch;
  39.     /* body 也增加最大最小宽度限制，避免默认100%宽度的 block 元素跟随 body 而过大过小 */
  40.     max-width: 540px;
  41.     min-width: 320px;
  42. }
  44. #app {
  45.     font-size: initial;//重置页面字体大小恢复为浏览器默认16px，
  46. }
  48. // Use box sizing on all the things!
  49. * {
  50.     box-sizing: border-box;
  51.     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  52.     -webkit-touch-callout: none;
  53. }
  55. body,
  56. p,
  57. h1,
  58. h2,
  59. h3,
  60. h4,
  61. h5,
  62. h6,
  63. dl,
  64. dd,
  65. ul,
  66. ol,
  67. th,
  68. td,
  69. button,
  70. figure,
  71. input,
  72. textarea,
  73. form {
  74.     margin: 0;
  75.     padding: 0;
  76. }
  78. /**
  79.  * 不同浏览器的input、select、textarea的盒子模型宽度计算方式不同，统一为最常见的 content-box
  80.  */
  81. input,
  82. select,
  83. textarea {
  84.     -webkit-box-sizing: content-box;
  85.     -moz-box-sizing: content-box;
  86.     box-sizing: content-box;
  87. }
  89. table {
  90.     /*table相邻单元格的边框间的距离设置为 0*/
  91.     border-spacing: 0;
  92.     /*默认情况下给tr 设置 border 没有效果，如果 table 设置了边框为合并模式：「border-collapse: collapse;」就可以了*/
  93.     border-collapse: collapse;
  94. }
  96. /**
  97.  * 移除浏览器部分元素的默认边框
  98.  * acronym、fieldset … 等其他标签不是很常用，就不会一一列举；如果项目中用到，可以自己单独写
  99.  */
  100. img,
  101. input,
  102. button,
  103. textarea {
  104.     border: none;
  105.     -webkit-appearance: none;
  106. }
  108. input {
  109.     /*由于 input 默认不继承父元素的居中样式，所以设置：「text-align: inherit」*/
  110.     text-align: inherit;
  111. }
  113. textarea {
  114.     /*textarea 默认不可以放缩*/
  115.     resize: none;
  116. }
  119. /**
  120. * 由于以下元素的部分属性没有继承父节点样式，所以声明这些元素的这些属性为父元素的属性
  121. * 取消这些元素 `outline` 样式
  122. */
  123. a,
  124. h1,
  125. h2,
  126. h3,
  127. h4,
  128. h5,
  129. h6,
  130. input,
  131. select,
  132. button,
  133. option,
  134. textarea,
  135. optgroup {
  136.     font-family: inherit;
  137.     font-size: inherit;
  138.     font-weight: inherit;
  139.     font-style: inherit;
  140.     line-height: inherit;
  141.     color: inherit;
  142.     outline: none;
  143. }
  146. /**
  147. * 取消超链接元素的默认文字装饰
  148. * 另外 del、ins 标签的中划线、下划线还是挺好的，就不去掉
  149. */
  151. a {
  152.     text-decoration: none;
  153. }
  155. ol,
  156. ul {
  157.     /*开发中 UI 设计的列表都是和原生的样式差太多，所以直接给取消 ol，ul 默认列表样式*/
  158.     list-style: none;
  159. }
  161. button,
  162. input[type='submit'],
  163. input[type='button'] {
  164.     /*鼠标经过是「小手」形状表示可点击*/
  165.     cursor: pointer;
  166. }
  168. .clearfix {
  169.     &:before,
  170.     &:after {
  171.         content: " ";
  172.         display: table;
  173.     }
  174.     &:after {
  175.         clear: both;
  176.     }
  177. }
  179. .ellipsis {
  180.     overflow: hidden;
  181.     text-overflow: ellipsis;
  182.     white-space: nowrap;
  183.     word-break: break-all;
  184.     word-wrap: normal
  185. }
  187. .multline-ellipsis {
  188.     word-break: break-all;
  189.     overflow: hidden;
  190.     display: -webkit-box;
  191.     text-overflow: ellipsis;
  192.     -webkit-line-clamp: 2;
  193.     -webkit-box-orient: vertical;
  194. }
  196. .pull-right {
  197.     float: right !important;
  198. }
  200. .pull-left {
  201.     float: left !important;
  202. }
  205. .hide,
  206. .hidden {
  207.     display: none !important;
  208. }
  210. .show {
  211.     display: block !important;
  212. }
  214. .invisible {
  215.     visibility: hidden;
  216. }
  218. .vh-center {
  219.     position: absolute;
  220.     left: 50%;
  221.     top: 50%;
  222.     transform: translate(-50%, -50%);
  223. }
  226. // 适配iphoneX等刘海屏苹果手机的吸底元素（目前已知高端机型的dpr都是3）
  227. .ipx-margin-bottom {
  228.     margin-bottom: calc(~"constant(safe-area-inset-bottom)");
  229.     margin-bottom: calc(~"env(safe-area-inset-bottom)");
  230. }
  232. .ipx-padding-bottom {
  233.     padding-bottom: calc(~"constant(safe-area-inset-bottom)");
  234.     padding-bottom: calc(~"env(safe-area-inset-bottom)");
  235. }

四、边框

在移动端web开发中，UI设计稿中设置边框为1像素，前端在开发过程中如果出现border:1px，测试会发现在retina屏机型中，1px会比较粗，即是较经典的移动端1px像素问题

解决问题的方案有多种，这里主要采用 viewport + rem 的方案,同时通过设置对应viewport的rem基准值，这种方式就可以像以前一样写1px了.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>移动端1px问题</title>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <meta name="viewport" id="WebViewport"
        content="width=device-width,initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
    <style>
        html {
            font-size: 11px;
        }
        body {
            padding: 1rem;
        }
        * {
            padding: 0;
            margin: 0;
        }
        .item {
            padding: 1rem;
            border-bottom: 1px solid gray;
            font-size: 1.2rem;
        }
    </style>
    <script>
        var viewport = document.querySelector("meta[name=viewport]");
        var dpr = window.devicePixelRatio || 1;
        var scale = 1 / dpr;
        //下面是根据设备dpr设置viewport
        viewport.setAttribute(
            "content", +
            "width=device-width," +
            "initial-scale=" +
            scale +
            ", maximum-scale=" +
            scale +
            ", minimum-scale=" +
            scale +
            ", user-scalable=no"
        );

        var docEl = document.documentElement;
        var fontsize = 10 * (docEl.clientWidth / 320) + "px";
        docEl.style.fontSize = fontsize;
    </script>
</head>
<body>
    <div class="item">border-bottom: 1px solid gray;</div>
    <div class="item">border-bottom: 1px solid gray;</div>
</body>
</html>

优点：所有场景都能满足，一套代码，可以兼容基本所有布局。
缺点：老项目修改代价过大，只适用于新项目
**

公共集合

// Variables
@import "variables.less";

// Base CSS
@import "base.less";

// Mixins
@import "mixins.less";

// font(自定义图标)
@import "../assets/fonts/iconfont.css";

// border
@import "border.less";