dumi-theme-default
dumi-theme-mobile
viewport
and root font-size
for demo previewIt should be noted that if you use the responsive scheme of rem, the rem unit should also be used in the style source code.
It is recommended to refer to the antd-mobile scheme and set the Less variable as the basic unit, and then as needed configure HD variables at compile time control the final rendering value.
The HD solution can be switched through the themeConfig
configuration item in the dumi configuration file, the configuration method is as follows:
// .umirc.tsexport default {// ...themeConfig: {hd: {// umi-hd 750 HD solution (default value)[{ mode: 'vw', options: [100, 750] }],// Disable HDrules: [],// Switch HD schemes according to different device screen width breakpointsrules: [{ maxWidth: 375, mode: 'vw', options: [100, 750] },{ minWidth: 376, maxWidth: 750, mode: 'vw', options: [100, 1500] },],// More rule: https://github.com/umijs/dumi/blob/master/packages/theme-mobile/src/typings/config.d.ts#L7}}}
If you have created a good dumi theme and want to share it with everyone.
Please send your theme information through Pull Request to this document.