小型移动设备上打开时内容大小适当所有文本易于阅读并且页面易于导航。在页面样式中访问视口的大小对于实现这种响应式设计至关重要而实现此目的的主要方法是使用媒体查询。具体来说您将使用规则。适当的规则下的任何样式仅适用于适合特定尺寸的屏幕。考虑以下示例。假设您希望在网站段落出现在较小设备上时增加其字体大小。实现此目的的一种方法是将以下添加到页面让我们分解一下这段代码。本的字体大小声明为像素。下面规则根据用户视口的宽度有选择地应用样式。规则的第一部分是媒体类型它告诉浏览器要应用特殊样式的页面类型。
在此示例中您为任何普通设备的屏幕选择屏幕。其他选项包括打印机使用的打印和屏幕阅读器使用的语音。在规则的第二部分中您声明样式应仅应用于最大宽度为像素的屏幕这是一个相对较小的值。但是如果您想 印度电话号码列表 针对更小的设备设置样式则可以降低最大宽度值。最后将替代样式放置在规则的主体中。在本例中您声明段落标记内的文本的字体大小应为像素。如果适用于用户的视口由于的级联性质此规则将覆盖先前声明的值。这个例子相对简单但是在中还有更简单的方法来实现动态字体大小缩放例如使用动态单位而不是像这样的绝对单位。
但在实践中您可以使用规则对页面样式进行大幅调整以实现响应式设计。我们再看另一个例子移动设备的屏幕很窄因此您可以使用规则来调整页面的样式以更好地利用设备上的可用垂直空间而不是水平空间。假设您有一组卡片在页面上显示一些信息如下所示水平显示的三个编号的块这些卡片在宽桌面屏幕上可以很好地显示但在移动设备上没有足够的空间来连续显示所有三张卡片。要解决此问题您可以将卡片在较小的屏幕上排列成一列。假设您对三张卡片有以下标记超文本标记语言卡片容器是一个弹性盒具有以下样式用于将放置在其中的卡片居中要在小屏幕上将项目排列在列中您可以添加单个规则来更改卡片容器的在这里单行列按照最大宽度为。 |
