通过CSS的细节处理实现窗口适应

使用CSS进行窗口适应

1. 前言

对于刚接触前端开发不久的小白来说，好不容易写好了一个能够满意的页面，结果在浏览器像素改变时便变得一团糟。这对于程序员来说是很致命的。我将会在这篇文章中将我工作中积累的部分经验做个总结。

2. 受到窗口像素影响的因素

受到窗口大小影响的主要因素无非就是以下：

1. 标签的宽度

如果我们不对标签的宽度进行特定的处理，其往往是会随着窗口1:1的变化。这里最简单的方法是将宽度值设置为确定的像素。如：

该方法虽然可以做到页面不会被窗口破坏，但是在屏幕较小的设备上无法完全显示，显然这不是一个良好的方案。这里有另一种方法，我们可以将父标签极其所有需要保护排版的子标签宽度设置为百分比，使得我们的页面始终与窗口保持一定的比例。如：

该方法能够有效的解决窗口浮动不大的情况，这也是很多人最开始使用的方法，当然这种方法也适用于绝对布局和相对布局的页面中。

2.字体的大小

当我们需要字体的行列固定的时候，字体在一般情况下是不会随着窗口大小而改变的。这里我们也可以使用百分比的方式来进行确定，但是这种方法肯定是不直观的，因为我们并不知道基准大小。

3. 解决方案

综合以上问题，我们可以使用一举两得的方案。

1.rem自适应

rem是根据html的font-size大小来变化，正是基于这个出发，我们可以在每一个设备下根据设备的宽度设置对应的html

字号，从而实现了自适应布局。

目前有两种，一种是根据JS来调整html的字号，另一种则是通过媒体查询来调整字号，这里我们介绍第二种方法。

2.rem的值

1rem=1×（html>font-size）;

所以我们只需要针对不同的条件设置不同的html标签的font-size属性即可，这里使用PX做为单位。

3.具体使用

大多数人可能会第一时间想到JS动态设置属性的方法，当然这也是效果最好的方法之一。我们还可以使用另外一种简

单的方法。具体如下：

@media only screen and (min-width:×××){

在窗口不小于×××时使用的样式

}

注意这里建议min-width的值上小下大，这里还可以使用max-width等约束条件。而具体的取值根据不同的页面需求

有所变化，一般使用页面开始错乱的分界值。

最后在页面中用rem代替原有的px和%就可大功告成了。