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

DIGITCW技术 研究Technology Study26DIGITCW2023.09工业和信息化部的监测数据显示，2023年12月，国内累计移动互联网流量达到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端网页内容时，由于移动端设备屏幕比较小，网页在手机的浏览器中会出现左右滚动条，用户需要左右滑动才能查看完整的一行内容。视觉视口（也叫可见视口）指用户基于HTML5+CSS3的Web前端响应式页面布局研究陈红卫（江苏省徐州技师学院信息工程学院，江苏 徐州 221000）摘要：文章从Web前端响应式布局的现状与优势出发，重点阐述了所使用到的视口、媒体查询、流式布局、弹性布局、流式图片和rem适配布局等关键技术，通过对不同属性值的分析，使读者能够掌握Web前端响应式布局所使用的关键技术，最后展望了Web前端响应式布局的未来发展。关键词：Web前端；视口；响应式布局；媒体查询；弹性布局doi：10.3969/J.ISSN.1672-7274.2023.09.009中图分类号：TP 393.092 文献标志码：A 文章编码：1672-7274（2023）09-0026-03Research on Web Front-end Responsive Page Layout Based on HTML5+CSS3CHEN Hongwei(School of Information Engineering,Xuzhou Technician College,Jiangsu Province,Xuzhou 221000,China)Abstract:This article starts from the current situation and advantages of responsive layout in the Web front-end,focusing on the key technologies used,such as Viewport,media query,streaming layout,elastic layout,streaming image,and rem adaptive layout.By analyzing different attribute values,readers can grasp the key technologies used in responsive layout in the Web front-end.Finally,it looks forward to the future development of responsive layout in the Web front-end.Key words:Web front-end;Viewport;responsive layout;media query;flex作者简介：陈红卫（1983-），女，江苏滨海人，高级讲师，主要从事教育教学工作。图1 布局视口、视觉视口、理想视口DCWTechnology Study技术研究27数字通信世界2023.09正在看到的网站的区域，这个区域的宽度等同于移动设备的浏览器窗口的宽度。当在手机中缩放网页的时候，操作的是视觉视口，而布局视口仍然保持原来的宽度。理想视口对设备来讲是最理想的视口尺寸。使用理想视口可以使网页在移动端浏览器上获得最理想的阅读和浏览的尺寸宽度，可以通过设置标签的name属性和content属性来实现。其中name属性值为Viewport，content属性则给出了与name属性相关的值，如width=device-width，指设置Viewport的宽度为设备宽度，user-scalable设置是否允许用户缩放，值为yes或no（1或0），initial-scale设置初始缩放比，maximum-scale设置最大缩放比，minimum-scale设置最小缩放比，三个属性值均为大于0的数字。2.2 媒体查询（Media Queries）CSS3的媒体查询Media Query（也称为媒介查询）5，是指通过比较浏览器窗口的尺寸、屏幕大小比例和设备的方向等不同来更改页面显示效果。具体语法如下。media mediatype and|not|only(media feature)选择器属性名:属性值其中mediatype称为媒体类型，是将不同的终端设备划分为不同的媒体类型，它的值有用于所有设备的all、用于打印和打印预览功能的print，用于智能手机、平板电脑、电脑屏幕等的screen和用于发声设备的如屏幕阅读器等的speech。media feature称为媒体特性表达式，指每种媒体类型都具备各自不同的特性，根据不同媒体类型特性设置不同的展示风格。具体值见表1。表1 媒体特性值 值 说明width指输出设备中可见范围的宽度height指输出设备中可见范围的高度min-width指输出设备中可见范围最小宽度max-width指输出设备中可见范围最大宽度device-width设备宽度device-height设备高度max-device-width最大设备宽度min-device-width最小设备宽度orientation（设备的窗口朝向）landscape；横屏，宽度比高度大portrait；竖屏，高度比宽度大关键字（and|not|only）将媒体类型或多个特性连接到一起作为媒体查询的条件。其值and可以将多个媒体特性连接到一起，相当“且”的意思；not是排除某个媒体类型，相当于“非”的意思，可以省略；only指定某个特定的媒体类型，可省略。媒体查询的引入方式分为内部方式引入和外链式引入。内部方式引入如下。h3 color:gray;font-size:25px;/*横屏宽大于高*/media screen and(max-width:320px)and(orientation:landscape)h3 color:dark;font-size:30px;/*竖屏高大于宽*/media screen and(min-width:640px)and(orientation:portrait)h3 color:pink;font-size:20px;外链式引入方式是在html的head标签的内部使用1ink标签引入外部的css文件，如下所示。DIGITCW技术 研究Technology Study28DIGITCW2023.092.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所示。线）、flex-start（开头）、center（中心）、flex-end（结尾）、stretch（拉伸）。order属性用于设置子元素的排列顺序，默认值为0，且数值越小，排列越靠前。flex属性是flex-grow、flex-shrink、flex-basis的复合属性。它可以对子元素的伸缩性进行设置，究其本质，是设置元素对剩余空间的分配。其中，flex-grow指放大比率，默认为0；flex-shrink指缩小比率，默认为1；flex-basis指宽度，像素值，默认为auto。flex-shrink和flex-basis为可选属性。值得注意的是flex-grow属性默认值为0，即使存在剩余空间，元素也不会放大。2.5 流式图片（Fluid Images）在前端开发中，在制作Banner图、轮播图、商品展示图等时，经常会用到图片元素。为了避免出现图片显示不全或留有空白，此时需要使用流式图片，即采用百分比宽度的方式，如imgmax-width:100%;height:auto，使图片能够根据设备或屏幕大小实现自适应。2.6 rem适配布局rem（root em）是一个相对单位，类似于em，不同的是rem的基准是相对于html元素的字体大小。比如，根元素（html）设置font size=12px；非根元素设置width:2rem；则换成px表示就是24 px。可以通过修改html里面的文字大小来改变页面中元素的大小以达到整体控制。3 结束语综上所述，利用响应式布局关键技术开发出来的Web前端页面，不仅能够适应不同的设备，提高用户的体验度，还提高了Web前端开发人员的工作效率，降低了开发成本。在移动互联网蓬勃发展的大环境下，我们相信Web前端响应式布局技术的应用将会越来越多，越来越广。参考文献1 陈洪敏基于HTML5与CSS3的响应式网页设计研究J信息与电脑（理论版），2022,34(20):37-40.2 鲁鑫超响应式技术在网页设计中的应用D天津：天津职业技术师范大学，2022.3 孟秀霞Web UI技术的研究与应用D北京：中国地质大学（北京），2019.4 薛玉倩基于HTML5响应式页面的研究与应用J内蒙古科技与经济，2018(18):62,64.5 赵怡姗，范明钰基于HTML5与CSS3的网页设计技术研究J成都信息工程大学学报，2021,36(6):641-645.6 张晶晶，曹双双，杨怡洁，等基于Bootstrap框架的响应式网站设计J电脑知识与技术，2020,16(34):247-248.图2 弹性盒结构弹性布局提供了一些常用的属性，利用这些属性可以灵活地对元素进行排列。这些属性主要分为两种：一种是对容器进行设置，另一种是对子元素进行设置。对容器进行设置的属性有display、flex-flow、flex-direction、flex-wrap、justify-content和align-items。其中flex-flow属性是flex-direction和f lex-wrap的组合，简写形式为f lex-f low:row nowrap。对子元素进行设置的属性有align-self、order、flex、flex-grow、flex-shrink和flex-basis。其中，align-self属性控制了元素在其父元素的侧轴方向上的排列对齐方式，取值意义与align-items取值相似，有auto（默认值）、baseline（基