1. CSSを使用してデフォルトのスタイルを貫通する
一般的なシナリオ：入力を介してファイルをアップロードする必要がある場合、type = "file"、およびこの入力のデフォルトのスタイルは非常に異なると言えます丑。したがって、入力と同じサイズの画像を渡し、一貫した位置でカバーすることを望みます。現時点では、もちろん、この時点で画像をクリックしても、入力は機能しません。これは、imgがクリックの浸透を分離するためであり、このimgが視覚的に入力スタイルを覆い隠すだけで、入力をクリックしてもクリックされることを期待しています。だから、imgを浸透させてください。
CSSコードは次のとおりです。
img {
pointer-events: none;
}
2.カスタムネイティブ選択コントロールのスタイルを実現する
一部のモバイル端末のネイティブスタイルは醜いですが、ネイティブポップアップ効果は設計原則に沿っています。selectのスタイルを直接変更すると、奇妙な現象が発生しました。Chromeでデバッグすると、自分で定義したスタイルが機能しました。Androidフォンでも機能しましたが、iOSフォンでは機能しませんでした。非互換性の問題のため、現時点ではネイティブスタイルを無効にしてください。
CSSコードは次のとおりです。
select {
-webkit-appearance: none;
}
3.テキストのオーバーフロー処理
モバイルデバイスの場合、ページは比較的小さく、表示される情報の一部は、しばしば省略される必要があります。最も一般的なのは、単一行のヘッダーオーバーフローの省略、および複数行の詳細な導入のオーバーフローの省略です。すべてがフレームワークで開発された今、この種の提案、要求、提案は、便利で迅速な基本コンポーネントを形成しています。
CSSコードは次のとおりです。
//单行
.single {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
//多行
.more {
display: -webkit-box !important;
overflow: hidden;
text-overflow: ellipsis;
work-break: break-all;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2; //指定行数
}
4.弾性スクロールをオンにする
CSSコードは次のとおりです。
body {
overflow: scroll;
-webkit-overflow-scrolling: touch;
}
注：Androidはネイティブエラスティックスクロールをサポートしていませんが、サードパーティのライブラリiScrollを使用して実現できます。
5. 1ピクセル境界設定
多くの場合、どの設定でも境界線のサイズを1pxに維持したいのですが、1pxは2dpを使用してレンダリングされるため、2pxとして表示されます。したがって、css3を使用してズームします。
CSSコードは次のとおりです。
.folder li {
position: relative;
padding: 5px;
}
.folder li + li:before {
position: absolute;
top: -1px;
left: 0;
content: " ";
width: 100%;
height: 1px;
border-top: 1px solid #ccc;
-webkit-transform: scaleY(0.5);
}
6.マウス選択イベントを防ぐ
<div class="mask" onselectstart="return false"></div>
<div class="link">
<a href="javascrip;;">登录</a>
</div>
要素に追加すると、onslectstart="return false"マウス選択イベントを防ぐことができます。
7.動的に追加された要素へのイベントのバインド
イベントプロキシを使用して、この効果を実現します。といった：
$(document).on("click", ".large", slide); //jq中的写法
//第一个参数表示的是对应事件，第二个是需要绑定事件的元素的id或class，第三个是绑定的对应的事件函数名
8. IEブラウザの透明性と互換性がある
.ui {
width: 100%;
height: 100%;
opacity: 0.4;
filter: Alpha(opacity=40); //兼容IE浏览器的处理
}
9.一般的に使用されるフルスクリーン中心のJS関数
//获取元素
function getElement(ele) {
return document.getElementById(ele);
}
//自动居中函数
function autoCenter(el) {
var bodyX = document.documentElement.offsetWidth || document.body.offsetWidth;
var bodyY =
document.documentElement.offsetHeight || document.body.offsetHeight;
var elementX = el.offsetWidth;
var elementY = el.offsetHeight;
el.style.left = (bodyX - elementX) / 2 + "px";
el.style.top = (bodyY - elementY) / 2 + "px";
}
10.一般的に使用される全画面中央のCSS関数
body {
height: 100vh;
text-align: center;
line-height: 100vh;
}
11.入力ボックスにコンテンツを入力してEnterキーを押した後、いつ
たとえば、11000Enterキーを押して時間を入力しました。
<input type="textbox" id="textbox1" onkeypress="CheckInfo" />
<script language="javascript" type="text/javascript">
function CheckInfo()
{
if (event.keyCode==13) {
alert(textbox1.text);
}
}
</script>
12. Chromeデバッグショートカット
①ctrl + shift + f全文検索
②ctrl + oでファイル名を検索
③ctrl + shift + o js関数名を検索
交換留学
パブリックアカウント[フロントエンドユニバース]をフォローして、毎日良い記事の推奨事項を入手してください
WeChatを追加し、グループに参加してコミュニケーションする
「監視と転送」が最大のサポート