main.scss 1.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140
  1. @font-face {
  2. font-family: 'Source Han Sans CN';
  3. src: url('~/assets/fonts/SourceHanSansCN-VF.ttf.woff2') format('woff2');
  4. font-weight: 200 900;
  5. font-style: normal;
  6. font-display: swap;
  7. }
  8. body,
  9. html {
  10. background-color: #030014;
  11. font-family: 'Source Han Sans CN', sans-serif;
  12. }
  13. // 断点定义
  14. // - mobile: ≤ 767px (手机)
  15. // - tablet: 768px - 1024px (平板)
  16. // - desktop: > 1024px (桌面端)
  17. // 手机端断点 (≤ 767px)
  18. @media (max-width: 767px) {
  19. html {
  20. font-size: clamp(32px, 10vw, 46px);
  21. }
  22. }
  23. // 平板断点 (768px - 1024px)
  24. @media (min-width: 768px) and (max-width: 1024px) {
  25. html {
  26. font-size: clamp(37.5px, 5vw, 45px);
  27. }
  28. }
  29. // 平板横屏适配 (1025px - 1280px)
  30. @media (min-width: 1025px) and (max-width: 1280px) {
  31. html {
  32. font-size: 42px;
  33. }
  34. }
  35. html,
  36. body,
  37. ul,
  38. li,
  39. ol,
  40. dl,
  41. dd,
  42. dt,
  43. p,
  44. h1,
  45. h2,
  46. h3,
  47. h4,
  48. h5,
  49. h6,
  50. form,
  51. fieldset,
  52. legend,
  53. img {
  54. margin: 0;
  55. padding: 0;
  56. }
  57. fieldset,
  58. img,
  59. input,
  60. button {
  61. /*fieldset组合表单中的相关元素*/
  62. border: none;
  63. padding: 0;
  64. margin: 0;
  65. outline-style: none;
  66. }
  67. ul,
  68. ol {
  69. list-style: none; /*清除列表风格*/
  70. }
  71. input {
  72. padding-top: 0;
  73. padding-bottom: 0;
  74. }
  75. select,
  76. input {
  77. vertical-align: middle;
  78. }
  79. select,
  80. input,
  81. textarea {
  82. font-size: 12px;
  83. margin: 0;
  84. }
  85. textarea {
  86. resize: none;
  87. }
  88. /*防止多行文本框拖动*/
  89. img {
  90. border: 0;
  91. vertical-align: middle;
  92. }
  93. /* 去掉图片低测默认的3像素空白缝隙*/
  94. table {
  95. border-collapse: collapse; /*合并外边线*/
  96. }
  97. .clearfix:before,
  98. .clearfix:after {
  99. content: '';
  100. display: table;
  101. }
  102. .clearfix:after {
  103. clear: both;
  104. }
  105. .clearfix {
  106. *zoom: 1; /*IE/7/6*/
  107. }
  108. h1,
  109. h2,
  110. h3,
  111. h4,
  112. h5,
  113. h6 {
  114. text-decoration: none;
  115. font-weight: normal;
  116. font-size: 100%;
  117. }
  118. s,
  119. i,
  120. em {
  121. font-style: normal;
  122. text-decoration: none;
  123. }