移动Web - 基础&流式布局

目标

• 了解移动端主要浏览器的内核
• 掌握用谷歌浏览器调试移动端页面（重要）
• 了解布局视口、视觉视口、理想视口
• 使用mate标签设置理想视口（重要）
• 了解视网膜屏、物理像素、二倍图
• 会使用background-size设置二倍精灵图（重要）
• 掌握圣杯布局的两种方法（border-box & margin）（重要）
• 了解移动端两类开发方案
• 知道什么是流式布局（重要）
• 能够独立完成京东移动端首页（重要）

1、移动端浏览器和屏幕现状

目标：了解移动端主要浏览器的内核、掌握用谷歌浏览器调试移动端页面

1.1 浏览器现状

- pc端：谷歌浏览器（Blink）、火狐浏览器（Gecko）、IE浏览器（Trident）、360浏览器、QQ浏览器、百度浏览器、搜狗浏览器

- 移动端：欧朋浏览器（Presto），UC浏览器，QQ浏览器，百度手机浏览器，360安全浏览器，谷歌浏览器，搜狗手机浏览器，猎豹浏览器，以及其他杂牌浏览器 ，内核大部分都是webkit

- 移动端浏览器内核：Webkit内核的适用范围则较为广泛，Android原生浏览器、苹果的Safari、谷歌的Chrome(Android4.0使用)都是基于Webkit开源内核开发的

总结：兼容移动端主流浏览器，处理Webkit内核浏览器即可

1.2 手机屏幕现状

移动端设备屏幕尺寸：非常多，碎片化严重。

Android设备有多种分辨率：480x800, 480x854, 540x960, 720x1280，1080x1920等，还有传说中的2K，4k屏。

iPhone主要分辨率有：640x960, 640x1136, 750x1334, 1242x2208等。

查看手机屏幕尺寸网址：添加链接描述

总结：

• 作为开发者无需关注这些分辨率，因为我们常用的尺寸单位是 px 。
• 因此我们开发的网页要做到适应各种手机屏幕尺寸

1.3 移动端页面调试方法（重要）

Chrome DevTools（谷歌浏览器）的模拟手机调试

• 进入手机模式

• 选择手机型号

  • 设置页面百分比

• 搭建本地web服务器，手机和服务器一个局域网内，通过手机访问服务器(后面课程掌握)

• 使用外网服务器，直接IP或域名访问(后面课程掌握)

2. 视口

目标：了解布局视口、视觉视口、理想视口

视口（viewport）:就是浏览器显示页面内容的屏幕区域, 视口可以分为布局视口、视觉视口和理想视口

2.1 布局视口 layout viewport

- 概念: 为了解决早期pc端页面在移动端的显示问题，一般移动端的浏览器设置的默认视口，称为布局视口

- 大白话：浏览器默认的窗口宽度

- 布局视口大小：iOS, Android基本都将这个视口设置为 980px，所以PC上的网页大多都能在手机上呈现，只不过元素看上去很小（把浏览器整体压缩在一个小屏幕里面），一般默认可以通过手动缩放网页

2.2 视觉视口 visual viewport

- 概念：字面意思，它是用户正在看到的网站的区域。注意：是网站的区域。
我们可以通过缩放去操作视觉视口，但不会影响布局视口，布局视口仍保持原来的宽度

2.3 理想视口 ideal viewport+

- 概念：布局视口的一个理想尺寸，只有当布局视口（浏览器）的尺寸等于设备屏幕的尺寸时，才是理想视口
- 设置理想视口方法：mate标签 （重要）

<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">

最标准的viewport设置

• 视口宽度和设备保持一致
• 视口的默认缩放比例1.0
• 不允许用户手动自行缩放
• 最大允许的缩放比例1.0
• 最小允许的缩放比例1.0

3. 二倍图

目标：了解屏幕分辨率、了解图片分辨率、了解视网膜屏、会使用background-size设置背景图的大小、会使用二倍精灵图设置元素背景

3.1 手机屏幕

• 通常我们所指的屏幕尺寸，实际上指的是屏幕对角线的长度（一般用英寸来度量）如下图所示
• 1英寸 = 2.54cm 绝对单位；（到哪都不会变的值）
  

3.2 物理像素（采光点）

- 概念：客观存在。指计算机显示设备中的最小单位，即一个像素点的大小。每一个像素点可以理解为就是屏幕上的一个发光点。每个点可以发一个颜色，就是我们看到的画面
- 发展：早期的屏幕，物理像素点（客观的小灯泡）都比较大，比如玩游戏的超级玛丽的画面的颗粒感很强：随着技术的进步，物理像素点会被做的越来越小；会被做小；

3.3 屏幕分辨率 & 视网膜屏 & css像素

屏幕分辨率：物理像素点的个数来衡量，表示屏幕水平和垂直方向的物理像素点的个数

• iPhone3和iPhone4是同一个屏幕尺寸下，比较分辨率：
  
  
• 分辨率高的优势：直观感受，画面细腻，物理像素越小（屏幕发光点越小）
• Retina（视网膜屏幕）是一种显示技术，可以将把更多的物理像素点压缩至一块屏幕里；从而达到更高的分辨率，并提高屏幕显示的细腻程度，即1px代表更多的物理像素
• CSS像素 px ：1px代表的长度是固定的，因此屏幕分辨率越高，1px代表的物理像素就越多
  

3.4 图片分辨率

• 概念：指图片横纵方向各有多少个物理像素（光点）

• 下图：分辨率640*426 ，提供了多少个色彩发光点（迎合物理像素点）；
  

• 一个萝卜一个坑：图片在手机上展示时，图片的光点会对应手机的光点（即物理像素点和物理像素点对接）

• 图片的光点比作萝卜，手机的采光点比作坑，光点是一一对应的，所以称：一个萝卜一个坑

• 假设：有200*200分辨率的图片，在不设置图片宽高的情况下，展示在宽度分别是320（iphone3）、640(iphone4)分辨率的手机上，展示的效果如下：
  

• 问题：相同的图片不设置宽高，在不同的设备下，展示的大小不一样

  • 宽度：第2个是第1个的0.5倍；
  • 面积：第2个是第1个的1/4倍；

• 原因：

  • 200*200分辨率的图片：200个颜色发光点（萝卜）；
  • 一个物理像素点发一个颜色：一个萝卜一个坑，屏幕都需要200个物理像素点；
  • 坑的宽度大小：320（1）；640（0.5）；
  • 所以显示为上图。

• 目标：显示大小一样；

• 解决方法

  • 直接设置图片宽高相同（不建议）：图片在分辨率高的设备上会模糊
  • UI提供二倍图

3.5 二倍图-分辨率是尺寸2倍

• 概念：设置的图片的分辨率和图片的宽高是2倍的关系称为二倍图
• 大白话：设置CSS像素200px宽，320分辨率（200坑）,640分辨率（400坑）
  像针对640分辨率手机屏（iPhone4），要求设计给400*400图，对应我们CSS设置200px,有二倍的关系
• 命名：
  • xxxxx@2x.png：二倍图
  • xxxxx@3x.png：三倍图

3.6 用二倍精灵图做背景

使用核心：UI给出精灵图的分辨率应该是psdUI稿上图片尺寸的二倍，所以应该将精灵图缩小到原来一半，再定位

• background-size

div {width: 500px;height: 500px;border: 2px solid red;background: url(images/dog.jpg) no-repeat;/* background-size: 图片的宽度 图片的高度; *//* background-size: 500px 200px; *//* 1.只写一个参数 肯定是宽度 高度省略了  背景会等比例缩放 *//* background-size: 500px; *//* 2. 里面的单位可以跟%  相对于父盒子来说的 *//* background-size: 50%; *//* 3. cover 等比例拉伸 要完全覆盖div盒子（以图片宽高的最小值覆盖全为准）  可能有部分背景图片显示不全关键词：等比缩放，绝对没有留白；*//* background-size: cover; *//* 4. contain 高度和宽度等比例拉伸 （以图片宽高的最大值覆盖全为准） 可能有部分空白区域 关键词：等比缩放，显示全面，可能留白 */background-size: contain;
}

• 步骤
  1. 利用background-image引入二倍精灵图
  2. 将二倍精灵图在fw软件中缩小至一倍，查看此时图片的宽度，利用background-size设置背景大小
  3. 利用fw软件测量此时需要的图标的定位，利用background-position设置背景定位
• 注意：
  • 非精灵图的二倍图，UI给我们，我们该怎么用就怎么用，和普通图片没有区别
  • 在用fw打开二倍精灵图时，千万不要保存图片，会导致图片变成一倍分辨率

4. 移动端布局现状

目标：了解目前移动端页面开发的主流方法

• 响应式：三星电子官网。添加链接描述 ；特点：可兼容PC 移动端，一个页面多个端适配显示；制作起来要考虑到兼容性的样式
  • 媒体查询
  • bootstarp
• 单独制作(主流)：淘宝、京东、苏宁手机端都是单独制作的，流式、flex、rem布局、专门针对各种手机屏幕进行开发
  • 流式布局（百分比布局）：移动web开发使用的比较常见的布局方式，不改变文字和图片的大小（看情况而定）
  • flex 弹性布局（强烈推荐）
  • less+rem+媒体查询布局
  • 混合布局

5. 移动端技术方案

目标：会使用-webkit-前缀解决webkit的兼容性问题 、移动端公共样式的引用、圣杯布局

5.1 移动端浏览器兼容问题&特殊样式设置

移动端浏览器基本以 webkit 内核为主，因此我们就考虑webkit兼容性问题。

我们可以放心使用 H5 标签和 CSS3 样式。

同时我们浏览器的私有前缀我们只需要考虑添加 webkit 即可

 /*CSS3盒子模型*/box-sizing: border-box;-webkit-box-sizing: border-box;/*点击高亮我们需要清除清除  设置为transparent 完成透明*/-webkit-tap-highlight-color: transparent;/*在移动端浏览器默认的外观在iOS上加上这个属性才能给按钮和输入框自定义样式*/-webkit-appearance: none;/*禁用长按页面时的弹出菜单*/img,a { -webkit-touch-callout: none; }

5.2 移动端公共样式

移动端 CSS 初始化推荐使用 normalize.css/

Normalize.css：保护了有价值的默认值

Normalize.css：修复了浏览器的bug

Normalize.css：是模块化的

Normalize.css：拥有详细的文档

官网地址：添加链接描述

5.3 大量使用 box-sizing: border-box

/* 传统：盒子的总宽度 = CSS中设置的 width + border + padding */
box-sizing: content-box;/* CSS3盒子模型:盒子的宽度：就是设置的宽度，且宽度width 里面包含了 border 和 padding */
box-sizing: border-box;

解决问题：

• 流式布局百分比设置宽高时，给盒子添加边框或者内边距，导致盒子掉下来
• 圣杯布局

5.4 圣杯布局（左右两侧固定，中间自适应）两种方法

box-sizing: border-box

<head>
<style>.warp{position: relative;width: 100%;height: 200px;box-sizing: box-border;padding: 0 200px;}.right,.left{position: absolute;width: 200px;height: 100%;background-color: blue;}.right {right: 0;top: 0;}.left{left: 0;top: 0;}.mid{width: 100%;height: 100%;background-color: blueviolet;}</style>
</head>
<body><div class='warp'><div class='left'></div><div class='mid'>111111</div><div class='right'></div></div>
</body>

margin : 中间盒子不设置宽，设置margin：0 200px; 左右两边固定宽高，定位

<head>
<style>.warp{position: relative;width: 100%;height: 200px;}.right,.left{position: absolute;width: 200px;height: 100%;background-color: blue;}.right {right: 0;top: 0;}.left{left: 0;top: 0;}.mid{margin: 0 200px;height: 100%;background-color: blueviolet;}</style>
</head>
<body><div class='warp'><div class='left'></div><div class='mid'>111111</div><div class='right'></div></div>
</body>

6. 京东案例

目标: 掌握视口标签设置、二部图使用（图片、精灵图）、流式布局的特点；

6.1 准备工作

设置视口标签、初始化样式：

<meta name="viewport" content="width=device-width, user-scalable=no,initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/index.css">

body样式的初始化设置：

body {width: 100%;min-width: 320px;max-width: 640px;margin: 0 auto;font-size: 14px;color: #666;
}

6.2 整体布局

• 设置body
• 布局划分
  

6.3 dpg 、 webp

• dpg：京东自主研发推出DPG图片压缩技术，经测试该技术，可直接节省用户近50%的浏览流量，极大的提升了用户的网页打开速度。全部浏览器的兼容支持，压缩后的图片和webp的清晰度对比没有差距。
• webp：谷歌开发的一种旨在加快图片加载速度的图片格式。图片压缩体积大约只有JPEG的2/3，并能节省大量的服务器宽带资源和数据空间；

6.4 涉及旧知识

1. 先看这个盒子要不要设置高度；没有高度的时候，一般是靠内部子元素撑起来的。
2. 伪元素：左侧或右侧的线、简单的图标采用伪元素进行设置；
3. 结构伪类选择：n 作为参数，一定要放在前面
4. 清除浮动：

6.4 涉及旧知识

1. 先看这个盒子要不要设置高度；没有高度的时候，一般是靠内部子元素撑起来的。
2. 伪元素：左侧或右侧的线、简单的图标采用伪元素进行设置；
3. 结构伪类选择：n 作为参数，一定要放在前面
4. 清除浮动：

/* 必须指定宽度*/
div {width: 100%;overflow: hidden;
}