いわゆるユーザーエクスペリエンスの向上は、読み込み速度の向上、明るいカラーマッチング、アニメーション効果の追加など、使用プロセスでユーザーに利便性をもたらすことです。そして、謙虚なフロントエンドとして、ユーザーの向上に何を貢献できますか経験？
推奨される関連ブログ投稿：
フロントエンドでのユーザーエクスペリエンスを改善するための不完全なガイド（JS記事）
レイアウトの最適化
cssで計算された属性の使用
このように、左右のレイアウトでは、右側が残りの幅に自然に適応するはずです。
.left{
width: 200px;
height: 100%;
border: red 5px solid;
}
.right{
width: calc(100% - 200px);
border: #55007f 5px solid;
}
別の例として、特定の幅をn個の部分に均等に分割します
.container{
height: 100%;
display: flex;
}
.container div{
height: 100px;
width: calc(100% / 7);
border: #007AFF solid 4px;
}ローリングの最適化
scroll-snap-type：属性は、スクロールコンテナ内のスナップポイントを厳密に適用する方法を定義します。
定義を見ただけでは理解しにくいですが、簡単に言えば、この属性は、コンテナが内部のスクロールアクションをキャプチャするかどうかを指定し、スクロールの終了状態を処理する方法を指定します。スクロール操作が終了すると、要素は適切な位置で停止します
.scroll_box{
overflow: auto;
scroll-snap-type: x mandatory;
}
.scroll_box div{
scroll-snap-align: center;
}画像のストレッチの問題
たとえば、商品リストと商品サムネイルの幅と高さの比率が異なる場合、次の画像が表示されますが、これは明らかに美的効果と一致していません。
このとき、画像に幅と高さを指定すると、プレビュー画像が歪んで見苦しくなります。
次に、焦点は次のコードです。
.goods_item img{
width: 100%;
height: 2rem;
object-fit: cover;
}
object-fit属性は、要素のコンテンツが指定されたコンテナの高さと幅にどのように適応するかを指定します。
しかし、互換性は少し悪いです
ボタンのユーザーエクスペリエンス
適切なマウスインおよびクリック効果を追加できます。
.btn:hover{
background: #088cff;
cursor: pointer;
}
.btn:active{
background: #000088;
}
上の図に示すように、ボタンのクリックが速すぎると、ボタンのテキストが選択されます。これを行うことができます。
.btn{
user-select: none;
}
このように、どのようにクリックしてもテキストは選択されず、オンラインコースの最終試験問題を選択してコピーすることはできません。
アニメーションを読み込んでいます
ロードを待っているときはいつでも、見栄えの良いアニメーションを使用できます。以下は、見栄えの良いcss3で記述されたさまざまなアニメーションです。ダウンロードするには、ここをクリックしてください。
国境保護
境界保護は、次の図に示すように、要素の境界に適切なパディング値をサポートすることです。これははるかに優れています。
PCテキスト選択の最適化
通常の状況では、次のようなテキストを選択します。
ただし、ユーザーがテキスト全体や電話番号などをコピーする必要がある場合があります。これを実行し、コピーする必要のあるコンテンツを要素にまとめて、次のスタイルを要素に追加します。
{
user-select: all;
}
過度に長い動的テキストの問題への対処：
下の図に示すように、それは明らかに美的ビジョンを満たしていません
この時点で、次のように書くことができます。テキストは折り返されたりオーバーフローしたりせず、省略記号が表示されます。
{
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
width:200px//宽度看具体情况而定，父级限定宽度也可以
} 
テキストが複数行でオーバーフローすると、省略記号が表示されます。
{
width:200px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}画像読み込み失敗処理
<img src="jdkjk" onerror="this.src='https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1731029843,3592757081&fm=15&gp=0.jpg'" >
上の画像の左側の画像を読み込めませんでした。
データなし
それが不適切な場合は、もっとアドバイスできるといいのですが。