新人问：html中不同尺寸的显示器，显示的效果不一样，怎么解决？_html/css

新人问：html中不同尺寸的显示器，显示的效果不一样，怎么解决？_html/css_WEB-ITnose

php中文网

发布： 2016-06-24 11:51:24

原创

2178人浏览过

刚学的网页设计，在学html中，我做了一个页面，把宠物的信息放上去。可是在14.6寸的笔记本看来是正常的，拿到19寸的显示器来看就歪曲了。
如果改好了，在19寸的显示器看起来是正常的，拿到笔记本看起来就很别扭，有什么函数或者什么标签之类的，可以随着显示器的变化而自动改变尺寸么？
代码如下：

<html>	<head>		<title>我的宠物</title>	</head>	<body bgcolor="#cyan">		<p>			<img  src="image/1.png"    style="max-width:90%"  style="max-width:90%" alt="新人问：html中不同尺寸的显示器，显示的效果不一样，怎么解决？_html/css_WEB-ITnose" >		<!--这里放入一个banner-->		</p>		<br>		<h2><p>Jerry</p></h2>		<!--现在可以放入一张宠物的图像，使之右对齐-->		<p>			<img  src="image/宠物猫.jpg"    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>
                    <div class="aritcle_card">
                        <a class="aritcle_card_img" href="/ai/1269">
                            <img src="https://img.php.cn/upload/ai_manual/000/000/000/175680159677875.jpg" alt="Krikey AI">
                        </a>
                        <div class="aritcle_card_info">
                            <a href="/ai/1269">Krikey AI</a>
                            <p></p>
                            <div class="">
                                <img src="/static/images/card_xiazai.png" alt="Krikey AI">
                                <span>68</span>
                            </div>
                        </div>
                        <a href="/ai/1269" class="aritcle_card_btn">
                            <span>查看详情</span>
                            <img src="/static/images/cardxiayige-3.png" alt="Krikey AI">
                        </a>
                    </div>
                			<!--再来一条华丽的分割线-->			<hr align="left" width="800" size="3" color="red">			2014年12月20号：<br>			  今天的天气很好，所以带jerry去鱼梁河钓鱼，一路上，看到美丽的田边开满了<br>			花儿，天边的云，映着彩霞的分红，好美一副景象。		</p>	</body></html>

登录后复制

效果截图如下：

立即学习“前端免费学习笔记（深入）”；