在本例中您声明段落标记内的

Arzina444

的打印和屏幕阅读器使用的语音。在规则的第二部分中您声明样式应仅应用于最大宽度为像素的屏幕这是一个相对较小的值。但是如果您想针对更小的设备设置样式则可以降低最大宽度值。最后将替代样式放置在规则的主体中。文本的字体大小应为像素。如果适用于用户的视口由于的级联性质此规则将覆盖先前声明的值。这个例子相对简单但是在中还有更简单的方法来实现动态字体大小缩放例如使用动态单位而不是像这样的绝对单位。但在实践中您可以使用规则对页面样式进行大幅调整以实现响应式设计。

我们再看另一个例子移动设备的屏幕很窄因此您可以使用规则来调整页面的样式以更好地利用设备上的可用垂直空间而不是水平空间。假设您有一组卡片在页面上显示一些信息如下所示水平显示的三个编号的块这些卡片在宽桌面屏幕上可以很好地显示但在移动设备上没有足够的空间来连续显示所有三张卡片。要解决此问题您可以将卡片在较小的屏幕上排列成一列。假设您对三张卡片有以下标记 哥斯达黎加手机号码列表 超文本标记语言卡片容器是一个弹性盒具有以下样式用于将放置在其中的卡片居中要在小屏幕上将项目排列在列中您可以添加单个规则来更改卡片容器的在这里单行列按照最大宽度为像素的屏幕所需的方式更新。经过此更改在小屏幕上卡片现在如下所示三个编号的块垂直显示使用规则使您能够定位用户的视口因为它允许您确保页面的样式是动态的且响应灵敏。



关于的注释您可能熟悉另一个规则许多开发人员都使用它来调整用户初始视口的尺寸。但是此功能现已弃用。目前仅在旧版浏览器中可用微软于年月正式放弃了对它的支持。因此您应该在未来的任何代码中完全避免使用规则。使用视口使页面具有响应能力。视口是一个重要的浏览器概念它决定页面的哪些部分可见以及如何布局内容。根据视口专门化页面的样式是实现响应式设计的一项重要技术。在过去的几十年里智能手机作为人们访问互联网的主要方式的出现迫使网页设计师做出适应。无论设备大小如何用户都希望获得一致的体验。因此当您开发网页时请密切关注视口以确保您的网站在所有设备上满足这些期望。