关于如何解决网页制作中宽高自适应的问题

欢迎点击「算法与编程之美」↑关注我们！

本文首发于微信公众号："算法与编程之美"，欢迎关注，及时了解更多此系列文章。

关于如何解决网页制作中宽高自适应的问题

1问题描述

在假期里较系统的学习了html的静态网页制作，但在这过程中出现了一系列问题，比如：如何用盒子模型布局；如何用html和css实现轮播图的效果等；值得我们关注的是很多同学遇到了一个相同的问题，当我们的静态网页在其他PC端显示时，会出现排版混乱等情况，那么该如何解决宽高自适应的问题呢？在我经过几天的接触和学习之后，我对如何解决自适应问题有了初步的认识和经验，在此分享给大家，帮助大家快速了解和学习html。

2问题分析

一般而言，在我们设计网页的时候，经常会遇到自适应问题，实际这些工作完全可以交给浏览器来完成就可以了，只可惜，无论什么浏览器在自适应这个问题上都处理的不尽人意，在网上查询到的解决办法有很多，但有些解决办法并不是很适合我们这样的初学者，所以在解决一些技术上的问题的时候，我们需要选择适合自己的方式，除此之外，也要加强对基础知识的巩固，那么遇到问题的时候就可以迎难而解了。

3解决方案

自适应布局分两类：高度和宽度

1,高度自适应布局

高度自适应的原理就是把每个模块设置为绝对定位，再设置中间自适应的模块的top和bottom属性的值分别为头部模块和底部模块的高，这样一来就实现了自适应。代码如下：

html代码：

css代码：

2,宽度自适应，有三种方法，分别是用绝对定位；利用margin，中间模块先渲染；自身浮动。

a，用绝对定位来设置宽度自适应布局，原理：针对自适应模块使用绝对定位，在把left和right设置为左右两列的宽，其实原理和高度自适应一样，另外左右两列分别左右浮动。

html代码：

css代码：

b，中间一列优先渲染的自适应三列布局，优先渲染的关键：内容在html里面必须放在前面。自适应的div必须放在left和right前面且包含在一个父级div里。父级的div，left和right模块都向左浮动，接着对自适应的div设置margin，然后对left的margin-left的属性值设置为100%的负数，就是margin-left：-100%；对right的margin-left的属性值设置为自身宽度的负数，就是margin-left：-200px。

注意：自适应的div必须放在left和right前面且包含在一个父div里。

html代码：

css代码：

c，自身浮动，原理：中间列设置margin属性，就是把左右列分别左右浮动。注意：使用这个方法布局自适应的话，必须把自适应的那一列在html中放在left和right后面。

html代码：

css代码：

4总结

通过高度和宽度自适应的办法解决了我们初学者在进行网页制作时的排版布局问题，

自适应布局给了我们更多设计的空间，根据上面所说的，我们可以得出以下几点总结：

1.宽度需要使用百分比

例如这样：

2.处理图片缩放的方法

简单的解决方法可以使用百分比，但这样不友好，会放大或者缩小图片。那么可以尝试给图片指定的最大宽度为百分比。假如图片超过了，就缩小。假如图片小了，就原尺寸输出。

3.选择器渲染优先级

从左往右，如果同位上，值大的整个组合的权值就大，如果相同，再进行下一位比较。如果位数不够，在左边补处理。数位之间没有进制，不会满10向前一位进1。