我們的課程主要是Vue框架，關(guān)于樣式的部分（兼容性、適配、響應(yīng)式）這些是css的范疇了。小伙伴們，需要自己去學(xué)習(xí)，去實(shí)踐。

css中除了rem，還有em，微信小程序里面還rpx，這些有具體的應(yīng)用場(chǎng)景。

實(shí)時(shí)生活中，使用scss的mixin，可以很好解決響應(yīng)式的問題。

配置類似于bootstrap的這種多寬度下的樣式條件，如：

@mixin?respond-to($media)?{
??@if?$media?==?small-screens?{
????@media?only?screen?and?(max-width:?$break-small)?{
??????@content;
??????//???transition:?width?1s;
????}
??}
??@else?if?$media?==?medium-screens?{
????@media?only?screen?and?(min-width:?$break-small?+1?)?and?(max-width:?$break-media){
??????@content;
??????//???transition:?width?1s;
????}
??}
??@else?if?$media?==?big-screens?{
????@media?only?screen?and?(min-width:?$break-media?+?1){
??????@content;
??????//???transition:?width?0.2s;
????}
??}
??@else?if?$media?==?max-screens?{
????@media?only?screen?and?(min-width:?$break-max){
??????@content;
??????//???transition:?width?0.2s;
????}
??}@else?if?$media?==?less-max-screens{
????@media?only?screen?and?(max-width:?$break-max){
??????@content;
??????//???transition:?width?0.2s;
????}
??}
}

再配置一個(gè)變量

//response
$break-small:?320px;
$break-media:?375px;
$break-max:?414px;

寫 px 是不足以適配各個(gè)機(jī)型的，需要用到 rem，建議去學(xué)習(xí)慕課網(wǎng)有關(guān)移動(dòng)端適配的相關(guān)課程。