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

私はフロントエンドを初めて使用するため、レイアウトと応答性にいくつかの問題を抱えています。これはこれまでの私のコードです: 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 0  1  500

チャット gpt 応答のフォーマット

React アプリケーションでチャット gptapi を使用しています。私が直面している問題は、chat gpt からの応答をどのようにフォーマットするかです。テーブル形式で応答するように依頼すると、奇妙な応答が返されます。プレマークを使用してテキストを表示し、応答にはこのように添付された画像が表示されますが、チャット gpt のような正しいテーブルが必要です。同様に、別の行に項目のリストではなく段落形式として表示されるので、チャットの GPT 応答を正しくフォーマットする方法を尋ねます。 chat gpt で表示される正しいテーブルとリストが欲しいのですが、

P粉563446579 2023-10-25 14:53:41 0  1  715

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

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

習慣沉默 2017-05-16 13:20:57 0  3  683

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

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

P粉733166744 2024-02-26 19:29:01 0  2  365

css - 背景画像を含むレスポンシブ レイアウトを記述する方法

これと同様に、背景画像を含むコンポーネントを作成したいのですが、背景画像のサイズを 100% にすることはできず、中央にコンテンツ、左側に画像、右側にテキストがなければなりません。反応しますか？

怪我咯 2017-07-06 10:37:20 0  3  2072

JavaScript - CSS カルーセル チャートがレイアウトの問題に適応する

カルーセル レイアウトと同様に、外側の青いコンテナは幅が設定されておらず、100% 適応されます。各サブコンテナの幅は親コンテナの幅と等しく、行に表示されます。親を超えた部分は、要素が非表示になっていますが、jsを使わずに特定の環境下で実現できますか？

给我你的怀抱 2017-06-13 09:23:41 0  3  1052

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 0  1  289

レスポンシブ画像とテキスト 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 0  1  427

javascript -layuiのテーブルレイアウトで、tdの内容が多すぎて長すぎると、テーブルページが圧迫されて変形してしまいます。より良いレイアウト方法を探しています

タイトルにあるように、このページは主に関連情報を表示するために使用されます。 tdの内容が多すぎると次の行が圧迫されてしまいます。より良いレイアウト方法を探したい場合は、テーブル レイアウトは必ずしも必要ではありません]

迷茫 2017-07-06 10:35:25 0  2  1933

Vue 3 でコンポーネント インスタンスに非応答データを設定するにはどうすればよいですか?

Vue2 についても同様の質問があり、$options を使用することが推奨されていました。ただし、Vue3 では機能しないようです。まず、Vue3 のドキュメントには、$options は読み取り専用であると記載されています。そのため、コンポーネントがマウントされているときにインスタンスでツールチップを初期化しようとすると、非常に奇妙な動作が発生します。ツールチップが表示されるとき、ツールチップは最後に作成されたコンポーネントから表示されるため、$options が何らかの形で「グローバル」になっているようです「？ツールチップをデータに入力すると、すべてが正常に機能しますが、どうやらツールチ...

P粉973899567 2023-08-25 23:08:24 0  1  547

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 0  1  581

タイトルを次のように書き換えます: 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 0  1  520

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

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

P粉545682500 2023-09-03 19:51:51 0  2  564

css - flex を使用して 3 列レイアウトを実装する方法ですが、子要素の高さは適応的である必要がありますか?

flex を使用して図の 3 列のレイアウトを実装したいと考えています。現在、次の問題が発生しています。親要素が display: flex に設定されている場合、3 つの列の高さが同じになり、3 つの列の高さが必要になります。列をアダプティブに設定しようとしましたが、 flex-direction:colume も flex-flow:row nowrap も目的の効果を達成できません。

滿天的星座 2017-05-16 13:45:22 0  1  1565

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 0  1  532

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

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

P粉587970021 2024-03-29 18:37:15 0  1  334

モバイルデバイスではレスポンシブレイアウトカードが正しく表示されません

説明 Web ページを作成する場合、モバイル バージョンを試すまでは、ChromeDevTools ですべてが期待どおりに動作していました。なぜこのようなことが起こるのでしょうか?そのような問題に遭遇したことはありません。再現手順 これはデスクトップ版で起こることです。幅を縮小した後: これは予想通りです。モバイル版をアクティブにすると、突然機能しなくなりました。flex+flex-wrap+flex-direction を使用したり、grid+grid-template-columns:Repeat(auto-fit,minmax) を使用したりしても、

P粉878510551 2024-03-19 22:21:02 0  1  389

React.js CSS ウィンドウの幅

Reactを使用してレスポンシブWebサイトを開発しています。スタイル設定には CSS スタイルシートを使用します。応答部分は @media クエリを使用して CSS で実装されます。問題は、Chrome を使用すると要素が大きく表示され、レイアウトが小さな画面 (タブレット) からサイトにアクセスしているように見えることです。私の理解では、Chrome はビューポートが小さいと「考え」、メディア クエリに適切な情報で応答します。この問題は、一定期間正常に動作した後、開発中に発生しました。何が間違っているのでしょうか?どうすれば修正できますか?注: Firefox で Web サイトを開く場合

P粉396248578 2024-03-31 16:31:23 0  1  462

私の履歴書のタイトル

1. PHP オブジェクト指向プログラミングに習熟し、PSR4 仕様に厳密に従い、良好なコーディング習慣を持っていること 2. 一般的な PHP 設計パターン (シングル ケース モード、ファクトリ パターンなど) に習熟していること 3. TP フレームワークと TP フレームワークの使用に習熟していることLaravel などの主流フレームワークを理解している 4. Linux、開発環境、テスト環境、共通サービスの設定に習熟している 5. HTML5/CSS3、レスポンシブ レイアウト用の BootStrap、および Flex+Rem エラスティック レイアウトの使用に習熟している 6. フ...

啦啦啦啦啦 2022-07-20 16:22:34 0  0  1001

単一のグリッドまたは Flex を使用して多様なカード レイアウトを作成する: 実用的なガイド

写真のようなレスポンシブカードレイアウトを作成しようとしています。私が現在行っているのは、コンピューター、タブレット、モバイル デバイス用に個別のレイアウトを作成することです。次に、メディア クエリを使用して、他の 2 つのビューの表示プロパティを display:none に設定します。例: [コンピュータ] ビューにいる場合、コンピュータのカード レイアウトではディスプレイが「なし」に設定されていませんが、他の 2 台のコンピュータではディスプレイが「なし」に設定されています。これは機能しますが、多くの冗長性が生じます。 Flex または Grid を使用して 3 つのレイアウトすべてを実...

P粉808697471 2024-04-02 21:07:36 0  2  465