モバイルページのデフォルトのスタイルをリセットするにはどうすればよいですか?どのような方法がありますか

云罗郡主
リリース: 2018-10-29 14:42:43
転載
2225 人が閲覧しました

モバイル ページのデフォルトのスタイルをリセットするにはどうすればよいですか?モバイルページに触れたばかりの友人の中には、このような疑問を持つ人も多いと思います。この章では、モバイル ページのデフォルトのスタイルをリセットする方法を紹介します。どのような方法がありますか。困っている友人は参考にしていただければ幸いです。

1, -webkit-tap-highlight-color

-webkit-tap-highlight-color:rgba(0,0,0,0); //透明度を 0 に設定して削除しますリンクおよびテキスト ボックス オブジェクトをクリックしたときの、デフォルトの灰色の半透明のオーバーレイ (iOS) または仮想ボックス (Android)。

-webkit-tap-highlight-color:rgba(255,0,0,0.5); //この属性を使用して、タッチ時のリンク領域のハイライトを 50% の透明な赤に設定します (iOS のみ)けり込む。この属性が Android で使用されている限り、境界線として表示されます。この属性をボディに追加して、ボディのクリック領域にも同じ効果があるようにします。

2.outline: none

(1) PC側のaタグにこのスタイルを定義する目的は、aタグをクリックしたときに表示される点線を解除することです。 IEブラウザ。 IE7 以下のブラウザはまだこの属性を認識しません。Chrome でデフォルトのテキスト ボックス フォーカス スタイルをキャンセルするには、hidefocus="true"

(2) input, textarea{outline:none} を追加する必要があります。

(3) モバイル端末では機能しません。テキストボックスのデフォルトのスタイルを削除したい場合は、-webkit-tap-highlight を使用してフォーカス時にデフォルトのスタイルをキャンセルできます。 -色。いくつかのモバイル リセット ファイルにこの属性が追加されているのを見ましたが、実際には冗長です。

3.-webkit-Appearance

-webkit-Appearance: none;//iOS でこの属性を追加することによってのみ、入力ボックスとボタンのネイティブの外観を削除します。ボックスをカスタマイズします。スタイルを定義します。

この属性を使用すると、入力の種類が異なると動作が異なります。テキストとボタンにはスタイルがありません。ラジオとチェックボックスは直接表示されなくなります。

4.-webkit-user-select

-webkit-user-select: none // この属性はページ テキストの選択を無効にします。継承は行わず、通常は本文に追加され、本文全体のテキストが自動的に調整されないことを規定します

5.-webkit-text-size-adjust

-webkit-text- size-adjust: none; // テキストの自動サイズ変更を無効にします (デフォルトでは、デバイスが回転するとテキストのサイズが変更されます)。この属性は、通常、テキストのサイズを規定するために本文に追加されます。本文全体は自動的に調整されません。

6 .-webkit-touch-callout

-webkit-touch-callout:none; // ページを長押ししたときのポップアップ メニューを無効にします。 (iOS で有効)、

## を img とタグ #7.-webkit-overflow-scrolling

-webkit-overflow-scrolling:touch;//部分スクロール (iOS でのみサポート) を追加します。 5 以降)

上記はモバイル ページのデフォルトのスタイルです。リセットしますか?すべての方法が紹介されています。

HTML ビデオ チュートリアル

について詳しく知りたい場合は、PHP 中国語 Web サイトに注目してください。

以上がモバイルページのデフォルトのスタイルをリセットするにはどうすればよいですか?どのような方法がありますかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:lvyestudy.com
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート