html培训(html制作学校网页)

html 5培训课件：响应性网页设计响应性网页设计

1.常见布局方案

固定布局：以像素为页面基本单位，不考虑设备屏幕和浏览器的宽度，只设计一组维度；

可切换固定布局：以像素为页面单位，参照主流设备尺寸设计多套不同宽度的布局。通过识别的屏幕尺寸或浏览器宽度选择最合适的宽度布局；

灵活布局：以百分比作为页面的基本单位，在一定范围内可以适应各种尺寸的设备屏幕和浏览器的宽度，能够完美利用有效空间展现最佳效果；

混合布局：类似于灵活布局，可以在一定范围内适应各种尺寸的设备屏幕和浏览器宽度，能够完美利用有效空间展现最佳效果；只是混合像素和百分比作为页面单位。

布局响应：以响应的方式设计和实现页面，需要设计不同宽度的相同内容的布局。有两种方式：pc优先(从pc端向下设计)；

移动优先(从移动端向上设计)；

无论是基于什么样的设计，要兼容所有的器件，在响应版图的时候必然会对模块版图做一些改动(版图变化的临界点叫做断点)。

2.响应布局方案

(1)模块内容：挤拉(布局不变)

(2)模块中的内容：环绕-平铺(布局不变)

(3)模块内容：删除-添加(布局不变)

(4)模块位置转换(布局改变)

(5)模块显示模式改变：隐藏-展开(布局改变)

(6)模块数量变化：删除-增加(布局变化)

3.响应性布局功能

设计特点：

对不同分辨率的设备具有很强的灵活性

可以快速解决多设备显示适配的问题

缺点：

兼容各种设备，工作量大，效率低

代码繁琐，隐藏的无用元素会出现，加载时间会延长

其实这是一种折中的设计方案，受很多因素影响，无法达到最佳效果

一定程度上改变了网站原有的布局结构，用户会感到困惑

4.元标签设置

准备：设置元标签

该代码几个参数的说明：

宽度=设备宽度：宽度等于当前设备的宽度

初始比例：初始比例(默认设置为1.0)

最小比例：允许用户缩放的最小比例(默认设置为1.0)

最大比例：允许用户缩放的最大比例(默认设置为1.0)

用户可缩放：用户是否可以手动缩放(默认设置为否，因为我们不希望用户放大和缩小页面)

H5页面窗口会自动调整到设备的宽度，禁止用户缩放页面

忽略将页面上的数字识别为电话号码

安卓平台忽略邮件地址的识别

当网站被添加到主屏幕快速启动模式时，地址栏可以隐藏，仅适用于ios的safari

！-iOS 7.0版本后，对safari没有影响-

将网站添加到主屏幕快速启动模式，仅适用于IOs safari顶部状态栏的样式