HTML移动端常见配置及处理方案

一、css中的单位

1、绝对长度单位

它们与其他任何东西都没有关系，通常被认为总是相同的大小。

绝对单位	名称	等价换算
cm	厘米	1cm = 96px/2.54
mm	毫米	1mm = 1/10th of 1cm
Q	四分之一毫米	1Q = 1/40th of 1cm
in	英寸	1in = 2.54cm = 96px
pc	十二点活字	1pc = 1/16th of 1in
pt	点	1pt = 1/72th of 1in
px	像素	1px = 1/96th of 1in

2、相对长度单位

相对长度单位相对于其他一些东西；

相对单位	相对于
em	在 font-size 中使用是相对于父元素的字体大小，在其他属性中使用是相对于自身的字体大小，如 width
ex	字符“x”的高度
ch	数字“0”的宽度
rem	相对于html根元素的字体大小
lh	元素的line-height
vw	视窗宽度的1%
vh	视窗高度的1%

3、pixel（picture element）

pix是英语单词picture的常用简写，加上英语单词“元素”element，就得到pixel

“像素”表示“画像元素”之意，有时亦被称为pel（picture element）；

3.1、设备像素(也成为是物理像素)

设备像素指的是显示器上的真实像素，每个像素的大小是屏幕固有的属性，屏幕出厂以后就不会改变了；

3.2、设备独立像素(也成为逻辑像素)

如果面向开发者我们使用设备像素显示一个100px的宽度，那么在不同屏幕上显示效果会是不同的； 开发者针对不同的屏幕很难进行较好的适配，编写程序必须了解用户的分辨率来进行开发；所以在设备像素之上，操作系统为开发者进行抽象，提供了逻辑像素的概念；比如你购买了一台显示器，在操作系统上是以1920x1080设置的显示分辨率，那么无论你购买的是2k、4k的显示器，对于开发者来说，都是1920x1080的大小。

个人理解：就是是操作系统自己定义的像素标准，有利于面向开发者

3.3、CSS像素

CSS中我们经常使用的单位也是pixel，它在默认情况下等同于设备独立像素（也就是逻辑像素）；毕竟逻辑像素才是面向我们开发者的；

我们可以通过JavaScript中的screen.width和screen.height获取到电脑的逻辑分辨率

screen.height/width

3.4、DPR、PPI

DPR：device pixel ratio 缩放倍数

2010年，iPhone4问世，不仅仅带来了移动互联网，还带来了Retina屏幕； Retina屏幕翻译为视网膜显示屏，可以为用户带来更好的显示；在Retina屏幕中，一个逻辑像素在长度上对应两个物理像素，这个比例称之为设备像素比（device pixel ratio）；

我们可以通过window.devicePixelRatio获取到当前屏幕上的DPR值；

返回设备物理像素分辨率与CSS像素分辨率的比值
可以知道窗口缩放比例，然后提示请使用正常缩放比例
可以知道 dpr 的大致可能性，进行最佳 dpr 处理

PPI每英寸像素（英语：Pixels Per Inch，缩写：PPI）

通常用来表示一个打印图像或者显示器上像素的密度；
前面我们提过1英寸=2.54厘米，在工业领域被广泛应用；

二、移动端特殊样式

 -webkit-box-sizing: border-box;
//在移动端超链接的active的状态下会有蓝色的背景，我们需要改成完全透明
 -webkit-tap-highlight-color: transparent;
//移动端浏览器默认不能自定义输入框和按钮的样式，需要加上这个属性才可以自定义
 -webkit-appearance: none;
//禁用长按页面时弹出的菜单
 img,a{-webkit-touch-callout: none}

三、移动端适配介绍

移动端开发目前主要包括三类：
- 原生App开发（iOS、Android、RN、uniapp、Flutter(有统一大前端的可能)等）
- 小程序开发（原生小程序、uniapp、Taro等）
- Web页面（移动端的Web页面，可以使用浏览器或者webview浏览）
因为目前移动端设备较多，所以我们需要对其进行一些适配。
这里有两个概念：
- 自适应：根据不同的设备屏幕大小来自动调整尺寸、大小；
- 响应式：会随着屏幕的实时变动而自动调整，是一种自适应；
注意：在做移动端的时候，要配置好视口因为某些浏览器会因为双击缩放会对点击事件有 300ms 的延迟，一定要禁止窗口缩放

或者使用 polyfill(补丁) 库，通常某些落后浏览器不支持一些功能的时候使用，例如 Promise，有些浏览器不支持，可以手动添加别人实现好的 polyfill 库，进行适配
- fastClick：快速的点击库
  
  可以直接到github上看使用方法
```
FastClick.attch(document.body)
```

1、认识视口

视口分为布局视口、视觉视口和理想视口，

视觉视口在pc端和移动端，显示可见区域就是视觉视口

在pc端浏览器视觉视口和布局视口是同一个，不用作为区分

在移动端，早期为了网页也可以在浏览器上面显示，iOS, Android 基本都默认的移动端布局视口为980px，会根据移动端的大小等比例缩小

而理想视口通过设置viewport可以按照我们所看到的视口大小进行布局

2、视口的概念

在一个浏览器中，我们可以看到的区域就是视口（viewport）；
我们说过fixed就是相对于视口来进行定位的；
在PC端的页面中，我们是不需要对视口进行区分，因为我们的布局视口和视觉视口是同一个；

3、移动端的视口

在移动端，你布局的视口和你可见的视口是不太一样的。

这是因为移动端的网页窗口往往比较小，我们可能会希望一个大的网页在移动端可以完整的显示；
所以在默认情况下，移动端的布局视口是大于视觉视口的, 默认是980px

4、移动端视口的划分

布局视口（layout viewport）
视觉视口（visual layout）
理想视口（ideal layout）
这些概念的区分，事实上来自ppk，他也是对前端贡献比较大的一个人（特别是在移动端浏览器） https://www.quirksmode.org/mobile/viewports2.html

5、布局视口

默认情况下，一个在PC端的网页在移动端现实
- 第一，它会按照宽度为980px来布局一个页面的盒子和内容；
- 第二，为了可以完整的显示在页面中，对整个页面进行等比例缩小；
我们相对于980px布局的这个视口，称之为布局视口（layout viewport）；
移动设备的浏览器都默认设置了一个布局视口, 用于解决早期的pc端页面在手机上显示的问题，iOS, Android 基本都将这个视口分辨率设置为 980px ，对整个页面进行等比例缩小, 所以元素看上去很小，一般默认可以通过手动缩放网页

6、视觉视口（visual viewport）

如果默认情况下，我们按照980px显示内容，那么右侧有一部分区域就会无法显示，所以手机端浏览器会默认对页面进行缩放以显示到用户的可见区域中；

那么显示在可见区域的这个视口，就是视觉视口（visual viewport）
在Chrome上按shift+鼠标左键可以进行缩放。

7、理想视口（ideal viewport）

默认情况下的layout viewport并不适合我们进行布局；
我们可以对layout viewport进行宽度和缩放的设置，以满足正常在一个移动端窗口的布局；
这个时候可以设置meta中的viewport，可以按照我们所看到的视口大小进行布局

值	可能的附加值	描述
width	一个正整数，或者字符串 device-width	定义 viewport 的宽度。
height	一个正整数，或者字符串 device-height	定义 viewport 的高度。未被任何浏览器使用。
initial-scale	一个 0.0 和 10.0 之间的正数	定义设备宽度与 viewport 大小之间的缩放比例。
maximum-scale	一个 0.0 和 10.0 之间的正数	定义缩放的最大值，必须大于等于 minimum-scale，否则表现将不可预测。
minimum-scale	一个 0.0 和 10.0 之间的正数	定义缩放的最小值，必须小于等于 maximum-scale，否则表现将不可预测。
user-scalable	yes 或者 no	默认为 yes，如果设置为 no，将无法缩放当前页面。浏览器可以忽略此规则；

四、移动端适配方案

为什么要适配移动端

由于移动端默认的视口是布局视口，需要我们改为理想视口进行布局

当我们在理想视口布局时,如果固定大小的话在不同大小的屏幕上，很有可能出现显示不完全的情况

需要我们根据不同的屏幕大小进行适配

布局视口默认980px，虽然会全部显示但是但会进行缩放
1. 理想视口固定px值不会缩放

总结：就是在理想视口下，根据不同屏幕的大小进行适配

1、百分比设置；

因为不同属性的百分比值，相对的可能是不同参照物，所以百分比往往很难统一；
所以百分比在移动端适配中使用是非常少的；

2、rem单位+动态html的font-size；

rem单位是相对于html元素的font-size来设置的，那么如果我们需要在不同的屏幕下有不同的尺寸，可以动态的修改html的font-size尺寸。

设置一个盒子的宽度是2rem,根元素font-size的字体大小的两倍；
设置不同的屏幕上html的font-size不同；
将屏幕尺寸均等分为10、15或者20等份作为html的文字大小的标准苏宁是15等份

屏幕尺寸 html的font-size 盒子的设置宽度 盒子的最终宽度
375px 37.5px 1rem 37.5px
320px 32px 1rem 32px
414px 41.4px 1rem 41.4px
这样在开发中，我们只需要考虑两个问题：问题一：针对不同的屏幕，设置html不同的font-size； 问题二：将原来要设置的尺寸，转化成rem单位；

屏幕尺寸	html的font-size	盒子的设置宽度	盒子的最终宽度
375px	37.5px	1rem	37.5px
320px	32px	1rem	32px
414px	41.4px	1rem	41.4px

1. 媒体查询@media

可以通过媒体查询来设置不同尺寸范围内的屏幕html的font-size尺寸；

@no: 15;
@media screen and (min-width: 320px) {html{font-size:(320px/@no);}}
@media screen and (min-width: 360px) {html{font-size:(360px/@no);}}
@media screen and (min-width: 375px) {html{font-size:(375px/@no);}}
@media screen and (min-width: 400px) {html{font-size:(400px/@no);}}
@media screen and (min-width: 414px) {html{font-size:(414px/@no);}}
@media screen and (min-width: 440px) {html{font-size:(440px/@no);}}
@media screen and (min-width: 480px) {html{font-size:(480px/@no);}}
@media screen and (min-width: 520px) {html{font-size:(520px/@no);}}
@media screen and (min-width: 560px) {html{font-size:(560px/@no);}}
@media screen and (min-width: 600px) {html{font-size:(600px/@no);}}
@media screen and (min-width: 640px) {html{font-size:(640px/@no);}}
@media screen and (min-width: 680px) {html{font-size:(680px/@no);}}
@media screen and (min-width: 720px) {html{font-size:(720px/@no);}}
@media screen and (min-width: 760px) {html{font-size:(760px/@no);}}
@media screen and (min-width: 800px) {html{font-size:(800px/@no);}}
@media screen and (min-width: 960px) {html{font-size:(960px/@no);}}
body{
  max-width: 960px;
  min-width: 320px;
  //设置所调试的移动端大小
  margin: 0 auto;
}

缺点：
1. 我们需要针对不同的屏幕编写大量的媒体查询；
2. 如果动态改变尺寸，不会实时的进行更新；

2. `lib-flexible`库

这种方案适合大屏响应式，可以解决缩放屏幕样式错乱的问题
vw 更适合单独做手机端的项目
githup；
已经修改好的代码，可以直接拿过来用

(function flexible (window, document) {
  //解决缩放之后 font-size 变大出现样式错乱，直接包裹一层
  //设置它 “最大宽度”，来计算font-size的大小，就可以解决
  var docEl = document.querySelector(".main-wrapper")
  var htmlEl = document.querySelector("html")
   var dpr = window.devicePixelRatio || 1
  // var dpr = 1

  // adjust body font size
  function setBodyFontSize () {
    if (document.body) {
      document.body.style.fontSize = (16 * dpr) + 'px'
    }
    else {
      document.addEventListener('DOMContentLoaded', setBodyFontSize)
    }
  }
  setBodyFontSize();

  // set 1rem = viewWidth / 10
  function setRemUnit () {
    //.main-wrapper 用来计算，至于为什么时160，因为设计稿是1920/12(文字大小)正好是160
    var rem = docEl.clientWidth / 160
    //html 用来设置大小
    htmlEl.style.fontSize = rem + 'px'
  }
/*  */
  setRemUnit()

  // reset rem unit on page resize
  window.addEventListener('resize', setRemUnit)
  window.addEventListener('pageshow', function (e) {
    if (e.persisted) {
      setRemUnit()
    }
  })

  // detect 0.5px supports
  if (dpr >= 2) {
    var fakeBody = document.createElement('body')
    var testElement = document.createElement('div')
    testElement.style.border = '.5px solid transparent'
    fakeBody.appendChild(testElement)
    docEl.appendChild(fakeBody)
    if (testElement.offsetHeight === 1) {
      docEl.classList.add('hairlines')
    }
    docEl.removeChild(fakeBody)
  }
}(window, document))

使用：
- 直接引入lib-flexible中的index.js即可
- 可以在浏览器开发者工具中查看html中1rem是多少px
- 设置号min-width,max-width,和width

4. rem单位换算

方案一：手动换算

比如有一个在375px屏幕上，100px宽度和高度的盒子；我们需要将100px转成对应的rem值； 100/37.5=2.6667，其他也是相同的方法计算即可；
- 216 / 37px *1rem

方案二：less/scss函数

@htmlFontSize:16px;
.pxToRem(@px){
  result:(@px/@htmlFontSize * 1rem);
}

方案三：postcss-pxtorem（后续学习）目前在前端的工程化开发中，我们可以借助于webpack的工具来完成自动的转化；
方案四：VSCode插件 px to rem 的插件，在编写时自动转化；

3、vw单位；

rem是将整个的屏幕尺寸分为10份，而vw是将屏幕的尺寸分成100份。

vw尺寸不能限制宽度，这样的情况当用pc浏览器宽度就是pc视口的宽度

rem的优势就是可以做宽度的限制

方案：可以用vm限制，rem的大小设置fontsize：10vm

1. vw相对于rem的优势

优势一：不需要去计算html的font-size大小，也不需要给html设置这样一个font-size；
优势二：不会因为设置html的font-size大小，而必须给body再设置一个font-size，防止继承；
优势三：因为不依赖font-size的尺寸，所以不用担心某些原因html的font-size尺寸被篡改，页面尺寸混乱；
优势四：vw相比于rem更加语义化，1vw刚才是1/100的viewport的大小;
优势五：可以具备rem之前所有的优点；
将尺寸换算成vw的单位即可；

2. 手动 `vm` 单位换算

可以使用less和scss函数

//less
@vmUnit: 屏幕的百分之一/十
.pxToVm(@px){
 result: (@px / @vmUnit * 1vm)
}

//sass
$device: 750;
$vh: 100vh;
$vw: 100vw;
@function pxToVm($size, $unit: $vw) {
    @return calc($size/$device) * $unit;
}

vscode插件 px to rem 、 webstrom插件 px2rem
postcss-px-to-viewport-8-plugin（后续学习）和rem一样，在前端的工程化开发中，我们可以借助于webpack的工具来完成自动的转化

3. 移动端适配和大屏适配注意事项

背景图片的大小记得使用百分比
```
background-size: 100% 100%;
```
设置动画的时候，当transfrom 中既需要 translate 位移，也需要rotate、skew… 旋转的时候需要注意，只能有一个transfrom
```
transfrom: translate(50px, 50px) rotate(60deg)
```

4、flex的弹性布局

五、常见的meta属性

name属性的值非常多，具体的内容可以查看文档：

https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/meta/name
我们介绍几个常用的：
robots：爬虫、协作搜寻器，或者 “机器人”，对此页面的处理行为，或者说，应当遵守的规则。
author：文档作者的名字。
Copyright：版权声明；
description：一段简短而精确的、对页面内容的描述。
一些浏览器，比如 Firefox 和 Opera，将其用作书签的默认描述。
keywords：与页面内容相关的关键词，使用逗号分隔。某些搜索引擎会进行收录；

六、CSS样式编码

在样式表中有多种方法去声明字符编码，浏览器会按照以下顺序尝试下边的方法（一旦找到就停止并得出结果）：

1.文件的开头的 Unicode byte-order（字节顺序标记）字符值。

✓ https://en.wikipedia.org/wiki/Byte_order_mark
2.由Content-Type：HTTP header 中的 charset 属性给出的值或用于提供样式表的协议中的等效值。
3.CSS @规则 @charset。
4.使用参考文档定义的字符编码：元素的 charset 属性。 ✓ 该方法在 HTML5 标准中已废除，无法使用。
5.假设文档是 UTF-8。
- 开发中推荐在CSS的开头编写@charset指定编码：
- ```
@charset "UTF-8";
```

七、图片响应式

通过css属性，aspect-ratio 设置宽高比，进行图片适配

高度要设为 auto

img{
    width:100%;
    height:auto;
    aspect-ratio:1.6;
}

使用padding 百分比的方式

    <div style="max-width: 600px;">
        <div class="box" style="position: relative;padding-top: 40%;">
            <img style="position: absolute; height: 100%; width: 100%; top: 0;"
            src="https://via.placeholder.com/1440x560?text=zhangsan"
            alt=""
            >
         </div>
       </div>

HTML移动端常见配置及处理方案

一、css中的单位

1、绝对长度单位

2、相对长度单位

3、pixel（picture element）

3.1、设备像素(也成为是物理像素)

3.2、设备独立像素(也成为逻辑像素)

3.3、CSS像素

3.4、DPR、PPI

DPR：device pixel ratio 缩放倍数

PPI每英寸像素（英语：Pixels Per Inch，缩写：PPI）

二、移动端特殊样式

三、移动端适配介绍

1、认识视口

2、视口的概念

3、移动端的视口

4、移动端视口的划分

5、布局视口

6、视觉视口（visual viewport）

7、理想视口（ideal viewport）

四、移动端适配方案

为什么要适配移动端

1、百分比设置；

2、rem单位+动态html的font-size；

1. 媒体查询@media

2. lib-flexible库

4. rem单位换算

3、vw单位；

1. vw相对于rem的优势

2. 手动 vm 单位换算

3. 移动端适配和大屏适配注意事项

4、flex的弹性布局

五、常见的meta属性

六、CSS样式编码

七、图片响应式

2. `lib-flexible`库

2. 手动 `vm` 单位换算