フロントエンド開発の考え方と実践_html/css_WEB-ITnose

高さマージンパディングボーダー背景フォント テキスト

アニメーション

还 もちろん、インターネット上には他にもおすすめの文章がありますが、違いはテキストの前後にある背景です。

理由を考える

CSS(チーム)の可読性を向上させる

冗長なコードを減らす(手が震えたり途中で中断した場合、前後に同じ属性が書かれてしまう)

コードブロックを素早く見つけ、簡単にメンテナンス

UIドラフトの実装漏れを減らす

実践的な経験

/*思考下这段代码是干嘛的*/.pop-btn{    -webkit-box-sizing: border-box;    box-sizing: border-box;    height: 100%;    width: 49%;    text-align: center;    color: #3295f2;    margin: 10px 0;    font-size: 16px;    float: left;}

/*调整*/.pop-btn{    -webkit-box-sizing: border-box;    box-sizing: border-box;    float: left;    height: 100%;    width: 49%;    margin: 10px 0;    text-align: center;    font-size: 16px;    color: #3295f2;}

理論的根拠

ブラウザの解析プロセスに関連: まずDOMを見つけて、それ自体の属性を解析し、次に内部現象を解析します

Mozilla公式と推奨される記述順序は同様です

上記の英語情報は見つかりませんでした。技術ブログ内の2つのビューは参考用です

ブラウザプレフィックス付き

-webkit-border-radius: 50px 20px;border-radius: 50px 20px;

順序が逆の場合、どのような問題が発生しますか?

ブラウザー間で一部の CSS3 プロパティの実装と標準にいくつかの違いがあります。将来的には、これらのブラウザーはこれらの違いを修正し、標準に準拠する可能性があります

合理化されたコード

ブラウザのデフォルトと一致します

div{    width: 200px;    height: auto;}img{    width: 100%;    height: auto;}

デフォルトの高さ 値は auto です

通常、以前の高さの固定値を消去する必要がある場合に使用されます

/*伦家奏是块级元素*/li{    display: block;}/*偶是行内替换元素，本身就可以设置宽高*/input{    display: inline-block;    width: 100%;    height: 24px;   }   

このステートメントは厳密ではありません

インライン置換要素の入力画像

インライン 非インライン 要素の置換

/*多个属性组合出现，部分属性会失效*/span{    display: inline;    position: absolute;    left: 20px;    width: 50px;    height: 20px;     border: 1px solid #DFDFDF;}

デモ

同様の組み合わせ:

位置: 固定; 位置: 絶対;

詳細な決定ルール:

混乱を招く冗長なコードを減らすと、将来のメンテナンス作業に役立ちます

CSS コードの合理化は、CSS プロパティを十分に理解していることに基づいています

モバイルでの 1px 境界線の問題

まず、それが

境界線であるかどうかについて話しましょう: 1px 実線 #DF; モバイル側では線が太くなり、UI をうまく復元できません。これは、ネイティブ アプリケーションと比較することでわかります。さらに、PS を使用してスクリーンショットを拡大して測定したところ、確かに 2 または 3 ピクセルあることがわかりました

その理由について話しましょう

デバイスピクセル

デバイス内の最小の物理部品の 1 つ、各デバイスピクセルには独自のカラー値と明るさの値があります

CSS ピクセル

CSS ピクセルは抽象的な単位です

デバイスに依存しない標準表示密度、1 つの CSS ピクセルが 1 つのデバイス ピクセルに対応します

さらに深く掘り下げる: デバイスに依存しないピクセル デバイス ピクセル比 (devicePixelRatio) ビューポート UI についてよく話題になるのは、なぜ IOS では 2 倍および 3 倍の画像が使用されるのか、なぜズームインすると SVG が非常に鮮明になるのか、ということです。 ?

解決方法

オンラインデモ

原則: スケールを使用してズーム

さまざまな状況に応じて特別な処理を実行できます

固定幅とアダプティブ

CSSを使用してシンプルなグラフィックを作成してみます

CSS3アニメーションのパフォーマンス

3D 変換を使用して GPU をオンにするか、変更します (詳細は後述)

GPU はグラフィック プロセッサであり、グラフィックの処理と描画に関連するハードウェアです。 GPU は、複雑な数学的および幾何学的計算を実行するように設計されており、CPU をグラフィックス処理タスクから解放して、ページ計算や再描画などの他のシステム タスクを実行できます。

一般的に使用される:transform:translateZ(0);

要素のサイズ、位置の変更 (幅、高さ、上、左) など、可能であれば、transform を置き換えとして使用します。変換によって周囲の要素のレイアウトは変更されないため、ブラウザーの再描画コストが削減されます

オンライン デモ

アニメーション要素をドキュメント フロー (フロート、アブソリュー、固定) から外し、リフローを減らすようにしてください

アニメーション効果 GIF 画像について

レイヤー内の要素を再描画する必要がある場合は、レイヤー全体を再描画する必要があります。たとえば、レイヤーに多くのノードが含まれており、その中に gif イメージがある場合、gif イメージのすべてのフレームがレイヤー全体の他のノードを再描画します。したがって、これには、GIF 画像を強制的に独自のレイヤー (translateZ(0) または translation3d(0,0,0)) に所属させるための特別な方法が必要です。

上記の特定の原理知識については、関連情報を確認して理解してください。 Depth 🎜 🎜 Warm CSS3 プロパティとアプリケーション 🎜 🎜 pointer-events オンライン デモ: 1px 境界線の問題を解決し続ける 🎜 🎜 🎜 可視、無形 (クリック不可) 🎜 🎜 🎜 use-select オンライン デモ 🎜 🎜 🎜 テキストの選択と移動を禁止クライアントでは長押しコピーは禁止されています🎜 🎜 🎜画像セットの互換性🎜 🎜 🎜レスポンシブ画像🎜 🎜 🎜デバイスピクセル比 window.devicePixelRatio 🎜

 background-image: image-set( url(test@2x.png) 2x,    url(test@3x.png) 3x );

🎜互換性🎜 🎜will-change🎜

之前动画性能中有讲到， 3Dtransform 会启用GPU加速。我们实

际上不需要z轴的变化，欺骗浏览器，是一种不人道的做法。

will-change 专为此而生，预先告诉浏览器，快做好准备，把 GPU兄弟拉来，我要变形了。

几何老师说： 同学们注意，我要开始变形了...

兼容性

关于JS

不要做重复的工作

外部依赖资源统一管理

相同的代码进行封装：（业务，UI，工具方法）

能够用代码判定的配置，不要手动去改

JSHint

缓存问题

微信浏览器缓存较严重

测试环境下禁止浏览器缓存

版本号

文件指纹

发布新版本菜单配置项注意点

Vue条件渲染v-show与v-if的区别

v-show不支持