Uni是一個跨平臺的開發框架,可以在多個平臺上共享代碼,因此在開發流程中CSS樣式也是非常重要的一部分。
/*基礎樣式*/ body{ background-color: #F5F5F5; font-size: 16px; color: #333333; margin: 0; padding: 0; } /*全局樣式*/ .container{ width: 100%; max-width: 750rpx; margin: 0 auto; padding: 20rpx; } /*按鈕樣式*/ .btn{ display: inline-block; padding: 10rpx 20rpx; font-size: 16px; color: #FFFFFF; background-color: #4A90E2; border-radius: 4rpx; text-align: center; cursor: pointer; } /*表單樣式*/ .form-item{ margin-top: 20rpx; } .form-item label{ display: inline-block; width: 80rpx; text-align: right; margin-right: 20rpx; } .form-item input{ display: inline-block; width: calc(100% - 100rpx); padding: 10rpx; border: 1px solid #CCCCCC; border-radius: 4rpx; box-sizing: border-box; }
上面的代碼就是Uni中常用的一些基礎樣式和全局樣式,其中還包括了按鈕樣式和表單樣式。由于Uni跨平臺,因此需要使用rpx作為單位,它是一個相對單位,可以根據屏幕的寬度進行自適應調整。代碼中的box-sizing屬性是為了保證元素的寬度和高度不變,即使添加了border和padding,這樣可以更好的控制元素的布局。
在開發中,我們還需要針對不同平臺、不同設備做一些適配工作,例如在iOS平臺上用戶會在工具欄上拖動屏幕,因此我們需要使用iOS的safe-area來進行布局。
/*iOS適配*/ #app{ height: 100%; } .uni-view{ height: calc(100% - env(safe-area-inset-top) - env(safe-area-inset-bottom)); }
以上代碼是關于iPhone X及以上設備的適配,其中#app設置了高度為100%以填滿整個屏幕,.uni-view則設置了高度為100%減去上下的safe area高度,以確保用戶界面不會超出工具欄范圍。
總之,CSS在Uni的開發過程中是非常重要的一部分,從基礎樣式到對不同平臺和設備的適配,都需要仔細考慮和處理。
上一篇vb運行 css