【H2O2|全栈】关于CSS（13）如何让页面适应任意屏幕？

CSS3为我们提供了几种常见的设置尺寸的方式，按照最大、最小尺寸设置的方式如下:

属性	含义
min-width	宽度不低于该数值的屏幕
max-width	宽度不超过该数值的屏幕

注意，如果要写多种尺寸的屏幕，应当分别写出对应的样式，并按照顺序排列。

如果采用的是min-width尺寸，则应当先写小屏幕的代码，后写大屏幕的代码，采用max-width则反之，防止同级规则前后覆盖的问题。

媒体查询的CSS语法如下:

css 复制代码

@media 设备 and (区间) and (区间)... {
    /* 指定尺寸下的CSS样式代码 */
}

比如，我们想引入一个宽度不低于800px的设备，使用媒体查询的语法如下：

css 复制代码

@media all and (min-width: 800px) {
    /* 指定尺寸下的CSS样式代码 */
}

对于部分网页，还可能涉及到横屏效果和竖屏效果的样式差异，我们可以在区间中利用orientation属性来设置两种类型的网页。

orientation有下面两种常见的属性值：

属性值	含义
portrait	竖屏
landspace	横屏

orientation也常常用于大屏、特殊宽屏的应用。

媒体查询的代码也可以写在CSS外部样式表中，并通过link标签引入。

比如，我们需要引入一个宽度不超过1500px的屏幕设备的CSS样式表，可以使用下面的link语句引入：

html 复制代码

<link rel="stylesheet" media="screen(max-width: 1500px)" href="w1500.css">

在制作移动端（手机端）的网页时，我们知道不同品牌、型号的手机屏幕的尺寸是完全不同的。

如果我们要为每一种屏幕都设置单独的一套CSS样式进行匹配，工作量将会十分巨大。

这时，我们就需要一套使用相对单位的代码，能够根据屏幕的尺寸自适应调整网页的尺寸，避免因为尺寸问题导致的网页超出屏幕显示不全等问题。

在这里，我们需要引入两个新的单位：

单位	含义
vw	view-width 视图宽度
vh	view-height 视图高度

对应的是显示的区域宽度，相当于百分比。100vw和100vh对应铺满整个浏览器窗口或者设备屏幕。

通常来说，我们的移动端设计稿的宽度都为750px，高度因内容而异。

如果我们将单位设置为px，则屏幕的尺寸将被固定在750px，导致屏幕自适应的问题。

所以我们需要使用相对单位rem和px产生联系，让设计稿里的1px对应屏幕上此时的1px。

这里会用到我们CSS3的calc()函数实时计算当前屏幕宽度与设计稿的宽度的关系：

css 复制代码

html{
    font-size: calc(100vw / 750);
}

不要忘记1rem就是根元素的字体大小哈。

使用rem的好处是相对单位可以实时调节，等比例自适应，屏幕尺寸变化时内容的显示格式不会受到影响，缩放内容将没有效果。

使用px绝对单位就不能自适应了，在屏幕大小变化或者缩放时整个页面尺寸会变化，甚至发生格式上的错误。

本期的内容到这里就结束了，主要是响应式布局和移动端布局两方面的内容，这些在之后的面试中都是非常重要的。

在全栈领域，博主也只不过是一个普通的萌新而已。本系列的博客主要是记录一下自己学习的一些经历，然后把自己领悟到的一些东西总结一下，分享给大家。

文章全篇的操作过程都是笔者亲自操作完成的，一些定义性的文字加入了笔者自己的很多理解在里面，所以仅供参考。如果有说的不对的地方，还请谅解。

==期待与你在下一期博客中再次相遇==

------浓度骤降的【H2O2】