自适应网页制作

忆姜楠

通过这个月的网站制作，让我进一步了解到了响应式网页的制作方法与实际应用上带来的好处。响应式网页也就是我们所说道的自适应网页。

在网页制作中，我们去浏览自己调整好的网页，然后在调整屏幕分辨率的时候，会发现所浏览的网页出现了错位，或者是显示不全。这个问题我想不论是新老WEB前端开发人员都有所遇见过。也正因为如此，web前端工程师们就迎来了一个十分困扰的问题，就是如何让自己的网页能够适应在所有分辨率去浏览。

起初，前辈们想到的解决办法是做几个主流分辨率大小的网页，随着分辨率的不同去加载相对应的网页。但是这种办法我个人觉得太过于客观，因为它只是考虑的大部分所喜好的用多大分辨率去浏览网页，也就是还会有一部分人浏览这个网页还是会出现错位或者显示不全（出现水平滚动条）。这十分影响浏览者对网页的评价。

前几天在网上学习到了一些有关于自适应网页制作的知识，在自己亲手实际操作的过程中，发现有所收获，但是并不完美，因为有些东西没有达到预计的效果，下面我来分享一下我的自适应网页制作经验。

网页制作，我们绝大多数都是利用DIV+CSS进行网站布局的，在布局的过程中，我们记住以下几点就可以了：

1、  用css对div就行修饰时，宽度要设置百分比，高度不要做限制。

2、  添加的图片，不要设置绝对的宽度与高度，如果希望图片占据整个div，那么只需要设置图片的宽度为100%。

3、  字号的自适应是我觉得最头疼的一件事，因为看了很多文章，都是同一个说法：不适用PX来显示字号，使用em（与rem）；因为像素是绝对单位，不管在在什么分辨率下浏览，都会显示你所设置的字号大小，而em与rem是相对单位，也就是会根据分辨率大不同显示相应的字号。一般浏览器所默认的字号是16px，也就是100%，也等于1em。例如我们要设置12px字号，用em为单位来表示就是12/16=0.75em。px与em之间就是这样来进行转换的。（但是这种办法我没掌握好，没有达到使字号自适应的目的）

4、  流动布局，也就是在进行布局是，要使用浮动，利用float ，好处就是如果屏幕宽度不够容纳下两个元素，那么后一个会浮动到第一个的下面，避免了网页显示不完整。

以上就是我个人在制作自适应网页的收获与经验，希望前人指点，后人吸取经验。