第七十二章 自适应

我们写了一个网页,在电脑上看起来效果很好。

但确切的说,是在我们自己的电脑上看起来很好,换一个电脑呢?啊,我说的不是兼容性的问题。只是可能这两个电脑的分辨率不大一样,网页显示出来的效果也就不一样。

但是我并没有两台电脑,不过我可以调整一下浏览器窗口的尺寸,来看看效果。当然,大于当前显示器的尺寸我们主要还得靠推测,虽然可以借助浏览器的缩放在一定程度上查看效果,但是不够理想。[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 的高度小于宽度,但是以高度为准的话,到了手机上(竖屏情况),情况又相反,就很难判断。而这两个单位就很好的回避了这个问题。

这一章内容有点多,大家一定要自己动手操作,通过实践去理解它们的效果。老鼠写的这么努力,有咖啡喝的么?

原文链接:https://www.ek58.com/archives/3665,转载请注明出处。

0

评论0

请先

没有账号? 注册  忘记密码?