移动WEB基础知识


Web前端项目实战
移动Web篇

                  目录

目录                                                                                                                  2
µÚ1    基础知识                                                                                               3
1.1    屏幕                                                                                                   3
1.2    长度单位                                                                                           4
1.3    像素密度                                                                                           5
1.4    设备独立像素                                                                                   6
1.5    像素                                                                                                   8
µÚ2    调试工具                                                                                               9
2.1    模拟调试                                                                                           9
2.2    真机调试                                                                                         10
µÚ3    视口                                                                                                     10
3.1    PC设备                                                                                            10
3.2    移动设备                                                                                         11
3.3    移动浏览器                                                                                     13
µÚ4    屏幕适配                                                                                             13
4.1    Viewport详解                                                                                  13
4.2    控制缩放                                                                                         14
4.3    避免滚动                                                                                         14
4.4    适配方案                                                                                         15
1.1.1.    固定宽度                                                                               15
1.1.2.    百分比宽度                                                                           15
1.1.3.    rem单位                                                                                 16
1.1.4.    100%像素                                                                             16
µÚ5    媒体查询                                                                                             16
5.1    媒体类型                                                                                         17
5.2    媒体特性                                                                                         17
5.3    关键字                                                                                             17
5.4    引入方式                                                                                         18
5.5    常用特性                                                                                         18
µÚ6    网页布局                                                                                             18
6.1    布局方式                                                                                         18
6.2    响应式布局                                                                                     19
µÚ7    CSS框架                                                                                             20
7.1    Bootstrap                                                                                         20
7.2    Amaze UI                                                                                         21
  1. 基础知识

    1. 屏幕

移动设备与 PC 设备最大的差异在于屏幕,这主要体现在 屏幕尺寸 屏幕分辨率 两个方面。
通常我们所指的屏幕尺,实际上指的是屏幕 对角线的长度 (一般用英寸来度量)如下图所示
graphic
而分辨率则一般用 像素来度量 ,表示屏幕 水平 垂直 方向的 像素数 ,例如 1920*1080 指的是屏幕垂直方向和水平方向分别有 1920 1080 个像素点而构成,如下图所示
graphic
    1. 长度单位

Web 开发中可以使用 px (像素)、 em pt (点)、 in (英寸)、 cm (厘米)做为长度单位,我们最常用 px (像素)做为长度单位。
我们可以将上述的几种长度单位划分成 相对长度 单位和 绝对长度 单位。
graphic
如上图所示, iPhone3G/S iPhone4/S 的屏幕尺寸都为 3.5 英寸( in )但是屏幕分辨率却分别为 480*320px 960*480px ,由此我们可以得出英寸是一个绝对长度单位,而 像素是一个相对长度单位(像素并没有固定的长度)
    1. 像素密度

DPI Dots Per Inch 是印刷行业中用来表示打印机每英寸可以喷的墨汁点数,计算机显示设备从打印机中借鉴了 DPI 的概念,由于计算机显示设备中的最小单位不是墨汁点而是像素,所以用 PPI Pixels Per Inch 值来表示屏幕每英寸的像素数量,我们将 PPI DPI 都称为像素密度,但 PPI 应用更广泛, DPI Android 设备比较常见。
如下图所示,利用   勾股定理   我们可以计算得出 PPI
graphic
PPI 的越大 位尺寸里所能容 的像素数量就越多,所能展 画面的品 也就越精 ,反之就越粗糙。
Retina 网膜屏幕,苹果注册的命名方式,意指具有 PPI (大于 320 )的屏幕。
思考:在屏幕尺寸(英寸)固定时, PPI 和像素大小的关系?
结论:当 PPI 越大,像素的实际大小就会越小,当 PPI 越小,像素实际大小就越大。
    1. 设备独立像素

随着技术发展,设备不断更新,出现了不同 PPI 的屏幕共存的状态( iPhone3G/S 163 iPhone4/S 326 ),这时像素不再是统一的度量单位,会造成同样尺寸的图像在不同 PPI 设备上的显示大小不一样。
如下图,假设你设计了一个 163*163 的蓝色方块,在 PPI 163 的屏幕上,那这个方块看起来正好就是 1*1 寸大小,在 PPI 326 的屏幕上,这个方块看起来就只有 0.5*0.5 寸大小了。
graphic
做为用户是不会关心这些细节的,他们只是希望在不同 PPI 的设备上看到的图像内容差不多大小,所以这时我们需要一个新的单位 这个新的单位能够保证图像内容在不同的 PPI 设备看上去大小应该差不多,这就是独立像素 IOS 设备上叫 PT (Point) Android 设备上叫 DIP (Device independent Pixel) DP
举例说明就是 iPhone 3G PPI 163 1dp = 1px iPhone 4 PPI 326 1dp = 2px
graphic
我们也不难发现,如果想要 iPhone 3G/S iPhone 4/S 图像内容显示一致,可以把 iPhone 4/S 的尺寸放大一倍(它们是一个 2 (@2x) 的关系),即在 iPhone3G/S 的上尺寸为 44*44px ,在 iPhone4/S 上为 88*88px ,我们要想实现这样的结果可以设置 44*44dp , 这时在 iPhone3G/S 上代表 44*44px ,在 iPhone4/S 上代表 88*88px
通过上面例子我们不难发现 dp px 是有一个对应(比例)关系的,这个对应(比例)关系是 操作系统确定并处理 ,通过 window.devicePixelRatio 可以获得该比例值。
下图展示了 iPhone 不同型号间 dp px 的比例关系
graphic
从上 得知 dp (或 pt )和 px 并不 绝对 的倍数关系,而是 window.devicePixelRatio ~= 物理像素 / 独立像素,然而这其中的细节我 不必关心,因 操作系 会自 帮我 们处 理好(保 1dp 在不同的 设备 上看上去大小差不多)。
    1. 像素

物理像素 指的是屏幕渲染 像的最小 位,不可人 为进 行改 ,其 大小决定了屏幕渲染 像的品 ,我 以上所 讨论 的都指的是物理像素
// 获取屏幕的物理像素尺寸
window.screen.width;
window.screen.height;
// 部分移动设备下获取会有错误
见代码示例 1-1.html
CSS 像素 指的是通 CSS 行网 布局时用到的 位,其默 认值(PC端) 是和物理像素保持一致的( 1 位的 CSS 像素等于 1 位的物理像素),但是我 可通缩放来改 其大小。
浏览器窗口尺寸 CSS 像素来度量的,部分浏览器存在兼容问题( IE 低版本无此属性),但是可以忽略这些细节。
// 获取浏览器窗口尺寸
window.innerWidth;
window.innerHeight;
// 此值大小包含滚动条的大小
见代码示例 1-2.html
过调 浏览 器的 放比例可以直 的理解 CSS 像素与物理像素之前的 对应 关系,如下图所示:
graphic
我们需要理解的是物理像素和 CSS 像素的一个关系, 1 个物理像素并不总是等于一个 CSS 像素,通过调整浏览器缩放比例,可以有以上 3 种情况。
  1. 调试工具

    1. 模拟调试

现代主流浏览器均支持移动开发模拟调试,通常按 F12 可以调起,其使用也比较简单,可以帮我们方便快捷定位问题。
    1. 真机调试

模拟调试可以满足大部分的开发调试任务,但是由于移动设备种类繁多,环境也十分复杂,模拟调试容易出现差错,所以真机调试变的非常必要。
有两种方法可以实现真机调试:
1 、将做好的网页上传至服务器或者本地搭建服务器,然后移动设备通过网络来访问。
2 、借助第三方的调试工具,如 weinre debuggap ghostlab
真机调试必须保证移动设备同服务器间的网络是相通的。
  1. 视口

视口( viewport )是用来约束你网站中最顶级块元素 <html> 的,即 它决定了 <html> 的大小
    1. PC设备

PC 设备 viewport 的大小取决于浏览器窗口的大小, CSS 像素 度量单位。
// 获取 viewport 的大小
document.documentElement.clientWidth;
document.documentElement.clientHeight;
// 此值并不包含滚动条的大小, 这也是与 window.innerWidth/Height 的差异
见代码示例 3-1.html
通过以往 CSS 的知识,我们都能理解 <html> 的大小是会影响到我们的网页布局的,而 viewport 又决定了 <html> 的大小,所以 viewport 接的决定并影响了我 的布局。
下面我们通过一个代码实例来演示 PC 设备 viewport (浏览器窗口)是如何影响我们的网页布局的,见代码实例 3-2.html
当我 们调 浏览 器窗口 4 个浮 的盒子 示了,原因是父盒子 度不足以容 4 个子盒子,要解决这个问题可以有两种方法:
1、 可以 父盒子 置一个固定的 度,如 1280px ,见代码实例 3-3.html
这样 可以解决盒子不 行的 问题 ,也可以保 的网 内容可以正常的 示,但是 出现了滚动条(后面会引用到)
2 、我们可以调整浏览器的 缩放比例 ,这时也可以不换行完整显示网页内容,但是发现 网页内容变的非常小
总结:在 PC 端,我 过调 浏览 器窗口可以改 viewport 的大小, 了保 布局不 乱,需要 元素 设定较大固定宽度 (固定网页布局),或者 调整缩放比例
注: PC viewport 不是一个 HTML 结构,所以我们不能通过 CSS 来改变它,只是拥有了浏览器窗口的大小而已。
分析完 PC 端的情况,我们再来看一下移动端会是什么情况呢?
    1. 移动设备

我们知道移动设备屏幕普遍都是比较小的,但是大部分的网站又都是为 PC 设备来设计的,要想让移动设备也可以正常显示网页,移动设备不得不做一些处理,通过上面的例子我们可以知道只要 viewport 足够大,就能保 原本 PC 设备设计的网页也能在移动设备上正常 示,移动设备厂商也的确是这样来处理的。
在移动设备上 viewport 不再受限于浏览器的窗口,而是允许开发人员自由设置 viewport 的大小,通常浏览器会设置一个默认大小的 viewport ,同时为了能够正常显示那些专为 PC 设计的网页,一般这个值的大小会大于屏幕的尺寸。
如下图为常见默认 viewport 大小( 供参考)
  graphic
统计 数我 得知不同的移 厂商分别 置了一个 默认的 viewport 的值 大部分网页可以正常在移动设备下浏览。
下面我们通过一个小示例来验证上述结论,执行环境为 iPhone5s
在示例中我们设定 .box{width: 490px;} 了,发现两个盒子正好一行显示,见示例代码 3-5.html
设定了 .box{width: 491px;} ,则换行显示了,见示例代码 3-6.html
验证了 iPhone5s viewport 的默认宽为 980px 这样 便可以保 原本 PC 设计 的网 ,在移 端上也不会 生布局的
我们再做另一个测试,见代码 3-7.html
iPhone5s 和部分 Android 中我们发现页面内容(文字、图片) 被缩放了 (变的非常小),而在部分安卓设备中则 出现了滚动条
产生缩放和滚动条的原因是什么呢?
要解释上面的原因,需要进一步对移动设备的 viewport 进行分析,移动设备上有 3 viewport ,分别是 visual viewport layout viewport ideal viewport
1 visual viewport (可视化视口) 通俗 visual viewport 就是我 们视觉 上可 的网 区域,以 CSS 像素做 为计 位,可以通 下面方式 取。
// 获取 visual viewport
window.innerWidth;
window.innerHeight;
visual viewport 对于我们的 实际价值并不高 ,由于他的计量单位是 CSS 像素,所以值会因缩放比例变化页发生变化。
见示例代码 3-8.html
2 layout viewport (布局视口) 指的是我们可以进行网页布局区域的大小,同样是以 CSS 像素 做为计量单位,可以通过下面方式获取
// 获取 layout viewport
document.documentElement.clientWidth;
document.documentElement.clientHeight;
ͨ ǰ���� �� ֪�#�����Ҫ�� 证为 PC 设计 ���� ���� 动设备 �ϲ��ֲ� �� �ң��� 动设备 ��Ĭ�� ��һ�� ���� viewport ���� IOS 980px ���� �� viewport 实际 ָ���� layout viewport ,我们也可改变这个默认值,后面将会介绍。
见示例代码 3-9.html
3 ideal viewport (理想视口)设备 屏幕区域 ,以 dp (或 pt )做为计量单位,不同的设备具有不同大小的理想视口,其大小是不可能被改变的,通过下面方式可以获取。
// 获取 ideal viewport 有两种情形
// 新设备
window.screen.width;
window.screen.height;
// 老设备
window.screen.width / window.devicePixelRatio;
window.screen.height / window.devicePixelRatio;
并不总是正确的,然而在实际开发我们一般无需获取这个值具体大小。
在理解了上述三个 viewport 后我们来解释为什么网页会被缩放或出现水平滚动条,其原因在于移动设备浏览器会默认设置一个 layout viewport ,并且这个值会大于 ideal viewport ,那么我们也知道 ideal viewport 就是屏幕区域, layout viewport 是我们布局网页的区域,那么最终 layout viewport 最终是要显示在 ideal viewport 里的,而 layout viewport 大于 ideal viewport 时,于是就出现滚动条了,那么为什么有的移动设备网页内容被缩放了呢?移动设备厂商认为将网页完整显示给用户才最合理,而不该出现滚动条,所以就将 layout viewport 进行了缩放,使其恰好完整显示在 ideal viewport (屏幕)里,其缩放比例为 ideal viewport / layout viewport
    1. 移动浏览器

端开 主要是 针对 IOS Android 两个操作系 平台的,除此之外 Windows Phone
端主要可以分成三大类,系 带浏览 器、 用内置 浏览 器、第三方浏览器
系统浏览器: 指跟随移动设备操作系统一起安装的浏览器。
应用内置浏览器: 通常在移动设备上都会安装一些 APP 例如 QQ 、微信、微博、淘宝等,这些 APP 里往往会内置一个浏览器,我们称这个浏览器为应用内置浏览器(也叫 WebView ),这个内置的浏览器一般功能比较简单,并且客户端开发人员可以更改这个浏览器的某些设置,在我们理实的开发里这个浏览器很重要。
第三方浏览器: 指安装在手机的浏览器如 FireFox Chrome 360 等等。
IOS Android 操作系统上自带浏览器、应用内置浏览器都是基础 Webkit 内核的。
思考:移动端页面要达到什么效果才最合理?
  1. 屏幕适配

经过分析我们得到, 移动页面最理想的状态是,避免滚动条且不被默认缩放处理 ,我们可以通过设置 <meta name="viewport" content=""> 来进行控制,并改变浏览器默认的 layout viewport 的宽度。
    1. Viewport详解

viewport  是由苹果公司 了解决移 动设备浏览 器渲染 面而提出的解决方案,后来被其它移 动设备 厂商采 ,其使用参数如下:
// 通过设置属性 content="" 实现,中间以 逗号 分隔
// 例如 <meta name="viewport" content="width=device-width">
width 设置 layout viewport 宽度,其取值可为数值或者 device-width
见代码示例 4-1.html
height 设置 layout viewport 高度,其取值可为数值或者 device-height
见代码示例 4-2.html
initital-scale 设置页面的初始缩放值,为一个数字,可以带小数。
见代码示例 4-3.html
maximum-scale 允许用户的最大缩放值,为一个数字,可以带小数。
见代码示例 4-4.html
minimum-scale 允许用户的最小缩放值,为一个数字,可以带小数。
见代码示例 4-5.html
user-scalable 是否允许用户进行缩放,值为 "no" "yes"
见代码示例 4-6.html
注: device-width device-height 实为 ideal viewport 的宽高。
经过测试( iPhone5s )见代码 4-7.html ,我们发现一些细节:
initial-scale 取值范围 0.25 ~ 5
maximum-scale / minimum-scale 取值范围 0 ~ 10
当同时设置了 minimum-scale initial-scale 时, initial-scale 将失效
    1. 控制缩放

1 、设置 <meta name="viewport" content="initial-scale=1"> �� 这时我们发现网页没有被浏览器设置缩放。见代码示例 4-3.html
2 、设置 <meta name="viewport" content="width=device-width"> �� 这时我们发现网页也没有被浏览器设设置缩放。见代码示例 4-1.html
当我们设置 width=device-width �� 也达到了 initial-scale=1 的效果,得知其实  initial-scale = ideal viewport / layout viewport
     虽然我们能过设置 <meta name="viewport" content=""> ,可以控制网页的默认缩放,但是会出现滚动条。
两种方式都可以控制缩放,开发中一般同时设置 width=device-width initial-scale=1.0 (为了解决一些兼容问题)参见 移动前端开发之viewport深入理解 ,即 <meta name="viewport" content="width=device-width, initial-scale=1.0">
    1. 避免滚动

我们知道,滚动条是   layout viewport   相对于   ideal viewport   的,所以只要设置   layout viewport  小于或等于   ideal viewport ,即 <meta name="viewport" content="width=device-width">
经测试 发现我们 并没有完全的解决滚 条的 问题 ,原因在于我 示例里的 .box {width: 490px;} 置了一个 绝对 造成的,要解决这个问题我们可以设置一个百分比( 100% )的宽度,见代码示例 4-7.html
    1. 适配方案

掌握了以上的技术细节后我们可以总结出以下几种适配方案:
      1. 固定宽度

1 、设置 <meta name="viewport" content="width=device-width, initial-scale=1">
2 、设置内容区域大小为 320px
3 、设置内容区域水平居中显示
见代码示例 4-11.html
关于手机尺寸( ideal viewport
graphic
通过汇总对比我们知道移动设备的屏幕尺寸虽然庞杂,但有几个主要尺寸,分别为 320px 360px 480px ,这三个尺寸占了绝大部分,并且以 320px 最多,所以我们移动网页如果设计成 320px 宽,则可以保证在绝大多数设备里正常显示,此方案已经很少采用了。
      1. 百分比宽度

1 、设置 <meta name="viewport" content="width=device-width, initial-scale=1">
2 、设置页面宽度为百分比
见代码示例 京东商城
关于百分比
我们需要重新认识 CSS 里百分比的使用,见代码示例 4-12.html
// 测试下列属性设置为百分比
width        参照父元素的宽度
height             参照父元素的高度
padding    参照父元素的宽度
border       不支持百分比设置
margin      参照父元素的宽度
我们发现这种方案最容易理解,但是在设置无素大小时有非常大的局限性。
      1. rem单位

1 、设置 <meta name="viewport" content="width=device-width, initial-scale=1">
2. 设置页面元素宽度单位为 rem em
注:此方案比较灵活,我们的案例将采用这种方案
关于 em rem
em 相对长度单位,其参照当前元素字号大小,如果当前元素未设置字号则会继承其祖先元素字号大小 例如 .box {font-size: 16px;} 1em = 16px .box {font-size: 32px;} 1em = 32px 0.5em = 16px
rem 相对长度单位,其参照根元素 (html) 字号大小 例如 html {font-size: 16px;} 1rem = 16px html {font-size: 32px;} 1rem = 32px 0.5rem = 16px;  注:所有浏览器默认字号都是 16px (某些安卓手机可以调置系统字号后,浏览器默认字号会受影响)
      1. 100%像素

1 、设置网页宽度等于设备物理像素
2 、设置初始化缩放比例(值为 1 / window.devicePixelRatio
淘宝针对 iPhone 设备采用的这种方案
  1. 媒体查询

设备终端的多样化,直接导致了网页的运行环境变的越来越复杂,为了能够保证我们的网页可以适应多个终端,不得不专门为某些特定的设备设计不同的展示风格,要实现这个目标的前提是必须有能力了解当前网页是运行什么终端设备,通过媒体查询可以做到这一点。
    1. 媒体类型

可以通过媒体类型对不同的设备指定不同的样式,一般我们使用 screen
graphic
    1. 媒体特性

graphic
    1. 关键字

1 and 可以将多个 媒体特性 连接到一起,相当于“且”的意思。
2 not 排除某个 媒体类型 ,相当于“非”的意思,可以省略。
3 only 指定某个特定的 媒体类型 ,可以省略。
    1. 引入方式

1 link 方法,见代码示例 5-1.html
<link href="./5-1.css" media="only screen and (max-width: 320px)">
2 @media 方法(写在 CSS 里),见代码示例 5-2.html
graphic
    1. 常用特性

1 width / height 完全等于 layout viewport ,见代码示例 5-3.html
2 max-width / max-height 小于等于 layout viewport ,见代码示例 5-4.html
3 min-width / min-height 大于等于 layout viewport ,见代码示例 5-5.html
4 device-width / device-height 完全等于 ideal viewport ,见代码示例 5-6.html
5 orientation: portrait | landscape 肖像 / 全景模式,见代码示例 5-7.html
  1. 网页布局

    1. 布局方式

1 、固定宽度布局: 页设 置一个固定的 度,通常以 px 为长 位,常 PC 端网
2 、流式布局:为网页设置一个相对的宽度,通常以百分比做 为长 位。
3 、栅格化布局:将网页宽度人为的划分成均等的长度,然后排版布局时则以这些均等的长度做为度量单位,通常利用百分比做为长度单位来划分成均等的长度。
4 、响应式布局:通过检测设备信息,决定网页布局方式,即用户如果采用不同的设备访问同一个网页,有可能会看到不一样的内容,一般情况下是检测设备屏幕的宽度来实现。
注:以上几种布局方式并不是独立存在的, 际开 发过 程中往往是相互 合使和的。
    1. 响应式布局

Responsive design ,意在实现不同屏幕分辨率的终端上浏览网页的不同展示方式。通过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验。
graphic
如上图所示, 屏幕尺寸不一样 展示给用户的 网页内容也不一样 ,我们利用 媒体查询 可以检测到屏幕的尺寸(主要检测宽度),并设置不同的 CSS 样式,就可以实现响应式的布局。
我们利用响应式布局可以满足不同尺寸的终端设备非常完美的展现网页内容,使得用户体验得到了很大的提升,但是为了实现这一目的我们不得不利用媒体查询写很多冗余的代码,使整体网页的体积变大,应用在移动设备上就会带来严重的性能问题。
响应式布局常用于企业的官网、博客、新闻资讯类型网站,这些网站以浏览内容为主,没有复杂的交互。
一般我们会对常见的设备尺寸进行划分后,再分别确定为不同的尺寸的设备设计专门的布局方式,如下图所示
graphic
以上是我们对常见的尺寸进行分类后的结果,下图是与之对应的媒体查询条件。
graphic
微金所 为例我们来实现一个响应式布局。
  1. CSS框架

随着 Web 应用变的越来越复杂,在大量的开发过程中我们发现有许多功能模块非常相似,比如轮播图、分页、选项卡、导航栏等,开发中往往会把这些具有 通用性 的功能模块进行一系列封装,使之成为一个个 组件 应用到项目中,可以极大的节约开发成本,将这些通用的组件缩合到一起就形成了 前端框架
    1. Bootstrap

简洁、直观、强悍的前端开发框架,让 web 开发更迅速、简单。
来自 Twitter ,粉丝众多,是目前最受欢迎的前端框架。
    1. Amaze UI

Amaze ~ 妹子 UI ,国人开发,后起之秀!
��   2 ҳ

传智播客 前端与移动开发学院     http://web.itcast.cn
  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

ITzhongzi

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值