流式布局

1. 视口

---

1.1 布局视口 layout viewport

移动端的浏览器都默认设置有一个布局视口，用于解决早期的PC端页面在手机上显示的问题。

移动端基本都将这个视口分辨率设置为 980px，可以将PC上的网页大多都能在手机上呈现，只不过元素看上去很小，一般默认可以通过手动缩放网页。

---

1.2 视觉视口 visual viewport

布局视口在手机上保持原始网页大小，当前屏幕大小显示不全只能看到部分，可以通过滑动缩放浏览网页其他部分。

---

1.3理想视口 ideal viewport

为了使网站在移动端有最理想的浏览和阅读宽度而设定理想视口

需要手动添写meta视口标签通知浏览器操作

---

1.4meta标签

作用：使视口宽度和设备保持一致

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=0, viewport-fit=cover">

属性	说明
width	设置视口的宽度，常用设置device-width使视口宽度和设备保持一致
initial-scale	初始缩放比（倍数）
minimum-scale	最小缩放比（倍数）
maximum-scale	最大缩放比（倍数）
user-scalable	是否允许用户缩放，yes 或 no（1 或 0）
viewport-fit	cover 设置刘海屏横屏时两端留白

---

2. 二倍图

---

2.1 物理像素比

手机端开发时的 1px 不一定等于1个物理像素（通常是1：2 的关系），那么对于一张 50px * 50px 的图片，在 pc 端可以显示正常，而在手机端将会被放大两倍，导致模糊

解决方法：使用二倍图

1. 使用二倍尺寸大小的图
2. 再将图的宽高缩小一半

手机端即可显示高清正常

---

2.2 背景大小 background-size

语法：background-size: 背景图片宽度 背景图片高度;

单位：

• px（指定宽、高）
• 百分比（占父级大小的百分比）
• contain（等比例缩放到父级可以显示的最大尺寸，不得溢出）
• cover（等比例缩放到完全铺满父级的大小，溢出则隐藏）

注意：

• 写单个值表示宽，高则默认 Auto
• 必须写在 background-image 后才生效

---

2.3 二倍精灵图

1. 先用 FW 将精灵图等比例缩小一半
2. 再测量位置
3. background-size 写缩小后精灵图的尺寸

---

3. 移动开发选择和技术解决方案

---

3.1移动端主流方案

1.单独制作移动端页面（主流）

制作PC端和移动端为两套网站，PC端是PC端的样式，移动端再写一套专门针对移动端适配的一套网站，通过判断设备，如果是移动设备打开，则跳到移动端页面

注意：通常情况下，网址域名前面加 m (mobile)

2.响应式页面兼容移动端（其次）

响应式网站：即pc和移动端共用一套网站，只不过在不同屏幕下，样式会自动适配

---

3.2 移动端技术解决方案

(1) 移动端浏览器兼容问题

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

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

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

---

(2) 移动端公共样式

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

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

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

Normalize.css：是模块化的

Normalize.css：拥有详细的文档

官网地址： http://necolas.github.io/normalize.css/

---

3.3 CSS3盒子模型 box-sizing

• 传统模式宽度计算：width + border + padding（会向外撑大盒子宽度）

  语法：box-sizing: content-box;（默认）

• CSS3盒子模型：宽度不会再向外撑大盒子，border + padding 向内占据

  语法：box-sizing: border-box;

兼容性：

• 移动端：可以全部CSS3 盒子模型

• PC 端：

  • 如需要全部兼容，用传统模式
  • 如不考虑兼容性，用 CSS3 盒子模型

---

3.4 移动端特殊样式

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

---

4. 移动端常见布局

• 单独制作

  • 流式布局（百分比布局）
  • flex 弹性布局（强烈推荐）
  • less+rem+媒体查询布局
  • 混合布局

• 响应式

  • 媒体查询
  • bootstarp

4.1 流式布局

流式布局，就是百分比布局，也称非固定像素布局

通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充

流式布局方式是移动web开发使用的比较常见的布局方式

最大宽度：max-width（高同理）

最小宽度：min-width

---