新人からの質問: HTML のモニターのサイズが異なると表示効果が異なります。問題を解決するにはどうすればよいですか? _html/css

ホームページ

ウェブフロントエンド

htmlチュートリアル

新人からの質問: HTML のモニターのサイズが異なると表示効果が異なります。問題を解決するにはどうすればよいですか? _html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:51 AM

HTMLを学びながらWebデザインを学び、ページを作成し、そこにペットの情報を掲載しました。ただし、14.6 インチのノートブックでは正常に見えますが、19 インチのモニターで見ると歪んでいます。
修正すると19インチのモニターでは普通に見えますが、ノートパソコンで持つと不自然になりますモニターの変更に合わせてサイズを自動的に変更できる機能やラベルはありますか？
コードは次のとおりです:

<html>	<head>		<title>我的宠物</title>	</head>	<body bgcolor="#cyan">		<p>			<img  src="/static/imghwm/default1.png"  data-src="image/1.png"  class="lazy"      style="max-width:90%"  style="max-width:90%" alt="新人からの質問: HTML のモニターのサイズが異なると表示効果が異なります。問題を解決するにはどうすればよいですか? _html/css_WEB-ITnose" >		<!--这里放入一个banner-->		</p>		<br>		<h2 id="p-Jerry-p"><p>Jerry</p></h2>		<!--现在可以放入一张宠物的图像，使之右对齐-->		<p>			<img  src="/static/imghwm/default1.png"  data-src="image/宠物猫.jpg"  class="lazy"      style="max-width:90%"  style="max-width:90%" border="4" align="right"/ alt="新人からの質問: HTML のモニターのサイズが異なると表示効果が異なります。問題を解決するにはどうすればよいですか? _html/css_WEB-ITnose" >		</p>		<p>			年龄：1.2岁<br>			最喜爱的食物：鱼，热狗<br>			特点：好动，活泼，上房下梁<br>			<!--插入一条华丽的分割线-->			<hr align="left" width="800" size="3" color="red">			<p align=center>更新宠物日志：</p>			<!--再来一条华丽的分割线-->			<hr align="left" width="800" size="3" color="red">			2014年12月20号：<br>			  今天的天气很好，所以带jerry去鱼梁河钓鱼，一路上，看到美丽的田边开满了<br>			花儿，天边的云，映着彩霞的分红，好美一副景象。		</p>	</body></html>

効果のスクリーンショットは次のとおりです:

ディスカッションへの返信 (解決策)

申し訳ありませんが、上の 2 つの写真はラップトップ I の効果です。間違った画像を貼り付けてください。下の画像は 19 モニター用です。効果:

w と h を固定値に設定せず、パーセンテージの形式で設定してください。

align="right"
これは、HTML と CSS が分離されたことが影響しています。CSS についてもっと学ぶ必要があります。

幅と高さは比例する必要があります

幅には % を使用してください。
@media screen and (max-width: 480px){

}
@media screen and (max-width: 960px){

}
または、別途定義してください。 Style

align="right"
これは、HTML と CSS が分離されていることが影響しています。CSS について詳しく学ぶ必要があります。

わかりました。詳細はこちら（笑）CSS。

幅には % を使用してみてください;
@media screen and (max-width: 480px){

}
@media screen and (max-width: 960px){

}
またはスタイルを個別に定義してください

、勉強になりました。

従来の方法では、一番外側の固定幅ボックスを中央に配置し、背景を左右に残します。
レスポンシブレイアウトを使用したり、単純な領域のレイアウトにパーセンテージを使用したり、CSS3 メディアクエリを使用して複雑な領域のスタイルを変更したりすることもできます。

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

HTMLを超えて：Web開発のための重要なテクノロジーApr 26, 2025 am 12:04 AM

強力な機能と優れたユーザーエクスペリエンスを備えたWebサイトを構築するには、HTMLだけでは十分ではありません。次のテクノロジーも必要です。JavaScriptは、Webページに動的とインタラクティブ性を与え、リアルタイムの変更がDOMを操作することで達成されます。 CSSは、美学とユーザーエクスペリエンスを向上させるために、Webページのスタイルとレイアウトを担当しています。 React、Vue.JS、Angularなどの最新のフレームワークとライブラリは、開発効率とコード組織構造を改善します。

HTMLのブール属性とは何ですか？いくつかの例を挙げてください。Apr 25, 2025 am 12:01 AM

ブール属性は、値なしでアクティブ化されるHTMLの特別な属性です。 1.ブール属性は、無効化された入力ボックスを無効にするなど、存在するかどうかによって、要素の動作を制御します。 2.彼らの実用的な原則は、ブラウザが異なっているときに属性の存在に応じて要素の動作を変更することです。 3.基本的な使用法は、属性を直接追加することであり、高度な使用法はJavaScriptを介して動的に制御できます。 4.一般的な間違いは、値を設定する必要があると誤って考えており、正しい執筆方法は簡潔にする必要があります。 5.ベストプラクティスは、コードを簡潔に保ち、ブールのプロパティを合理的に使用して、Webページのパフォーマンスとユーザーエクスペリエンスを最適化することです。

HTMLコードをどのように検証できますか？Apr 24, 2025 am 12:04 AM

HTMLコードは、オンラインバリデーター、統合ツール、自動化されたプロセスを使用するとクリーンになります。 1）w3cmarkupvalidationserviceを使用して、HTMLコードをオンラインで確認します。 2）リアルタイム検証のためにVisualStudiocodeにhtmlhint拡張機能をインストールして構成します。 3）HTMLTIDYを使用して、建設プロセスでHTMLファイルを自動的に検証およびクリーニングします。

HTML対CSSおよびJavaScript：Webテクノロジーの比較Apr 23, 2025 am 12:05 AM

HTML、CSS、およびJavaScriptは、最新のWebページを構築するためのコアテクノロジーです。1。HTMLはWebページ構造を定義します。2。CSSはWebページの外観に責任があります。

マークアップ言語としてのHTML：その機能と目的Apr 22, 2025 am 12:02 AM

HTMLの機能は、Webページの構造とコンテンツを定義することであり、その目的は、情報を表示するための標準化された方法を提供することです。 1）HTMLは、タイトルやパラグラフなどのタグや属性を使用して、Webページのさまざまな部分を整理しています。 2）コンテンツとパフォーマンスの分離をサポートし、メンテナンス効率を向上させます。 3）HTMLは拡張可能であり、カスタムタグがSEOを強化できるようにします。

HTML、CSS、およびJavaScriptの未来：Web開発動向Apr 19, 2025 am 12:02 AM

HTMLの将来の傾向はセマンティクスとWebコンポーネントであり、CSSの将来の傾向はCSS-in-JSとCSShoudiniであり、JavaScriptの将来の傾向はWebAssemblyとServerLessです。 1。HTMLセマンティクスはアクセシビリティとSEO効果を改善し、Webコンポーネントは開発効率を向上させますが、ブラウザの互換性に注意を払う必要があります。 2。CSS-in-JSは、スタイル管理の柔軟性を高めますが、ファイルサイズを増やす可能性があります。 CSShoudiniは、CSSレンダリングの直接操作を可能にします。 3. Webassemblyブラウザーアプリケーションのパフォーマンスを最適化しますが、急な学習曲線があり、サーバーレスは開発を簡素化しますが、コールドスタートの問題の最適化が必要です。

HTML：構造、CSS：スタイル、JavaScript：動作Apr 18, 2025 am 12:09 AM

Web開発におけるHTML、CSS、およびJavaScriptの役割は次のとおりです。1。HTMLは、Webページ構造を定義し、2。CSSはWebページスタイルを制御し、3。JavaScriptは動的な動作を追加します。一緒に、彼らは最新のウェブサイトのフレームワーク、美学、および相互作用を構築します。

HTMLの未来：ウェブデザインの進化とトレンドApr 17, 2025 am 12:12 AM

HTMLの将来は、無限の可能性に満ちています。 1）新機能と標準には、より多くのセマンティックタグとWebComponentsの人気が含まれます。 2）Webデザインのトレンドは、レスポンシブでアクセス可能なデザインに向けて発展し続けます。 3）パフォーマンスの最適化により、応答性の高い画像読み込みと怠zyなロードテクノロジーを通じてユーザーエクスペリエンスが向上します。

See all articles