基于HTML5和CSS3的响应式网页设计与实现

2020-07-13 06:34李念武汉东湖学院计算机科学学院

消费导刊 2020年29期

李念武汉东湖学院计算机科学学院

一、响应式网页设计理念

随着智能手机和各种便携式电子产品的出现，传统针对电脑端的网页设计技术无法保证网页在这些移动设备上有很好的显示效果和用户体验，但是如果针对每一款设备单独开发一个网站这样不仅增加了开发的成本，也给网页设计师们带来了许多重复性的工作。而响应式Web 开发技术的出现正好缓解了这一尴尬现状。

响应式Web设计开发思想，最早在2010年5月由国外著名网页设计师提出。核心思想是页面的设计与开发应当根据用户行为以及所使用设备的软硬件环境进行自动调整，这些软硬件环境包括：平台的系统，浏览器窗口，屏幕大小，屏幕定向等。

响应式网页开发的核心是指在对页面进行设计时，充分考虑移动设备的屏幕大小、分辨率的特性等。应优先考虑移动设备的这些特性，然后在设计页面时从最小尺寸的展示效果入手进行版面设计与布局，在布局满足了最小尺寸的屏幕显示以后再逐渐加大显示尺寸，调整布局内的各个模块的排列方式，使每个元素的显示效果，长宽高等参数能自动适应浏览器窗口及终端设备的屏幕分辨率。在小尺寸显示时，可以适当降低图片素材的分辨率，文字内容部分可以尽量以标题的形式少量出现，具体内容可以放在子页面中展示。然后当窗口或设备的显示尺寸变大时，内容慢慢丰富，图片逐渐清晰。

二、核心技术

（一）HTML5

HTML5是一种具有跨平台特点的网页设计语言，其语法结构不受任何平台和系统的限制，编写灵活简单，且适用于现有的主流操作系统、主流的终端设备。这一特点正好与“响应式网页设计”中的跨平台不谋而合，HTML5语言跨平台的兼容性使得它在响应式开发中有着得天独厚的优势。

（二）CSS3

CSS3 中新增的媒体查询（Media Queries）模块提供了向终端设备或显示平台查询媒体类型的功能，通过添加规范的查询表达式来实现对当前媒体显示效果的自动匹配。

（三）流动网格

流动网格布局使得各层块的位置具有浮动特性，图片、文字等网页元素的属性单位会由以前的像素为转变成以百分比或者是字体比例的形式。如：某DIV块的宽由100px变成20%等。这样一来网页元素的尺寸就能灵活地根据媒体查询的结果来自动调整显示值。

（四）弹性图片

弹性图片是指图片的大小具有弹性。或一幅图片在800像素以上宽度的设备上显示为 480px＊480px，那么用弹性图片的设计原则，其宽和高则可以同时设置为60%。这样一来当页面在320像素宽的设备上显示时，图片的大小则会自动调整为192px＊192px。

三、网页设计与实现

（一）布局设计

本文以企业网站面面为便来完成响应式网页的设计与实现。网页的布局应达到自动适应PC机、平板电脑、手机等终端设备的显示效果。整个页面分为七大模块：#header-wrap(logo)、#main navigation、#layerslider、#home-intro、#feature-block、#intro-features、#copyrights。七大模块在页面中分布于七行，占满浏览器整个窗口宽度。其中#feature-block模块被分成三列，#intro-features模块包含四列。这两上模块将会通过媒体查询来改变其列宽，以实现响应式布局的效果。

（二）viewport设计

自动适应终端设备的显示效果，首先必须要通过视口viewport来获取到显示设备或窗口的当前宽度值，同时还可以调整显示窗口的大小以适应设备，然后设置窗口大小固定，禁止用户对显示窗口进行放大缩小操作。

（三）媒体查询设计

本网站设置了三种不同的媒体查询功能，分别适用于窗口宽度介于768px-959px的PC端、480px-767px、320px-479px的移动终端。在移动终端设备上原有的导航栏将被设置为不可见，将菜单放置于一个“