に質問検索_PHP中国語ウェブサイト

コミュニティ学ぶツールライブラリレジャー

日本語

人気の検索：
PHP
MySQL
jquery
HTML
CSS

Flex に埋め込まれたレスポンシブ YouTube

レスポンシブ YouTube やその他のコンテンツを Flex コンテナに埋め込もうとしましたが、YouTube の埋め込みが含まれるコンテナが拡張されないため、他の要素と重なっているか、他の要素と重なっています。うまく説明できたかどうかわからないので、デモ用のコードとボックスも作成しました: https://codesandbox.io/s/objective-mountain-m4dhhb?file=/src/App.jsimport{Box,Paper }「@mui/mat から」

P粉111641966 2024-03-21 23:20:29

vue-chartjs と Pinia を使用して保存されたリアクティブデータ

私は、Pinia を使用してデータを保存し、vue-chartjs を組み合わせてリアクティブチャートを作成するのが苦手です。この例をガイドとして使用していますが、ストアの変化にグラフを反応させるのに苦労しています。リアクティブフォームを使用して別のコンポーネントで Pinia ストアデータを変更しました。ストアデータが変化しているのが確認できますが、グラフが更新されません。次のコンポーネントを使用してグラフをレンダリングしています: <scriptsetup>import{storeToRefs}from'pinia'import{useStore}fro

P粉946437474 2023-08-31 00:26:42

ionic Angular と ngfor でレスポンシブグリッドを作成するにはどうすればよいですか?

ionicAngular と ngfor でレスポンシブなグリッドを作成するにはどうすればよいですか?グリッドテンプレートを説明するには、ここに画像の説明を入力します: <ion-grid><ion-row><ion-col><ion-item*ngFor="letprodofdisplayedList" class="item-entry"detailrouterLink=&quot

P粉106715703 2023-09-14 22:57:49

SVG イメージを使用してレスポンシブグリッドエリアを作成できません

SVG 画像を含むレスポンシブなグリッド領域を作成しようとすると、グリッド領域の幅が任意になったり、画像を停止せずに特定の点まで拡大または縮小したりできないなどの奇妙な動作が発生します。私が得た最も近いものは次のとおりでした: *{box-sizing:border-box;}body{margin:0;}header{display:grid;grid-template-columns:auto1fr;background-color:green;padding:1r

P粉022140576 2023-08-30 19:15:16

Angular でリアクティブフォームデータを編集するための必須の方法である Observable をサブスクライブする必要はありません

これは、観察可能なデータに基づいてリアクティブフォームを購読し、更新するために私が使用してきたプロセスです。おそらく、observable をサブスクライブして値を変更せずに問題を解決する方法があるかもしれません。 @Component({selector:'app-my-component',template:`<form[formGroup]="myForm"><inputformControlName="name"/>

P粉587970021 2024-03-29 18:37:15

タイトルを次のように書き換えます: 1 つの項目を true に設定し、他のすべての項目を false に設定した VueJS 応答要素

VueJSのコンポジションAPIを使用してアプリケーションを開発しています。ページ上のすべてのボタンがクリックされたとき、以下に示すように応答要素を設定しました constsections=reactive({section1:true,section2:false,section3:false,section4:false,section5:false,section6:false}) (他の多くの操作の中でも) ブール値に基づいて個々の要素を表示および非表示にしたい

P粉786800174 2023-08-28 20:55:03

リアクティブなモーダルスライドアニメーション

ReactとCSSでモーダルを実装しました。現在、モーダルを開くと、モーダルが下から上にスライドするスライドアップアニメーションを実装していますが、閉じるときにスワイプして下に移動したいのですが、方法がわかりません下にスワイプするアニメーションを正確に作成するために、誰か手伝ってくれませんか?コード=>import"./styles.css";importreact,{useState}from"react";exportdefault

P粉514458863 2023-08-30 22:49:29

レスポンシブなドロップダウンメニューを作成する方法

ハンバーガーメニューのアイコンが右側、画像が左側にある必要があります。メニューをクリックして開くと、ロゴhomeAboutusgallerycontactが含まれるドロップダウンメニューが展開されます。 <divclass="rectangle1"><ulclass="dropdown"><liclass="li1"><ahref="

P粉521013123 2023-09-04 15:47:42

レスポンシブブロックをフレックス列に配置する

ヘッダー、ボード、フッターのあるゲーム Web サイトを持っています。 3 つすべてがビューポート内に収まるようにする必要があります。これを実現するには基板を小さくする必要があります。縮小化が私が抱えている問題です。幅を応答させることはできましたが、高さを制限することはできませんでした。ボードは正方形のままで未使用のスペースを占めるか、オーバーフローを防ぐために縮小する必要があります。以下のようなことをしているのですが、チェス盤が親の高さからはみ出してしまいます。実際のコードでは、行の折り返しによりヘッダーの高さは不明です。フッターにはさまざまな量のテキストが含まれます。チェス盤の内部には、行...

P粉545682500 2023-09-03 19:51:51

画像とコンテンツを含むレスポンシブなページをデザインする

私はフロントエンドを初めて使用するため、レイアウトと応答性にいくつかの問題を抱えています。これはこれまでの私のコードです: body{margin:0;background-color:#353535;}.header{color:white;text-align:center;font-size:20px;margin:auto;font-family :'Inter ',セリフ;フォントの太さ:太字;幅:700ピクセル;

P粉676588738 2023-09-07 15:55:30

レスポンシブ画像とテキスト Div を並べて表示

そこで、1 つの div が画像で、もう 1 つが背景付きのテキストであるテンプレートを作成しようとしています。次に、このテンプレートをレスポンシブにして、テキストが特定のピクセル幅で画像の下に表示されるようにしたいと思います。 stackoverflow を調べてみると、Flexbox を使用するべきだという投稿が無数にありました。試してみましたが、完全には理解できませんでした。したがって、デスクトップでは次のようになります: https://i.stack.imgur.com/HDehv.jpg スマートフォンでは、ここにジャンプするはずです https://i.stack.im

P粉005134685 2024-04-02 08:59:38

背景画像にレスポンシブ PNG 画像?

私は次のようなページデザインを作成しようとしています: クリックして実際に成功しました。問題は、Web ページの解像度を変更すると、要素が重なり、背景の div と PNG の動作が異なり、すべてがひどいものになることです。 (position:absolute(PNG)とposition:relative(background)を使用してみました)

P粉107991030 2024-02-21 21:06:46

フレックスボックスを使用してこのレスポンシブレイアウトを実装する方法

Flex コンテナ内に xy 個のカードと 1 つのウィジェットをレンダリングする React アプリを作成しています。すべてのカードの幅と高さは同じですが、ウィジェットの高さはカードの高さ * 2 + 行ギャップに等しくなります。コンテナの幅はビューポートの幅に応じて変化し、視覚的にはそれぞれカードが 2 列または 3 列に見えるはずです。さらにわかりやすくするために、ウィジェットを青で表した、必要なレイアウトのモックアップ画像を提供しました。何を試しても、行の高さをそのサイズに変更せずにウィジェットを正しい位置に表示することはできず、「空」のままになります。

P粉733166744 2024-02-26 19:29:01

css3 - グラフィックとテキストに対応したスタイル

PC デスクトップでこのページをレスポンシブにする: 1 つの方法は画像を直接レスポンシブにする方法ですが、唯一の欠点はテキストがぼやけ、効果が完璧ではないことです。 , このように、テキストのサイズを適応させる必要があり、テキストの位置関係を適切に行うのはさらに困難です...

習慣沉默 2017-05-16 13:20:57

html5 - レスポンシブ WEB、メディアクエリの問題。

{code...} これら 2 つのメディアクエリについて、デバイスの幅が正確に 768 ピクセルであるかどうか、どのメディアクエリがそれに適用できるのか、または 2 番目のメディアクエリは (x>=768&&x<1200 ?? ?)。また、この2つのメディア取材に順番はあるのでしょうか？

漂亮男人 2017-07-03 11:41:25

Auth0 ログインプロファイルとログアウトプロファイルが機能しません。タイプスクリプトに反応する

Auth0について質問があります。ログイン。そしてログアウトします。反応タイプスクリプトを使用します。これは Index.tsx にあります。 root.render(<Auth0Providerdomain="somecode.us.auth0.com"clientId="somecode"authorizationParams={{redirect_uri:window.location.origin}}&g

P粉349222772 2023-09-03 10:57:28

Vue 3 のネストされたプロパティへの変更を観察する

リアクティブ API を使用して簡単な状態管理を作成しました。ストアファイルは次のようになります: import{reactive,watch}from "vue";conststate=reactive({form:{service_id:null}})watch('state .form.service_id ',(newVal,oldVal)=>{console.log('servicechanged');

P粉060112396 2024-03-31 18:31:30

Vue スクリプト設定でのリアクティブオブジェクトの構造化

Vue3 のドキュメントに従って、<scriptsetup> タグを使用してコンポーネントコードを簡素化する方法を確認しています。この設定を使用する利点の 1 つは、オブジェクトを明示的に返すためにエクスポートのデフォルトのボイラープレートを使用する必要がなくなったことです。トップレベルのスコープで宣言されたものはすべて、テンプレートで自動的に使用できるようになります。私が抱えている問題は、私のアプリには初期状態として非常に大きなオブジェクトがあり、通常の Vue3 アプリではそのオブジェクトを返し、次のように自動的に構造化できることです。 < script>impo...

P粉418214279 2024-03-25 20:03:34

css - 現在、各ブラウザの市場シェアはどれくらいですか?

1. ie6、ie7、ie8などを使用している人は多いですか？ ? 2. フロントエンド Web ページのテンプレートを作成するときに考慮する必要がある主要なブラウザはどれですか? 3. レスポンシブ Web サイトテンプレートを直接作成する必要がありますか?サポートされていないものについては、ブラウザをアップグレードするよう彼に通知するだけでよいでしょうか?

我想大声告诉你 2017-07-03 11:42:41

Boostrap 5 ナビゲーションバーを閉じることができません

ナビゲーションバーが応答モードで閉じない追加されたライブラリはすべて準備完了です''''<divclass="collapsenavbar-collapsejustify-content-end"id="navbarSupportedContent"><ulclass="navbar-navmb-2mb-lg -0">< liclass=&qu

P粉738821035 2024-04-01 17:18:21