# 移动端适配

手机端 web 的开发分为两种:

1、 响应式 （根据客户端的类型 pc pad phone phonemin）网页自动做适配以适应客户端的浏览

2、 针对移动端专门实现相应的页面，比如 m.jd.com m.taobao.com m.toutiao.com bufan.com/m/index.html

两者区别： 专门针对移动端开发的页面 UI 效果更好，自由度更高

实现的两种方式： 1、宽度按百分比设置，但是字体固定大小

2、整体全部按照百分比适配，包括布局和字体。需要动态的计算字体大小,借助辅助工具，gulp 的工作流工具，执行了一个自动换算 px ===> rem 的函数

# 视口 viewport

1、 什么是 Viewport 手机浏览器是把页面放在一个虚拟的“窗口”（viewport）中，通常这个虚拟的“窗口”（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同部分。移动版的 Safari 浏览器最先引进了 viewport 这个 meta tag，让网页开发者来控制 viewport 的大小和缩放，其他手机浏览器也基本支持。

2、 一个常用的针对移动网页优化过的页面的 viewport meta 标签大致如下：

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

meta 是给浏览器识别的
width：控制 viewport 的大小，可以指定的一个值，如600，或者其它特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。
height：和 width 相对应，指定高度。
initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例。
maximum-scale：允许用户缩放到的最大比例。
minimum-scale：允许用户缩放到的最小比例。
user-scalable：用户是否可以手动缩放

H5 页面要适配的终端设备数据

苹果的适配图

# 布局单位

rem 是基于 html 节点的 font-size 大小的比例

em 基于当前元素字体大小

# 适配原理

通常情况下,ui 设计师在设计移动端的时候 一般会按照 750px 的宽度去做适配. 在实现的时候 假设屏幕宽度是 750px 通常在移动端实现的时候,font-size 基本会按照设计稿的 1/10 宽度

在不同的设备下,再通过 js 动态的修改 html-font-size 即可适配 如果按照设计稿 100%呈现,而且代码中使用 rem 处理,那么适配的问题的关键即：需要动态根据移动端手机的屏幕宽度来修改 html 的 font-size 大小

//当窗口大小重新发生变化的时候触发
window.onresize = function() {
	resizeFont();
};
resizeFont();
//重置当前rem的基本参照字体大小
function resizeFont() {
	//当前设备宽度
	var _w = window.screen.width;
	document.documentElement.style.fontSize = _w / 10 + "px";
}

vscode 编辑器可以添加 cssrem 插件，然后在设置中搜索 cssrem.rootFontSize，更改基础字体大小，即可在页面使用，如果不能使用，重启编辑器即可

sublime 编辑器需要 lib 文件夹下的 cssrem-master 压缩包解压，或者从官网下载，然后执行：

• 进入 packages 目录：Sublime Text -> Preferences -> Browse Packages...
• 复制下载的 cssrem 目录到刚才的 packges 目录里
• 重启 Sublime Text

• 配置参数

  参数配置文件：Sublime Text -> Preferences -> Package Settings -> cssrem

  • px_to_rem - px 转 rem 的单位比例，默认为 40。
  • max_rem_fraction_length - px 转 rem 的小数部分的最大长度。默认为 6。
  • available_file_types - 启用此插件的文件类型。默认为：[".css", ".less", ".sass"]

# 移动端的精灵图

正常来讲 设计稿按照 750(2x 图)设计的,px=>rem 的基数设计也是设置为 75 的 但是在某些情况下,假如设计稿按照 375(1x 图)设计了,需要动态修改 px=>rem 的基数为 37.5

设置图片宽度 因为里面的元素都是 rem 单位,是倍数单位,所以希望背景图片也是倍数单位 针对图片的处理 由于设计稿的缘故,所以需要具体查看切出来的图片的实际大小是 2X 还是 1X

什么是 Retina 显示屏，带来了什么问题 retina：一种具备超高像素密度的液晶屏，同样大小的屏幕上显示的像素点由 1 个变为多个，如在同样带下的屏幕上，苹果设备的 retina 显示屏中，像素点 1 个变为 4 个

在高清显示屏中的位图被放大，图片会变得模糊，因此移动端的视觉稿通常会设计为传统 PC 的 2 倍

那么，前端的应对方案是：

设计稿切出来的图片长宽保证为偶数，并使用 backgroud-size 把图片缩小为原来的 1/2

//例如图片宽高为：200px*200px，那么写法如下 .css{width:100px;height:100px;background-size:100px 100px;}