baidu-ife によるモバイル開発の初体験 Task1-11 - Germination_html/css

baidu-ife によるモバイル開発の初体験 Task1-11 - Germination_html/css_WEB-ITnose

WBOY

リリース： 2016-06-21 08:51:53

オリジナル

1078 人が閲覧しました

以下の内容は近い将来間違っている可能性が高く、私のちょっとした記録です。参照したい場合は参照してください。重大な誤解がある場合は、それを指摘するのが最善です

理由

アリババのインタビューで尋ねられた内容モバイル端末のひどい悪用
baidu-ife タスク 1-11: モバイル Web ページのレイアウトの練習

レンダリング

テキスト

モバイル端末の開発は初めてで、準備は比較的急いでいます。

PC 版と比較すると、モバイル画面はより複雑ですが、レイアウトは比較的シンプルです。モバイル端末の開発は、モバイル端末の Web アプリ開発とシェル開発に分けられます。

現在、IFE タスクには単純なレイアウトを実装するための純粋な CSS のみが必要であり、私の知識はまだ初期段階にあります。

実践

上記の設計図はあまり正確ではないようですが、設計図に従って開発を進めるためには、まず設計図を変換する必要があります。慣例に従って、PS を使用して幅 375px (iPhone6) に変換するだけです。

さまざまなモバイルデバイスに適切に対応するために、通常、単位としてレムが使用されます。

HTML タグを次のように設定します

html {  /*font-size : 14px;*/  font-size: calc(100vw/26.785);  font-family: 'Microsoft YaHei',"Helvetica Neue", Helvetica, STHeiTi, Arial, sans-serif; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;}

ログイン後にコピー

PSD の場合、各ピクセルを 14 で割って rem に変換します。これを簡略化します。

@function px2rem($px, $base-font-size: 14px) {  @if (unitless($px)) {    @warn "Assuming #{$px} to be in pixels, attempting to convert it into pixels for you";    @return px2rem($px + 0px); // That may fail.  } @else if (unit($px) == rem) {    @return $px;  }  @return ($px / $base-font-size) * 1rem;}

ログイン後にコピー

を処理して、後で使用するときに px2rem(40px) を使用できるようにします。