我们写了一个网页，在电脑上看起来效果很好。
但确切的说，是在我们自己的电脑上看起来很好，换一个电脑呢？啊，我说的不是兼容性的问题。只是可能这两个电脑的分辨率不大一样，网页显示出来的效果也就不一样。
但是我并没有两台电脑，不过我可以调整一下浏览器窗口的尺寸，来看看效果。当然，大于当前显示器的尺寸我们主要还得靠推测，虽然可以借助浏览器的缩放在一定程度上查看效果，但是不够理想。[1]
这不是一个美好的世界，因为它不是完美的，我适应了这个尺寸，却对那个尺寸不友好，焦头烂额，要不是鼠标是我自己花钱买的，我早摔出去了！
这时候我们就要考虑网页的自适应，让它自己学会适应环境，这就美妙了。就好像教会了孩子干活，父母就可以偷懒了，23333。
那么如果我们把所有的宽度都用百分比来表示的话，是不是可以适应所有的宽度？好像是的，这可以解决好多问题，所以比例虽然不是确定的尺寸，但是它有它存在的意义。但是这就够了么？永远要考虑极限问题，才能更好的保证适应的效果。
如果超宽屏幕，那么内容区域多宽合适？ 50%，已经和普通屏幕一样宽了，但是为了照顾其他用户，我们就这样了。普通屏幕呢？50% 虽然窄了点，也还可以接受吧。手机用户……表示这个区域用来观看冰糖葫芦正好。
所以我们需要一些限定，才能让这个事情变得更好。所以有以下四个属性：
min-width: 50%;max-width: 50%;min-height: 50%;max-height: 50%;min 是最小的意思，max 是最大的意思，可能你们已经知道了，但是我这只农村老鼠在上初中的时候还完全不懂这个，老师写了一黑板，我看的翻白眼。这可是我和前面女生不耻下问得来的知识，现在无私的传授给你们了。
好了，意思都看懂了，稍微解释一下：就是说这个元素的宽度（或者高度），最大（或者最小）不能超过后面这个值，如果超过怎么办？那就强行设定为后面的值，就相当于指定了固定的宽高。它们的取值和普通宽高一样，不过，和普通宽高配合的时候可能要使用不同的单位（看具体情况），才能达到比较好的效果。比如：
x {width: 50%;min-width: 360px;max-width: 800px;}那么这个元素的宽度首先取父元素的 50%，然后如果小于 360px 就被设置为 360px；如果大于 800px 就被设置为 800px。再结合我们前面的例子看，这样的宽度设置是不是就比较合理了？
这就比较严谨了，但是还有一些麻烦。每一个元素都是和父元素相比，这是一个连续的比例。结果是什么？到了深层元素你已经很难准确知道它的宽度是怎样的了。这是一个很大的麻烦，不过也有一个十分直接的解决方法。自适应的话，不就是参照浏览器的尺寸来定位元素尺寸么？那如果我能获得浏览器的尺寸的话……
但是我们要先明确一个问题：我们需要的究竟是什么尺寸？浏览器窗口的尺寸么？不同浏览器，不同系统，不同的情况下，浏览器窗口的边框粗细是不一样的，上面显示不显示收藏栏……
这并不是一个好的想法，会导致大量的麻烦。那么我们需要的是什么？浏览器中用来显示网页的区域的尺寸。这个区域叫做：视口（Viewport），一个很难受的翻译，反正就是浏览器中网页的可视范围。你可能联想到了我们在 第七章 基本模板 里的一些东西了。嗯，说的是一个东东，不过我依旧不打算深入解释。
我们说到哪里了？对，如果相对于视口来定义尺寸的话，就很方便了：
y {width: 36vw;height: 72vh;}两个单位，vw 表示当前可视区域宽度的 1%；vh 表示当前可视区域高度的 1%。这就很帅气了，而且在各种需要长度的时候都可以用，而且取值可以超过 100。
这就结束了么？都这么方便了，索性方便到底好了。
z {width: 36vmax;height: 72vmin;}v 代表视口（Viewport），猜也猜到了，这个最大最小，又没说宽高，该怎么理解呢。vmax 就是 Viewport 的宽高中比较大的那个，而 vmin 就是比较小的那个。
你说这有什么用？比如我现在想显示一个能够在一屏被完整显示出来的正方形，怎么办？电脑上一般 Viewport 的高度小于宽度，但是以高度为准的话，到了手机上（竖屏情况），情况又相反，就很难判断。而这两个单位就很好的回避了这个问题。
这一章内容有点多，大家一定要自己动手操作，通过实践去理解它们的效果。老鼠写的这么努力，有咖啡喝的么？
暂无评论内容