响应式网页设计案例实现与分析

一 、 引 言
在 当今 移 动互 联 网时代 ，人们 更 多 的使用 智 能 移 动设 备浏 览 网站 。对 于传 统 的针对显 示 器屏 幕开 发的网站 ，对各种屏幕尺寸不一的智能移动设备在 兼 容 性方 面表 现 出严重 不足 。其 中一 种解 决方 案是 另外 专 门开发 移 动版 网站 ，但 会使 得 成 本 提 高 。另 外 一 种解决 方 案是对 原 有 网站按 照 响应 式 网页设 计 方式重构 ，让网站能够兼容各式各样 的浏览器分辨 率 以及不同移动设备 ，而不是为每个终端做一个特 定 的版本 ，成本不高。响应式网页设计凭借其优势
成更大威胁。因此 ，一定要确保运行在操作系统上 必 须通 过本 地登 录方 式管理 ｗｅｂ服 务器 。
的数据库软件所属账号配置成拥有最小权限。另外 ，
五 、结论
除非有特殊用途 ，应关闭数据库中的额外功能 ，例如
ＳＱＬ注入攻击的危害 日益被人们关注 ，但是仍
系统管理对象 、执行操作 系统命令和产生网络连接 然有很多的Ｗｅｂ应用程序存在这种漏洞 ，而且ＳＱＬ
账户 ，如果数据库配置 的底层操作系统账户属于系 限均设置为“无 ”，即使 网站被上传 了木马也运行不
统管理员组 ，则攻击者一旦获取数据库 的控制权就 了 。另 外 ，不启 用 网站 的父 目录 ，禁 用不 必要 的服 务
可以利用操作系统的文件操作、网络连接等 ，从而造 器 扩展 ，Ｗｅｂ服务 器关 闭不 必 要 的服务 ，Ｗｅｂ管理 员
关技 术 等 。以 实际案例讲 解 响应 式 网页 的设计 与制 作流程 。分 析 与总 结响应 式 网 页设 计 的步骤 与技 术要 点 ，
为 响应 式 网站 开发提供 技 术参 考 。
关键 词 ：响应 式 网页设计 ；网页案例 ；网页制 作 ；网页分 析
中图分类 号 ：ＴＰ３９９
文 献标识 码 ：Ａ
【文章编 号］１６７１—８０２Ｘ（２０１６）０２—００１４—０４
பைடு நூலகம்
响应式网页设计案例实现与分析
吴 多智 ， 陈益 全
（琼 台师 范高等 专科 学校， 海 南 海 口 ５７１１２７）
摘 要 ：指 出传 统 网站 对各 类 智 能移动 设备 的兼容 性 不足 。介 绍 响应 式 网 页设计 的概 念 、设 计 思 想、相
Ｒｅａｌｉｚａｔｉｏｎ ａｎｄ Ａｎａｌｙｓｉｓ ｏｆ Ｒｅｓｐｏｎｓｉｖｅ Ｗ ｅｂｐａｇｅ Ｄｅｓｉｇｎ
Ｗ Ｕ Ｄｕｏ－ｚｈｉ．ＣＨＥＮ Ｙｉ－ｑｕａｎ （Ｑｉｏｎｇｔａｉ Ｔｅａｃｈｅｒｓ Ｃｏｌｌｅｇｅ，Ｈａｉｋｏｕ ５７１ １２７，Ｈａｉｎａｎ）
Ａｂｓｔｒａｃｔ：Ｔｈｅ ｔｒａｄｉｔｉｏｎａｌ ｗｅｂｓｉｔｅｓ ｌａｃｋ ｓｕｆ ｉ ｃｉｅｎｔ ｃｏｍｐａｔｉｂｉｌｉｔｙ ｗｉｔｈ ｉｎｔｅｌｌｉｇｅｎｔ ｍｏｂｉｌｅ ｄｅｖｉｃｅｓ．Ｔｈｅ ｃｏｎｃｅｐｔｓ， ｄｅｓｉｇｎ ｉｄｅａｓ ａｎｄ ｒｅｌｅｖａｎｔ ｔｅｃｈｎｉｑｕｅｓ ｏｆ ｒｅｓｐｏｎｓｉｖｅ ｗｅｂｐａｇｅ ｄｅｓｉｇｎ ａｒｅ ｐｒｅｓｅｎｔｅｄ．Ｔｈｅ ｐｒｏｃｅｓｓ ｏｆ ｒｅｓｐｏｎｓｉｖｅ ｗｅｂｐａｇｅ ｄｅｓｉｇｎ ｉｓ ｉｌｌｕｓｔｒａｔｅｄ ｗｉｔｈ ａｃｔｕａｌ ｃａｓｅｓ．Ｔｈｅ ｐｒｏｃｅｄｕｒｅｓ ａｎｄ ｋｅｙ ｔｅｃｈｎｉｑｕｅｓ ｏｆ ｒｅｓｐｏｎｓｉｖｅ ｗｅｂｐａｇｅ ｄｅｓｉｇｎ ａｒｅ ａｎａｌｙｚｅｄ ａｎｄ ｓｕｍｍａｒｉｚｅｄ，ｗｈｉｃｈ ｏｆｆｅｒｓ ｒｅｆｅｒｅｎｃｅ ｆｏｒ ｔｈｅ ｄｅｖｅｌｏｐｍｅｎｔ ｏｆ ｒｅｓｐｏｎｓｉｖｅ ｗｅｂｐａｇｅ． Ｋｅｙ ｗｏｒｄｓ：ｒｅｓｐｏｎｓｉｖｅ ｗｅｂｐａｇｅ ｄｅｓｉｇｎ；ｗｅｂｐａｇｅ ｃａｓｅ；ｗｅｂｐａｇｅ ｄｅｓｉｇｎ；ｗｅｂｐａｇｅ ａｎａｌｙｓｉｓ
在越来越多的网站 中被运用 。本文以一个案例来讲 解 与分析 响应 式 网页 的设计 实现 过程 ，望 能为 网 页 前端工程师进行响应式网站开发提供参考 。
二 、响应 式 网页设 计案例 实 现 （一 ）概念 介绍 响 应 式 网 页 设 计 （Ｒｅｓｐｏｎｓｉｖｅ Ｗｅｂ ｄｅｓｉｇｎ）指 页 面 的设 计 与 开发 应 当 根据 用 户 行 为 以及 设 备 环 境 （系统平台 、屏幕尺寸 、屏幕定 向等）进行相应的响应 和调 整 。无论 用户 正在 使用 笔记 本 电脑 、ｉＰａｄ还是 智 能手机 ，所要浏览的页面能够 自动切换分辨率、图片
圜困固囫
李虎军★林学华★张辽宁——ｓＱＬ注入攻击与防护探析
第２期
只给访问数据库 的Ｗｅｂ应用所需的最低权限 。 机。将数据库管理系统中系统 自带的数据库（例如 ，
例 如 ，如果Ｗｅｂ应 用 不需要 访 问某 些表 ，那 么应 确认 ｎｏｒｔｈｗｉｎｄ、ｐｕｂｓ等 ）删除。针对ＳＱＬ注人攻击 ，在系统
２０１６年第 ２期
安 徽 电 子 信 息 Ｓｑ＿￣ｌｋ技 术 学 院 学 报
Ｎｏ．２ ２０１６
第 １５卷（总第 ８３期）ＪＯＵＲＮＡＬＯＦＡＮＨＵＩＶＯＣＡＴＩＯＮＡＬＣＯＬＬＥＧＥＯＦＥＬＥＣＴＲＯＮＩＣＳ＆ＩＮＦＯＲＭＡＴＩＯＮ ＴＥＣＨＮＯＬＯＧＹ Ｇｅｎｅｒａｌ Ｎｏ．８３ Ｖｏ１．１５
★收稿 日期 ：２０１６—０２—２３ 作者简介 ：吴多智 （１９８２一），男 ，海南海 口人 ，软件工程硕士 ，讲师 ，研究方向 ：电子商务 ，计 算机 应用。Ｅ—ｍａｉｌ：ｃｈｅｎｙｉｑｕａｎ２ｌ３＠ｓｉｎａ．ｃｏｉｎ． 基金项 目：琼台师范高等专科学校校级基金项 目 （ｑｔｋｙ２０１５０１）
它没有访问这些表的权 限；如果Ｗｅｂ应用只需要读 中适 当设置假用户 ，诱骗攻击者 ，增加攻击难度 。
权限 ，则应确认 已禁止它对此表的插入 、更新 、删除
将 网站 的执行 权 限设 置 为 “纯脚 本 ”，对 于通 过
等权 限。数据库的启动需要配置相关底层操作系统 网站后台管理 中心上传的存放文本的目录，执行权