专业知识

响应式页面开发基础

发布日期：2020-03-19

随着终端设备类型的丰富，设备尺寸的型号也越来越多，如果实现前端页面在不同终端设备中，按照设备的尺寸型号进行自动布局，保证良好的人际交互体验效果，已经成为网页前端设计所需要考虑的问题，当前支持响应式开发的架构较多，如主流BootStrap可以支持网页在不同终端尺寸下智能调整页面布局。本文主要从初学者角度对响应式页面开发基本技术进行介绍与实例分析。

响应式页面图例（图片来源搜索引擎）

响应式页面实例如上图所示，在页面尺寸拖动过程中，页面布局发生了变换，最典型之处可以从页面背景颜色角度看出。当尺寸缩小时，背景颜色变为灰色。以下将从实现所需技术及代码等方面进行实例分析。

基本概念、知识、技术

使用响应式设计技术进行页面的设计，主要涉及知识包括视口ViewPort，媒体查询，相对尺寸等。本例使用精确像素进行页面的布局设计。

1.响应式页面

响应式页面主要是指通过响应式布局技术的使用，实现页面在浏览器尺寸发生变化时，按照布局设置对页面布局进行自动化、智能化的展示。

2.视口

视口viewport，在Web开发中视口一般指浏览器窗口，移动设备中浏览器一般是全屏显示的，因此视口也可以理解为设备屏幕大小。响应式布局中需要将web页面视口设置为特定大小。一般设置方法需要在头部meta中设置：

视口属性设置

设置代码如上，device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素），initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例。

3.媒体查询

媒体查询主要用于设置在不同类型媒体下的网页的样式，在CSS3中对媒体查询”@media“进行了详细定义。设计人员可以针对不同媒体类型定义CSS，也可以通过不同媒体类型调用外部CSS文件。

直接定义CSS

调用外部样式

mediatype主要用于规定媒体的类型，主要类型包括以下方面：

媒体类型

media feature：媒体特征，主要用于确定在页面变化时，相关属性的值，主要媒体特征取值如下：

部分媒体特征

媒体查询时实现响应式布局的关键技术之一，如以下代码实现在页面宽度小于500px的CSS样式：

@media only screen and (max-width: 500px) {
 .bk{
 background-color:red;
 }
 ...//可继续写其他样式,当页面小于500px时背景颜色为red
}

以上给出本例实现基础知识，本例实现核心代码描述如下：

头部响应式相关代码

本例实现如gif效果所示，。如果您对以上方面有兴趣或代码错误、建议与意见，可以联系作者，共同探讨。期待大家关注！

新闻留言

姓名 (*) :

不能为空

内容 (*) :

不能为空

标签:南昌网站建设南昌软件开发南昌微信营销南昌公众号开发南昌小程序开发南昌微信开发南昌APP开发

上一篇：uni-app: 引导页功能如何实现？
下一篇：前端开发-餐饮小票自主打印应用开发

专业知识

专业知识

响应式页面开发基础

基本概念、知识、技术

新闻留言

相关新闻

标签

新闻

联系我们

微信扫一扫，了解更多！

千巅科技小程序开发平台