デザインは素晴らしいです。今回は実際に設計草案に基づいています。なぜなら、今ではどのマシンも設計草案によれば標準的なマシンだからです。 開発者のクラスメートの皆さん、設計草案の注釈を直接読むことができるようになりました。
画面適応画面適応とは、コンテンツ適応領域と画面間隔の間の適応関係を指す必要があります。
単一画面の適応には、包含、カバー、または塗りつぶしが含まれ、複数画面の適応は通常、幅に基づきます。
contains と cover には、空白や余分なコンテンツを処理するための位置決めも必要です。
同じ H5 内の異なるコンテンツは、異なる適応方法、つまり階層化を使用することがよくあります。
優先CSS画面適応などのパフォーマンスの問題については、css で実装できる場合は css で実装する必要があります。
レイヤ全体の適応各レイヤーの要素が歪みなく同期してスケーリングされるようにするには、各レイヤーの適応領域が設計ドラフトのサイズと同じである必要があります。
直接的な実装は、アダプテーション領域と同じサイズのコンテナを構築し、レイヤー全体を適応させることです。
コンテナ内には同じ適応方法を持つ複数の要素が存在する可能性があります。
svg実装を例に挙げます。
<!doctype html><html><body><style>.layer { 位置: 絶対; 上: 0; 幅: 100%; 高さ: 100%;}</style><!-- 塗りつぶし - -><svg class=layer viewBox=0 0 1080 1920 prepareAspectRatio=none> <!-- コンテナ--> <rect x=0 y=0 width=1080 height=1920 fill=rgba(96,96,96,.08)/> <!-- element--></svg><!-- contain center--><svg class=layer viewBox=0 0 1080 1920 prepareAspectRatio=xMidYMid meets> <!-- コンテナ--> <rect x=0 y=233 width=1080 height=1407 fill=#1565C0/> <!-- element--></svg><!-- 底部を含む--><svg class=layer viewBox=0 0 1080 1920 prepareAspectRatio=xMidYMax meets> <!- -コンテナ--> <rect x=444 y=1779 width=191 height=39 fill=#1565C0/> <!-- 要素--></svg></body></html>実際の効果:
レイヤー全体の適応は実装が簡単で、開発中に設計草稿の値が直接読み取られるため、ほとんどの静的ページのニーズを満たすことができます。
ただし、h5 アニメーションが多数ある場合は、アニメーションの滑らかさとページのパフォーマンスを考慮する必要があります。
<img> <object> <svg>などの置換可能な要素をコンテナとして使用し、背景画像を要素として使用します。
CSS アニメーションを適用すると、パフォーマンスに欠陥があります。
これらの実装のパフォーマンスを向上させるには、コンテナのアニメーションに焦点を当て、コンテナのサイズを縮小する必要があります。効率的な適応を実現するには、コンテナのサイズをレイヤー内のすべての要素の最小合計面積と等しくすることが最善です。
簡素化された適応式導出プロセスについては、「H5 階層型スクリーン適応式の導出」を参照してください。
デザインドラフトの幅は v で、高さは g です。適応前の要素の水平座標は y です。幅は、適応後のコンテナーの水平座標です。 x3 = m*u + (x - m*v)/w*w1 = m*v/w*w3 + (x - m*v)/w*w1 縦座標 y4 = n*f + (y - n*g)/h*h1 = n*g/h*h3 + (y - n*g)/h*h1 幅 w3 = (w/v)*u 高さ h3 = (h/g)*f を含む場合この方法を適用する場合、スケーリング値 s = Math.min(f/g, u/v) 水平方向の左の空白が合計の空白を占めます o = (m*v - x)/w 垂直の空白が次のようになります。空白の合計 p = ( n*g- y)/h カバー モードが適用される場合、スケーリング値 s = Math.max(f/g, u/v) 水平方向の左側の超過分が全体の超過分を占めます o = (x - m*v)/w 垂直方向の超過分過剰は、合計の過剰を占めます。 p = (y - n*g)/h 適応領域が垂直方向の上部にある場合、m = 0。垂直方向の中央にある場合、m = 0.5 です。 m = 1。水平方向の左側にある場合、n = 0。水平方向の中央にある場合、n = 0.5。右側に水平に配置した場合、レイヤ全体のアダプテーションメモリ最適化と比較して n = 1 (w3*h3)/(v1*g1) >= w*h/(v*g)<img> 実装例
max-width が w/v で、max-height が h/g の場合、containadaptation に対応します。
min-width を w/v、min-height を h/g に設定すると、カバー適応に対応します。
幅が w/v、高さが h/g の場合、塗りつぶし適応を意味します。
包含適応中に、画像の元のサイズが max-width および max-height より小さい場合は、zoom: 10 を使用して画像の元のサイズを拡大するか、直接変更します。
表紙の調整中に、画像の元のサイズが min-width および min-height より大きい場合は、zoom: .1 を使用して画像の元のサイズを縮小するか、直接変更します。
左上のパーセンテージは画面の幅 u と高さ f に相対的なものであるため、m*u と n*f に対応します。
変換のパーセンテージは、適応された要素の幅 w1 と高さ h1 に相対的なため、(m*v + x)/w*w1 および (n*f + y)/h*h1 に相当します。
<!doctype html><html><body><style>img { /* min-width と min-height は仮想コンテナを構成します*/ min-width: 50.37037037037037%; /* w3 = (w/v)*u; w = 544、v = 1080 */ 最小高さ: 7.395833333333333%; /* h3 = (h/g)*f ただし、h = 142、g = 1920 */ ズーム: /* x4 = m*u + (x - m*v)/w*w1 */ /* y4 = n*f + (y - n*g)/h*h1 */ 位置: 左: 50%; where m = .5*/ top: 50%; /* n*f where n = .5 */transform: translationX(-48.34558823529412%) /* (x - m*v)/w*w1 where x = 277, m = 0.5、v = 1080、w = 544 */ translationY(378.8732394366197%); /* (y - n*g)/h*h1 ここで、y = 1498、n = .5、g = 1920、h = 142 */}</style><img src=http:/ /ui.qzone.com/544x142/> <!-- 要素 --></body></html>バックグラウンド実装例background-size値がcontain contain適応に相当します。background-size値がcoverカバー適応に対応します。background-size値が100% 100% 「塗りつぶし適応」に相当します。background-positionパーセンテージはoと同じpです<!doctype html><html><body><style>div { 位置: 絶対; 幅: 50.37037037037037%; /* w3 = w/v*u ここで、w = 544、v = 1080 */ 高さ: 7.395833333333333%; * h3 = h/g*f ここで、h = 142、g = 1920 */ 背景: url(http://ui.qzone.com/544x142) no-repeat; /* 要素としての背景画像*/ 背景サイズ: 左: 25.64814814814815%; /* x3 = x/v* u ここで、x = 277、v = 1080 */ 上: 78.02083333333333%; /* y3 = y/g*f where y = 1498, g = 1920 */background-position-x: -48.34558823529412%; /* o = (x - m*v)/w where m = .5 、v = 1080、x = 277、w = 544*/ 背景位置 y: 378.8732394366197%; /* p = (y - n*g)/h ここで、n = .5、g = 1920、y = 1498、h = 142*/}</style>< div></div> <!-- コンテナ--></body></html><svg> 実装例
preserveAspectRatioのmeetOrSliceがmeet場合はcontainadaptationに相当します。preserveAspectRatioのmeetOrSliceがslice場合はカバーアダプテーションに相当します。preserveAspectRatio値がnone場合、塗りつぶし適応に対応します。preserveAspectRatioのmeetOrSliceコンテナに対して相対的であり、適応領域を配置するために使用されません。また、 preserveAspectRatioのtransform meetOrSlice xMinYMinに固定されています。 <!doctype html><html><body><style>svg { 位置: 絶対; 幅: 50.37037037037037%; /* x4 = m*v/w*w3 + (x - m*v); w*w1 */ /* y4 = n*g/h*h3 + (y - n*g)/h*h1 */ 上: 0; 左: 0; 変換: translationX(99.26470588235294%) /* m*v/w*w3 ここで、m = .5、v = 1080、w = 544 */ translationY (676.056338028169%); /* n*g/h*h3 ここで、n = .5、g = 1920、h = 142 */ overflow:visible;}svg image {transform:translateX(-48.34558823529412%) /* (x - m*v)/w*w1 ここで、x = 277、m = .5、v = 1080 , w = 544 */translateY(378.8732394366197%); /* (y - n*g)/h*h1 where y = 1498, n = .5, g = 1920, h = 142 */}</style><svg viewBox=0 0 544 142 prepareAspectRatio=xMinYMin meets> <!-- コンテナ --> <image width=544 height=142 xlink:href=http://ui.qzone.com/544x142/> <!-- 要素 --></svg></body></html>補助ツールパーセンテージを手動で計算してCSSを書くのは面倒ですが、sassなどのツールを使用すると簡単になります。
デザインドラフトの幅vと高さg通常、ページレベルの定数です。
デザインドラフトの各要素の横座標x 、縦座標y 、幅w 、高さhを読み取るだけで、ツールが CSS を生成します。
これで、母は私の修復の問題や画面の適応の問題について心配する必要がなくなりました。
ワードプロセッサテキストが固定または単一行が固定されていない場合は、 svg textタグで処理できます
テキストが固定されている場合、または単一行が固定されていない場合は、テキストを画像に変換することもできます。
複数行のテキストは固定されていません。 svgのforeignObjectを使用して通常のdiv
プラン比較
スクリーン アダプテーション ソリューションは数多くありますが、フルレイヤ アダプテーションまたは合理化されたアダプテーションを実現するにはどちらの方法を選択する必要がありますか? 以下に比較します。
| プラン | ズーム | 位置 | テキストズーム | 互換性がある |
|---|---|---|---|---|
| パディング上部の割合 | 寛大なことしかできない | ✓ | ✗ | ✓ |
| ビューポート | ✓ | ✗ | ✓ | サポートは複雑です |
| オブジェクトフィット | ✓ | ✓ | ✗ | モバイル Android 4.4.4 以降 |
| SVG保持比率 | ✓ | ✓ | ✓ | モバイル Android 3.0 以降 |
| (最大/最小)-(幅/高さ) | ✓ | ✓ | 固定テキスト | ✓ |
| 背景サイズ | ✓ | ✓ | テキストから画像へ | ✓ |
以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。また、VeVb Wulin Network をご支援いただければ幸いです。