less rem移動端適配 PC

//宣告

@test_width:300px;

// 混合

.box

//混合 可以帶引數

巢狀 &

less

// 變數

// 適配主流裝置
@adapterdevicelist:320px,360px,375px,384px,400px,414px,424px,480px,540px,640px,720px,750px;
// 裝置的種類
@len:length(@adapterdevicelist);
// 預設基準值
@basefontsize:100px;
// 設計稿尺寸
@psdwidth:750px;
// 混入
// less中的index是從1開始的，比起索引，應該叫做序號
.adaptermixin(@index:1) when (@index<=@len)
}.adaptermixin(@index+1);} 
// 適配
.adaptermixin();

以下是less生成的css**：

@media (min-width: 320px) 

}@media (min-width: 360px) 
}@media (min-width: 375px) 
}@media (min-width: 384px) 
}@media (min-width: 400px) 
}@media (min-width: 414px) 
}@media (min-width: 424px) 
}@media (min-width: 480px) 
}@media (min-width: 540px) 
}@media (min-width: 640px) 
}@media (min-width: 720px) 
}@media (min-width: 750px) 
}

編譯過後與css版本一樣,但更靈活，自動計算，適用手機與pc;

html;

//根據傳入的螢幕尺寸@viewportwidth計算出與初始@firstviewportwidth的比
例，然後將預設的fontsize> @defaultfontsize對應的放大縮小
.media(@viewportwidth,@firstviewportwidth:1920px)
};.media(1024px);     //所要設配的螢幕尺寸
.media(1366px);
.media(1280px);
.media(1440px);
.media(1600px);
.media(1920px);
}@media screen and (max-width: 1440px) 
}

pc端適配移動端

1.允許網頁寬度自動調整在網頁 的頭部，加入一行viewport元標籤所有主流瀏覽器都支援這個設定，包括ie9。對於那些老式瀏覽器 主要是ie6 7 8 需要使用css3 mediaqueries.js2.不使用絕對寬度由於網頁會根據螢幕寬度調整布局，所以不能使用絕對寬度的布局，也不能使用具有絕對寬...

pc端rem適配 聊聊PC端頁面適配

目前pc並沒有像移動端那樣，可以用rem單位這種一站式解決方案，因為pc需要考慮低階瀏覽器，查詢和background size這些新屬性都不能用。設計稿 1920 1080 190 2.16 自己測1920 945 2.03 14寸普通筆記本 1366 768 190 2.36 參考 參考 登入考...

vue專案移動端 pc端適配方案

vue專案移動端 pc端適配方案 npm i lib flexible s npm i postcss px2rem s簡要介紹這兩個包的用途 flexible會為頁面根據螢幕自動新增標籤，動態控制initial scale，maximum scale，minimum scale等屬性的值。post...