@zyzgroup/core-web 0.1.3 → 0.1.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/better.css +26 -21
- package/dist/zyzgroup_core_web.iife.js +24 -25
- package/dist/zyzgroup_core_web.iife.js.map +1 -1
- package/dist/zyzgroup_core_web.js +1627 -1621
- package/dist/zyzgroup_core_web.js.map +1 -1
- package/dist/zyzgroup_core_web.umd.cjs +25 -26
- package/dist/zyzgroup_core_web.umd.cjs.map +1 -1
- package/package.json +1 -1
- package/types/hooks/useSafeArea.d.ts +4 -4
- package/types/hooks/useSafeArea.d.ts.map +1 -1
- package/types/theme.d.ts.map +1 -1
- package/dist/theme.css +0 -62
package/dist/better.css
CHANGED
|
@@ -11,6 +11,17 @@
|
|
|
11
11
|
(var(--viewport-max) - var(--viewport-min))
|
|
12
12
|
);
|
|
13
13
|
}
|
|
14
|
+
:host {
|
|
15
|
+
--min-font-size: 16;
|
|
16
|
+
--max-font-size: 24;
|
|
17
|
+
--viewport-min: 375;
|
|
18
|
+
--viewport-max: 1024;
|
|
19
|
+
--font-size: calc(
|
|
20
|
+
var(--min-font-size) * 1px + (var(--max-font-size) - var(--min-font-size)) *
|
|
21
|
+
(100vw /* or 100cqw */ - var(--viewport-min) * 1px) /
|
|
22
|
+
(var(--viewport-max) - var(--viewport-min))
|
|
23
|
+
);
|
|
24
|
+
}
|
|
14
25
|
|
|
15
26
|
/* *,*::before,*::after */
|
|
16
27
|
html,
|
|
@@ -103,7 +114,6 @@ html {
|
|
|
103
114
|
font-family: system-ui, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI",
|
|
104
115
|
"PingFang SC", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans",
|
|
105
116
|
"Helvetica Neue", sans-serif;
|
|
106
|
-
|
|
107
117
|
text-rendering: optimizeLegibility;
|
|
108
118
|
-webkit-font-smoothing: antialiased;
|
|
109
119
|
-moz-osx-font-smoothing: grayscale;
|
|
@@ -111,41 +121,34 @@ html {
|
|
|
111
121
|
text-size-adjust: none;
|
|
112
122
|
/* 自动平滑滚动 */
|
|
113
123
|
scroll-behavior: smooth;
|
|
114
|
-
|
|
115
124
|
background-color: #ffffff;
|
|
116
125
|
color: #333333;
|
|
126
|
+
width: 100%;
|
|
127
|
+
width: 100vw;
|
|
128
|
+
height: 100%;
|
|
129
|
+
height: 100vh;
|
|
117
130
|
}
|
|
118
131
|
|
|
119
132
|
body {
|
|
120
133
|
position: relative;
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
134
|
+
width: 100%;
|
|
135
|
+
width: 100vw;
|
|
136
|
+
height: 100%;
|
|
137
|
+
height: 100vh;
|
|
126
138
|
/*局部滚动使用弹性滚动效果*/
|
|
127
139
|
-webkit-overflow-scrolling: touch;
|
|
128
|
-
|
|
129
|
-
/* constant 函数兼容 iOS 11.2 以下*/
|
|
130
|
-
padding-top: constant(safe-area-inset-top);
|
|
131
|
-
padding-bottom: constant(safe-area-inset-bottom);
|
|
132
|
-
padding-left: constant(safe-area-inset-left);
|
|
133
|
-
padding-right: constant(safe-area-inset-right);
|
|
134
|
-
/* env 函数兼容 iOS 11.2 */
|
|
135
|
-
padding-top: env(safe-area-inset-top);
|
|
136
|
-
padding-bottom: env(safe-area-inset-bottom);
|
|
137
|
-
padding-left: env(safe-area-inset-left);
|
|
138
|
-
padding-right: env(safe-area-inset-right);
|
|
139
140
|
}
|
|
140
141
|
|
|
141
142
|
html,
|
|
142
143
|
body {
|
|
143
144
|
font-size: 16px;
|
|
144
|
-
/*
|
|
145
|
+
/*
|
|
146
|
+
font-size: clamp(
|
|
145
147
|
var(--min-font-size) * 1px,
|
|
146
148
|
var(--font-size),
|
|
147
149
|
var(--max-font-size) * 1px
|
|
148
|
-
);
|
|
150
|
+
);
|
|
151
|
+
*/
|
|
149
152
|
line-height: 1.4;
|
|
150
153
|
}
|
|
151
154
|
|
|
@@ -375,7 +378,7 @@ The solution for this is to use the hover media query. It's possible to detect i
|
|
|
375
378
|
https://developer.mozilla.org/en-US/docs/Web/CSS/@media/hover
|
|
376
379
|
*/
|
|
377
380
|
@media (hover: hover) {
|
|
378
|
-
/* .
|
|
381
|
+
/* .a:hover {} */
|
|
379
382
|
}
|
|
380
383
|
|
|
381
384
|
@media (prefers-color-scheme: dark) {
|
|
@@ -405,6 +408,8 @@ https://developer.mozilla.org/en-US/docs/Web/CSS/@media/hover
|
|
|
405
408
|
/* 桌面电脑断点 */
|
|
406
409
|
@media (max-width: 1024px) {
|
|
407
410
|
}
|
|
411
|
+
@media (min-width: 1024px) {
|
|
412
|
+
}
|
|
408
413
|
|
|
409
414
|
@media (min-width: 1216px) {
|
|
410
415
|
}
|