js의 유연한.js는 Taobao의 유연한 레이아웃 구성표_javascript 기술을 구현합니다.-JS 튜토리얼-php.cn

js의 유연한.js는 Taobao의 유연한 레이아웃 구성표_javascript 기술을 구현합니다.

WBOY

풀어 주다： 2016-05-16 15:23:47

원래의

1395명이 탐색했습니다.

이 글의 내용은 타오바오의 유연한 레이아웃 솔루션인 lib-flexible의 실천 사례를 소개하고, 참고하실 수 있도록 공유하고자 합니다.

1. 페이지 요구사항

페이지는 다음과 같습니다(디자인에 대해 언급하지 마세요. 개발자가 결정하는 것이 아닙니다).

치수 다이어그램(750*1334)은 다음과 같습니다.

그런 다음 아티스트는 750*1334 디자인 초안을 기반으로 내 요구 사항에 따라 다음 자료의 컷아웃을 제공합니다.

다운로드 버튼 2개의 배경 이미지와 로고, 하단 사다리꼴의 그라데이션 배경, 몸체 부분의 모바일 배경 이미지가 포함되어 있습니다. 이 사진들은 모두 750*1334 디자인 초안에서 잘라낸 것이므로 크기는 android.png와 같은 디자인 초안의 원래 크기입니다.

레티나 디스플레이의 문제점을 고려하여 다음 적응 아이디어를 결합합니다.

망막 화면 문제를 해결할 수 있는 가능한 해결책은 다음과 같습니다.

1) devicePixelRatio<=2인 경우 750 디자인 초안에서 이미지를 균일하게 잘라냅니다.

2) devicePixelRatio>=2일 때 이미지는 소위 @3x 디자인 드래프트의 컷 이미지인 750*1.5=1125를 사용합니다.

작가님께서 주신 750*1334 디자인 초안의 모든 컷을 img/@2x 폴더에 넣어두었습니다:

그런 다음 저는 그녀에게 750 디자인 드래프트 벡터를 1.5배로 확대할 수 있도록 도와달라고 요청한 다음 동일한 컷아웃 요구 사항에 따라 @3x 컷아웃을 제공하여 img/@3x 폴더에 배치했습니다.

이론적으로 @3x 아래의 사진 크기는 @2x*1.5 아래의 사진 크기와 같아야 하지만 제 컷은 그렇게 완벽하지 않습니다.

이전 요구사항 소개와 자료 준비를 마치고 다음 단계는 핵심 js 파일을 소개하고 CSS 스타일을 작성하는 것입니다.

2.flexible.js를 소개합니다

이 단계는 실제로 매우 간단합니다.flexible.js의 콘텐츠를 복사하고, 로컬에서 새flexible.js 파일을 만든 다음, 열어서 붙여넣기만 하면 됩니다. 저는 이 파일을 js/lib에 넣습니다.

그런 다음 이 js 파일을 가능한 한 빨리 html 페이지에 삽입하세요(적응 효과를 더 빠르게 만들기 위해).

참고: lib-flexible을 사용하세요. 일반적으로 다음과 같이 쓰지 마세요.

코드 복사 코드는 다음과 같습니다.

flexible.js に自動的に処理させます。

次に、Chrome シミュレーターで iPhone6 を選択すると、HTML のフォントサイズが font-size: 75px: に設定されていることが確認できるはずです。

3. CSS を書く
基本的な要件:

1) font-size を除くすべてのサイズは、750 アノテーションドラフトのサイズに基づいてレム単位の値に変換されます。変換方法は、アノテーションドラフトサイズ / アノテーションドラフトベースフォントサイズです。 >

2) 注釈ドラフトの標準フォントサイズ = 注釈ドラフトの幅 / 10。たとえば、注釈ドラフトの幅は 750、注釈ドラフトの標準フォントサイズは 75 です。注釈ドラフトは 640 で、注釈ドラフトの標準フォントサイズは 64 です (つまり、淘宝網のプランはどのデザインドラフトサイズでも使用できます)

3) font-size を設定する必要がある場合は、次の記述と同様に、HTML の data-dpr 属性に従うことができます:

[data-dpr="2"] p {
  font-size: 16px;
}

[data-dpr="3"] p {
  font-size: 24px;
}

로그인 후 복사

この使用法を説明するために、Android のダウンロードボタンスタイルを例に挙げます。 android.png のサイズは 414*80 なので、CSS は次のように記述されます:

.btn {
  width: 414rem/@font-size-base;
  height: 80rem/@font-size-base;
}

로그인 후 복사

less が使用されるため、注釈ドラフトの標準フォントサイズを保存する変数が事前に定義されています。

@font-size-base: 75;

したがって、上に示したように、px2rem への変換は非常に簡単になります。 less がコンパイルされると、正しい rem 値が計算されます:

.btn {
 width: 5.52rem;
 height: 1.06666667rem;
}

로그인 후 복사

この時点で、lib-flexible の基本的な練習は終了しましたが、まだ別の問題があり、それは Retina スクリーンの問題です。これまで、下の図の切り欠きをどうするかについて触れていませんでした。これは実際には非常に簡単で、html 要素の data-dpr 属性を使用すると、devicePixelRatio>=2 の場合に画像を有効にする別のメディアクエリを簡単に実装できます。ボタンの例:

.btn-android {
 background-image: url("../img/@2x/android.png&#63;v=@@version");
 [data-dpr="3"] & {
  background-image: url("../img/@3x/android.png&#63;v=@@version");
 }
}

로그인 후 복사

これで大丈夫です。最初は data-dpr の役割が何なのかわかりませんでしたが、今見てみると非常に便利です。

注:

上記は、淘宝網の柔軟なレイアウトソリューション lib-flexible を実装するプロセス全体です。これが皆さんの学習のきっかけとなることを願っています。