ホームページ >ウェブフロントエンド >htmlチュートリアル >新人からの質問: HTML のモニターのサイズが異なると表示効果が異なります。問題を解決するにはどうすればよいですか? _html/css_WEB-ITnose
新人からの質問: HTML のモニターのサイズが異なると表示効果が異なります。問題を解決するにはどうすればよいですか? _html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:51:241948ブラウズ
HTMLを学びながらWebデザインを学び、ページを作成し、そこにペットの情報を掲載しました。ただし、14.6 インチのノートブックでは正常に見えますが、19 インチのモニターで見ると歪んでいます。
修正すると19インチのモニターでは普通に見えますが、ノートパソコンで持つと不自然になります モニターの変更に合わせてサイズを自動的に変更できる機能やラベルはありますか？
コードは次のとおりです:
<html> <head> <title>我的宠物</title> </head> <body bgcolor="#cyan"> <p> <img src="image/1.png" width="400" height="200"> <!--这里放入一个banner--> </p> <br> <h2><p>Jerry</p></h2> <!--现在可以放入一张宠物的图像，使之右对齐--> <p> <img src="image/宠物猫.jpg" width="500" height="381" border="4" align="right"/> </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 について詳しく学ぶ必要があります。
幅には % を使用してみてください;
@media screen and (max-width: 480px){
}
@media screen and (max-width: 960px){
}
またはスタイルを個別に定義してください
従来の方法では、一番外側の固定幅ボックスを中央に配置し、背景を左右に残します。
レスポンシブ レイアウトを使用したり、単純な領域のレイアウトにパーセンテージを使用したり、CSS3 メディア クエリを使用して複雑な領域のスタイルを変更したりすることもできます。