基于HTML5+CSS3的Web前端响应式页面布局研究

2023-10-19陈红卫

数字通信世界 2023年9期

陈红卫

（江苏省徐州技师学院信息工程学院，江苏徐州 221000）

工业和信息化部的监测数据显示，2023年1—2月，国内累计移动互联网流量达到417.9亿GB，同比增长了12%，截至2月底移动互联网用户数达14.68亿户，比上年末净增1 422万户。移动互联网流量及用户量的增加带来了智能手机市场的持续发展，智能手机屏幕的形态也从直板屏、曲面屏发展到了折叠屏。不断升级的屏幕形态、屏幕尺寸、屏幕分辨率对Web前端页面的布局有了更高的要求。

Web前端响应式布局是一种新兴的布局方式，它基于HTML5和CSS3等技术[1]，使开发出的页面可以实现跨平台和自适应的效果，能够根据不同的终端设备自动调整布局，使Web页面能够在PC端和移动端的各类设备上呈现出一致的效果[2]。

1 响应式布局

为了解决移动互联网冲浪问题，在2010年5月，响应式网站设计的始祖，国外非常有名的网页设计师Ethan Marcotte提出了一个全新的概念，其核心想法就是让一个网站可以和多个终端集成，而不需要为每个终端创建特定版本[3]。

在Web前端技术中，响应式布局是基于HTML5+CSS3实现的，具体包括以下技术点[3]：一是由HTML5实现的基本网页结构；二是由CSS3实现的基本网页样式；三是HTML5中的视口（Viewport）；四是CSS3中的媒体查询（Media Queries）；五是流式布局（Fluid Layout）；六是弹性布局（Flex）；七是流式图片（Fluid Images）；八是rem适配布局。

2 Web前端响应式布局关键技术

2.1 视口（Viewport）

视口（Viewport）是指浏览器显示页面内容的屏幕区域，可以分为布局视口、视觉视口和理想视口[4]。如图1所示。布局视口（也叫视窗视口）指网页的宽度，一般移动端浏览器都默认设置了布局视口的宽度。布局视口存在的问题有，当移动端浏览器展示PC端网页内容时，由于移动端设备屏幕比较小，网页在手机的浏览器中会出现左右滚动条，用户需要左右滑动才能查看完整的一行内容。视觉视口（也叫可见视口）指用户正在看到的网站的区域，这个区域的宽度等同于移动设备的浏览器窗口的宽度。当在手机中缩放网页的时候，操作的是视觉视口，而布局视口仍然保持原来的宽度。理想视口对设备来讲是最理想的视口尺寸。使用理想视口可以使网页在移动端浏览器上获得最理想的阅读和浏览的尺寸宽度，可以通过设置标签的name属性和content属性来实现。其中name属性值为Viewport，content属性则给出了与name属性相关的值，如width=device-width，指设置Viewport的宽度为设备宽度，user-scalable设置是否允许用户缩放，值为yes或no（1或0），initial-scale设置初始缩放比，maximumscale设置最大缩放比，minimum-scale设置最小缩放比，三个属性值均为大于0的数字。

图1 布局视口、视觉视口、理想视口

2.2 媒体查询（Media Queries）

CSS3的媒体查询Media Query（也称为媒介查询）[5]，是指通过比较浏览器窗口的尺寸、屏幕大小比例和设备的方向等不同来更改页面显示效果。具体语法如下。

其中mediatype称为媒体类型，是将不同的终端设备划分为不同的媒体类型，它的值有用于所有设备的all、用于打印和打印预览功能的print，用于智能手机、平板电脑、电脑屏幕等的screen和用于发声设备的如屏幕阅读器等的speech。

media feature称为媒体特性表达式，指每种媒体类型都具备各自不同的特性，根据不同媒体类型特性设置不同的展示风格。具体值见表1。

表1 媒体特性值

关键字（and|not|only）将媒体类型或多个特性连接到一起作为媒体查询的条件。其值and可以将多个媒体特性连接到一起，相当“且”的意思；not是排除某个媒体类型，相当于“非”的意思，可以省略；only指定某个特定的媒体类型，可省略。

媒体查询的引入方式分为内部方式引入和外链式引入。内部方式引入如下。

2.3 流式布局（Fluid Layout）

在制作响应式网站时，仅使用媒体查询是远远不够的。这是由于媒体查询只能针对某几个特定阶段的视口，在此视口下，页面布局保持不变，直到捕捉到下一个角度，才会影响页面的显示，并且与越来越多的设备不兼容。因此，为了创建一个真正灵活的页面，有必要使用百分比布局，结合媒体查询来限制范围。百分比布局是一种等比例缩放布局方式，在CSS代码中使用百分比来设置宽度。百分比宽度的计算方式是，用目标元素宽度除以父盒子的宽度。

2.4 弹性布局（Flex）

弹性布局通过给父盒子添加Flex属性，来控制子盒子的位置和排列方式[6]。

Flex是Flexible Box的缩写，意为“弹性布局，弹性盒”。无论何种容器，被设置为Flex布局后，都将具有非常大的灵活性；通过给父盒子添加Flex属性，子元素的浮动属性（float）、清除浮动属性（clear）和垂直对齐属性（vertical-align）将消失；Flex容器（Flex Container）是指设置其display属性值为Flex的元素，称之为“容器”，在它里面的所有子元素立刻转换为容器成员，即Flex item，被称为“项目”；由容器、子元素和轴（横轴、纵轴）构成的布局被称为Flex布局。如图2所示。

图2 弹性盒结构

弹性布局提供了一些常用的属性，利用这些属性可以灵活地对元素进行排列。这些属性主要分为两种：一种是对容器进行设置，另一种是对子元素进行设置。对容器进行设置的属性有display、f lex-f low、f lex-direction、f lex-wrap、justifycontent和align-items。其中f lex-f low属性是f lexd i rect ion和f lex-w r ap的组合，简写形式为f lexf low:row now rap。对子元素进行设置的属性有align-self、order、flex、flex-grow、flex-shrink和flex-basis。其中，align-self属性控制了元素在其父元素的侧轴方向上的排列对齐方式，取值意义与alignitems取值相似，有auto（默认值）、baseline（基线）、f lex-start（开头）、center（中心）、f lex-end（结尾）、stretch（拉伸）。order属性用于设置子元素的排列顺序，默认值为0，且数值越小，排列越靠前。f lex属性是flex-grow、flex-shrink、flex-basis的复合属性。它可以对子元素的伸缩性进行设置，究其本质，是设置元素对剩余空间的分配。其中，flexgrow指放大比率，默认为0；f lex-shrink指缩小比率，默认为1；flex-basis指宽度，像素值，默认为auto。flex-shrink和flex-basis为可选属性。值得注意的是flex-grow属性默认值为0，即使存在剩余空间，元素也不会放大。