less+remモバイル端子適合+PC
2507 ワード
//声明@test_width:300px;
//ミックス.box{width:@test_width;height:@test_width;backgrund:yellowgreen;.border//混合パラメータ付き
ネスト&less
less反復構文を使用して、主流の各デバイスサイズにメディアクエリーを設定し、適応を実現します.@adapterDeviceListという配列に追加できるデバイスがあれば、後期のメンテナンスが容易です.
以下はlessによって生成されたcssコードです.
lessバージョンpcエンドコンパイル後、cssバージョンと同じですが、より柔軟で、自動計算で、携帯電話とPCに適用されます.
//ミックス.box{width:@test_width;height:@test_width;backgrund:yellowgreen;.border//混合パラメータ付き
ネスト&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){
@media (min-width: extract(@adapterDeviceList,@index)) {
html{
font-size: @baseFontSize/@psdWidth*extract(@adapterDeviceList,@index);
}
}
.adapterMixin(@index+1);
}
//
.adapterMixin();
less反復構文を使用して、主流の各デバイスサイズにメディアクエリーを設定し、適応を実現します.@adapterDeviceListという配列に追加できるデバイスがあれば、後期のメンテナンスが容易です.
以下はlessによって生成されたcssコードです.
@media (min-width: 320px) {
html {
font-size: 42.66666667px;
}
}
@media (min-width: 360px) {
html {
font-size: 48px;
}
}
@media (min-width: 375px) {
html {
font-size: 50px;
}
}
@media (min-width: 384px) {
html {
font-size: 51.2px;
}
}
@media (min-width: 400px) {
html {
font-size: 53.33333333px;
}
}
@media (min-width: 414px) {
html {
font-size: 55.2px;
}
}
@media (min-width: 424px) {
html {
font-size: 56.53333333px;
}
}
@media (min-width: 480px) {
html {
font-size: 64px;
}
}
@media (min-width: 540px) {
html {
font-size: 72px;
}
}
@media (min-width: 640px) {
html {
font-size: 85.33333333px;
}
}
@media (min-width: 720px) {
html {
font-size: 96px;
}
}
@media (min-width: 750px) {
html {
font-size: 100px;
}
}
lessバージョンpcエンドコンパイル後、cssバージョンと同じですが、より柔軟で、自動計算で、携帯電話とPCに適用されます.
html{
@firstViewportWidth: 1920px; // UI
@defaultFontSize: 100px; // fontsize
@media screen and (width: @firstViewportWidth){ //
font-size: @defaultFontSize;
min-width: 100%;
};
// @viewportWidth @firstViewportWidth
, fontsize> @defaultFontSize
.media(@viewportWidth,@firstViewportWidth:1920px){
@media screen and (min-width: @viewportWidth) {
font-size: @defaultFontSize / (@firstViewportWidth /
@viewportWidth)!important;
}
};
.media(1024px); //
.media(1366px);
.media(1280px);
.media(1440px);
.media(1600px);
.media(1920px);
}
@media screen and (max-width: 1440px) {
html {
font-size: 75px !important;
}
}