Home > Article > Web Front-end > Newcomer asked: The display effects of different sizes of monitors in HTML are different. How to solve the problem? _html/css_WEB-ITnose
Newcomer asked: The display effects of different sizes of monitors in HTML are different. How to solve the problem? _html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:51:241924browse
I just learned web design. When I was learning HTML, I made a page and put pet information on it. However, it looks normal on a 14.6-inch notebook, but distorted when viewed on a 19-inch monitor.
If it is corrected, it will look normal on a 19-inch monitor, but it will look awkward when you hold it on a laptop. Is there any function or label that can automatically change the size as the monitor changes?
The code is as follows:
<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>
The screenshot of the effect is as follows:
Reply to discussion (solution)
Sorry, the two pictures above are the effect of laptop. I put the wrong picture. The following is the effect of 19 monitor:
Try not to set w and h to fixed values. Instead, it is set as a percentage.
align="right"
The effect of this is that HTML and CSS are now separated. Your writing method is not good and is outdated. You should learn more about CSS.
Width and height should be proportional
Try to use % for width;
@media screen and (max-width: 480px){
}
@media screen and (max-width: 960px){
}
or define the style separately
align="right"
For this effect, html and css are now used Separate, your way of writing is not good and is outdated. You should learn more about CSS.
Try to use % for width;
@media screen and (max-width: 480px){
}
@media screen and (max-width: 960px) {
}
Or define the style separately
The traditional method is to center the outermost fixed-width box and leave backgrounds on the left and right.
You can also use responsive layout, use percentages for simple layouts, and use CSS3 media queries to restyle the complex ones.