Shulou(Shulou.com)06/02 Report--

Xiaobian to share with you what the uni-app style is like, I hope you have something to gain after reading this article, let's discuss it together!

Styles in uni-app

Sass plug-in needs to be downloaded from the official website, follow the prompts

rpx is responsive px, a dynamic unit that adapts to screen width. Based on a 750 wide screen, 750rpx is exactly the screen width. The screen widens, and the actual rpx display is magnified proportionally.

You can import an external style sheet using the @import statement,@import followed by the relative path of the external style sheet you want to import, and the statement ends with;

Styles defined in App.vue are global styles and apply to each page. Styles defined in the vue file under pages are local styles that only apply to the corresponding page and override the same selector in App.vue.

uni-app supports font icons in the same way as normal web projects. Note the following:

font files smaller than 40kb, uni-app will automatically convert them to base64 format;

Font files greater than or equal to 40kb, developers need to convert their own, otherwise the use will not take effect;

Reference paths to font files are recommended to be absolute paths starting with ~@.

style learning test text 123 @import url("./ a.css");//imported external css file .box1{ width: 350rpx; //rpx can be used not only for boxes but also for text height: 350rpx; background: red; font-size: 50rpx; color: #FFFFFF; text{ color: pink; } }

Define common global styles in App.vue

/* Public css per page */ //global style, will be overwritten by local style @import url("./ static/fonts/iconfont.css"); .box1{ background: pink; } After reading this article, I believe you have a certain understanding of "what is the style in uni-app". If you want to know more about it, please pay attention to the industry information channel. Thank you for reading!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.