ホームページ ウェブフロントエンド jsチュートリアル onresize を使用して div を screen_javascript スキルのサイズに適応させるコード

onresize を使用して div を screen_javascript スキルのサイズに適応させるコード

May 16, 2016 pm 06:36 PM
div アダプティブ

div を中央に配置する場合、一般に 2 つの方法があります。1 つは左右の幅を固定する方法、つまりピクセルの絶対位置を使用する方法で、もう 1 つは相対位置をパーセンテージで指定する方法です。 div は画面に適応し、パーセンテージを使用できます。ただし、ページ内にそのような文があると、新しい問題が発生します。

この文を言ったとき、すべてが正常でしたが、この標準ステートメントがなぜこのような不都合を引き起こしたのかわかりません
この問題に対応して、私は次の方法を使用して div の適応を実現しました
まず、私が使用した方法は、最初に左を設定する絶対位置です。 div の右、上、下のマージン。ボディに 2 つのイベントを追加します。

getwah() は画面のサイズを取得するために使用され、各マージンを div し、その差を計算します

コードをコピーします コードは次のとおりです:

var height,width,width_cha1,width_cha2;
関数 getwah()
{
if(document.documentElement && document.documentElement.clientWidth)
{d_width = document.documentElement.clientWidth;}
else if(document.body)
{d_width = document.body.clientWidth;}
width=parseInt(d_width)
width_cha1=width-parseInt(document.getElementById("backi").style . left)
width_cha2=width-parseInt(document.getElementById("massage_box").style.left)
}

画面サイズが変更されたとき (サイズ変更時) に test() をトリガーしますこの機能は、画面と以前に取得したマージンの差に基づいてユーザーが div のマージンをリセットするためのもので、画面のサイズが変更されると、それに応じて div のマージンも変更されます。画面サイズの変更に応じて div を調整できます。
コードをコピー コードは次のとおりです:

関数 test()
{
if(document.documentElement && document.documentElement.clientWidth)
{d_width = document.documentElement.clientWidth;}
else if(document.body)
{d_width = document.body .clientWidth;}
var now_left1=parseInt(d_width )-width_cha1;
var now_left2=parseInt(d_width )-width_cha2;
document.getElementById("backi") .style.left=now_left1
document.getElementById("massage_box").style.left=now_left2
}
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

Windows 11 でコンテンツの適応型明るさを設定する方法 Windows 11 でコンテンツの適応型明るさを設定する方法 Apr 14, 2023 pm 12:37 PM

明るさの調整は、表示されているコンテンツや照明条件に基づいて画面の明るさレベルを調整する Windows 11 コンピューターの機能です。一部のユーザーはまだ Windows 11 の新しいインターフェイスに慣れていないため、明るさの自動調整機能を簡単に見つけることができず、明るさの自動調整機能が Windows 11 にないという人もいます。そのため、このチュートリアルですべてを解決します。たとえば、YouTube ビデオを視聴していて、ビデオに突然暗いシーンが表示された場合、明るさの調整により画面が明るくなり、コントラスト レベルが上がります。これは、コンピュータ、スマートフォン、またはデバイスが周囲の照明に基づいて明るさレベルを調整できるようにする画面設定である自動明るさとは異なります。フロントカメラには特別なものがあります

CSSを使用してdivの角が欠けていることを認識する方法 CSSを使用してdivの角が欠けていることを認識する方法 Jan 30, 2023 am 09:23 AM

div の角が欠けていることを認識するための CSS メソッド: 1. HTML サンプル ファイルを作成し、div を定義します; 2. div の幅と高さの背景色を設定します; 3. 削除する必要がある div に疑似クラスを追加します隅に配置し、擬似クラスを背景色と同じ色を使用するように設定し、45 度回転して、削除する必要がある隅に配置します。

Vue を使用してアダプティブ モバイル インターフェイスを構築するにはどうすればよいですか? Vue を使用してアダプティブ モバイル インターフェイスを構築するにはどうすればよいですか? Jun 27, 2023 am 11:05 AM

モバイル インターネットの普及に伴い、モバイル エクスペリエンスを考慮する必要がある Web サイトやアプリケーションがますます増えています。人気のあるフロントエンド フレームワークとして、Vue には応答性の高いレイアウトと適応機能があり、適応モバイル インターフェイスの構築に役立ちます。この記事では、Vue を使用してアダプティブ モバイル インターフェイスを構築する方法を紹介します。単位として px の代わりに rem を使用したり、モバイル インターフェイスの単位として px を使用したりすると、さまざまなデバイスで表示効果に一貫性がなくなる可能性があります。したがって、単位として px ではなく rem を使用することをお勧めします。レムは相対的なものです

ChatGPT APIに基づくワードマーキング翻訳ブラウザスクリプトの実装 ChatGPT APIに基づくワードマーキング翻訳ブラウザスクリプトの実装 May 01, 2023 pm 03:28 PM

はじめに 最近 GitHub に ChatGPTAPI をベースにしたブラウザスクリプト openai-translator が登場しました 短期間でスターが 12k に達しました 翻訳だけでなく磨きや要約機能もサポートしています ブラウザプラグに加えて-ins, tauri パッケージも使用します。デスクトップ クライアントをお持ちの場合は、tauri が Rust 部分を使用するという事実を除けば、ブラウザ部分の実装はまだ比較的簡単です。今日は手動で実装します。 openAI によって提供されるインターフェイス。たとえば、次のコードをコピーし、ブラウザ コンソールでリクエストを開始して変換を完了できます。 //Example constOPENAI_API_KEY="s

CSS ビューポート単位 vmin および vw を使用してアダプティブ画像サイズを実装する方法 CSS ビューポート単位 vmin および vw を使用してアダプティブ画像サイズを実装する方法 Sep 13, 2023 am 08:18 AM

CSSViewport ユニット vmin および vw を使用して適応型画像サイズを実装する方法 Web デザインでは、画像を画面サイズに適応させる必要がある状況によく遭遇します。この目標を達成するために、CSS はビューポート ユニットという強力なユニットを提供します。このうち、vmin はビューポート幅の小さい方の割合を表し、vw はビューポート幅の割合を表します。したがって、これら 2 つのユニットを使用して、適応型画像サイズの効果を実現できます。具体的には以下でご紹介します

divボックスモデルとは何ですか divボックスモデルとは何ですか Oct 09, 2023 pm 05:15 PM

div ボックス モデルは、Web ページのレイアウトに使用されるモデルです。Web ページ内の要素を長方形のボックスとして扱います。このモデルには、コンテンツ領域、パディング、ボーダー、マージンの 4 つの部分が含まれています。 div ボックス モデルの利点は、Web ページのレイアウトと要素間の間隔を簡単に制御できることであり、コンテンツ領域、内側の余白、境界線、外側の余白のサイズを調整することで、さまざまなレイアウト効果を実現できます。ボックス モデルには、CSS と JavaScript を通じてボックスのスタイルと動作を動的に変更できるいくつかのプロパティとメソッドも用意されています。

iframeとdivの違いは何ですか iframeとdivの違いは何ですか Aug 28, 2023 am 11:46 AM

iframe と div の違いは、iframe は主に外部コンテンツを導入するために使用され、他の Web サイトからコンテンツをロードしたり、Web ページを複数の領域に分割したりできます。各領域には独自の独立した閲覧コンテキストがあり、div は主に分割および分割するために使用されます。コンテンツを整理し、レイアウトとスタイルを制御するためのブロック。

divとspanの違いは何ですか? divとspanの違いは何ですか? Nov 02, 2023 pm 02:29 PM

違いは次のとおりです: 1. div はブロックレベル要素であり、span はインライン要素です。2. div は自動的に行を占有しますが、span は自動的に折り返されません。3. div はより大きな構造とレイアウトを折り返すために使用されます。テキストまたは他のインライン要素をラップするために、span が使用されます。4. div には他のブロックレベル要素とインライン要素を含めることができ、span には他のインライン要素を含めることができます。

See all articles