关于javascript:移动端适配

屏幕尺寸

屏幕分辨率

数值大的在后面，数值小的在前面

PPI和DPI

是指对角线上每英寸的像素数量，而不是每平方英寸上的像素数量，这里指物理像素

设施像素和逻辑像素

设施像素即物理像素：

逻辑像素：

这个375*667就是逻辑像素

设施像素和逻辑像素不等价的状况：

dpr-设施像素比

咱们css中写windth:1px，Iphone6设施上会占用两个发光点来显示
Iphone6中设施像素是逻辑像素的两倍，Iphone6也称为2倍屏，也就是dpr是2

设施独立像素-DIP

视图视口-visual viewport

布局视口-layout viewport

测试代码：

后果：
选中box标签，发现它的宽度是980px

meta viewport 标签只对挪动端浏览器无效，对 PC 端浏览器是有效的。

测试代码：

后果：
选中box标签，发现它的宽度是450px

Window10零碎，如果设置了缩放，比方选中200%的缩放，上例中，选中box标签，发现它的宽度将是225px

发现当设置width=450是，呈现了横向滚动条：

批改为width=device-width：

后果：
选中box标签，发现它的宽度是414px，跟iphone8plus的逻辑像素统一

测试代码：

后果：
Iphone8的375px的盒子里能放下640px长度的标签，是因为缩放了0.5倍：

现实视口-ideal viewport

只设置initial-scale也能实现成果，因为浏览器会主动去计算出width的值：布局视口宽度 = 设施现实视口宽度 / initial-scale
不设置width属性时，浏览器会将布局视口宽度设置为视觉视口宽度，以将页面正好铺满屏幕。能够认为这是一条定律。
如果initial-scale和width同时设置了，就取计算结果数值大的那个
常见的写法是两个都写，而不是只写一个

对于视口：

挪动端的适配离不开viewport，前面百分比和rem的计划，都是在viewport的根底上
只有在浏览器调试台显示的像素，都是逻辑像素，他们是一样的单位，如下的375667、64060、638*58都是一样的单位

百分比布局计划

这边包含两种：

百分比+固定高度
弹性盒子(即flex布局)+固定高度

百分比+固定高度的案例：

Rem布局计划

媒体查问扭转根元素的字体大小：

这里的min-width是指逻辑像素，即css像素，即上面的这个像素：

如果设计稿习惯给640*2=1280px的，那么min-width:640px上面定为100px，是因为不便换算，比方设计稿上一个标签是120px，则写成1.2rem

min-width:480px上面的75px是怎么计算的：
640/480 == 100/75 == 1.33

当初更多应用750*1334px的设计稿，所以应该在750这个范畴里设置font-size:100px

毛病：

js实现动静扭转根元素的字体大小

document.clientWidth是布局视口的宽度，即viewport中指定的width

这个公式和后面媒体查问的数据公式是一样的

毛病：在2倍屏的设施上，1px的线条显示很粗，因为是占用两个物理发光点来显示1px

缩放自适应布局形式

举荐两个挪动端适配插件：

淘宝的flexible计划地址：
https://github.com/amfe/lib-f...

hotcss地址：
https://github.com/imochen/ho...

Hotcss的应用步骤：
下载zip包，解压后拷贝如下两个文件到我的项目里：

Hotcss.js里的代码：

px2rem里的代码：

测试代码：

后果：box物无论在什么设施上都是屏幕宽度的一半
因为，hotcss将屏幕均匀分成了16份，1份就是1rem

hotcss的具体用法：

cart.html：

.html文件中不须要写<meta name="viewport"，因为援用的hotcss.js文件里会动静增加
css文件最好再js文件之前引入

px2rem.scss：

cart.sass：

.box标签在750px的设计稿上量进去是100px，写成px2rem(100)
.box2不应用px2rem

cart.sass编译后：

后果：

超过540将不再自适应变动，因为540是hotcss.js代码里写死的

hotcss.js解析

核心思想：
背景：以后的设计稿，宽泛应用的是二倍图，因为再小点不清晰，再大点图片太重
指标：当量出设计稿上某个标签的长宽后，能够间接写到css中，不须要简单换算
计划：想要让二倍图大小的标签挤进一倍大小的布局视口里，能够应用initial-scale进行放大

meta标签initial-scale的大小计算：

var dpr = window.devicePixelRatio
initial-scale = 1/dpr

html标签下的font-size值的大小计算：

上一步中meta标签initial-scale的大小确认后，
document.documentElement.clientWidth的大小也就确认了
var clientWidth= document.documentElement.clientWidth
var fontSize = ( clientWidth*20/320 ) + 'px'

px2rem.scss里

@function px2rem($px){

@return $px*320/$designWidth/20 + rem

}

$designWidth = 750

这段代码的作用:

以750px设计稿为例
上一步中失去html标签下的font-size:750*20/320=46.875
设计稿中一个标签量进去是750px，换算成rem单位是：750px/46.875=16rem
hotcss的目标就是16这个数字，所以才会写$px*320/$designWidth/20这一堆
为什么要16这个数字：模仿bootstrap栅格化，栅格化16等份
当不援用px2rem.scss文件，只援用hotcss.js文件，css中也能够写rem单位，不必px2rem($px)函数
写16rem就是满屏的长度
如果设计稿中一个标签量进去是32px，换算：32/750*16=0.68，css中就能够写成width:0.68rem
因为换算太麻烦，所以才呈现px2rem.scss里的代码

如果提供的是非750px的设计稿:

假如提供的是iPhone12 pro的780px的设计稿
iPhone12 pro的devicePixelRatio=2
initial-scale = 1/dpr = 1/2 = 0.5
var clientWidth= document.documentElement.clientWidth = 780
var fontSize = ( clientWidth20/320 ) + 'px' = (78020/320) +'px' = 48.76
$designWidth = 780
设计稿中一个标签量进去是780px，换算成rem单位是：780px/48.76=16rem

hotcss的特地用法：

只援用hotcss.js文件，不应用px2rem.scss，本人写办法转换px和rem：
$designWidth: 750; //视觉稿横屏尺寸
@px2rem: 320/$designWidth/20 * 1rem;
如果750px设计稿中一个标签量进去是32px，写成：
div{
background: red;
width: 32*@px2rem;
}
如果.html文件须要写<meta name="viewport"也能够，
<meta name="viewport" content="width=device-width,initial-scale=1.0,
minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
hotcss.js文件里会依据这个viewport，算出html标签下font-size的值
前面的过程也是一样的，用法也是一样的：width: px2rem(100)
在内联款式中间接写rem单位
<p style="height:3rem">111{{test}}</p>
记住16rem是横向满屏的宽度
js代码中应用px单位
在hotcss.js文件中，往window上挂了全局属性和函数：
rem2px函数(将rem转化为px)、
px2rem函数(将px转化为rem)、
dpr属性(window.devicePixelRatio)
如果750设计稿上量进去的100px，则写成rem2px(100 * 320 / 750 / 20)
为什么要写 * 320 / 750 / 20，是因为要转换成rem，参考hotcss特地用法的第一条
100 * 320 / 750 / 20 = 2.1rem，所以也能够间接写rem2px(2.1)
2.1/16 = 13%，所以无论在什么设施上，tabWidth的宽度都会渲染为横屏宽度的13%

兼容问题：

横竖屏转换 rem计算提早问题

clientWidth适配计划的兼容解决：

hotcss适配计划的兼容解决：

挪动端1像素1px边框过粗解决办法：

补充

document.documentElement.clientWidth
或者
document.documentElement.getBoundingClientRect().width
取值的状况：
当initial-scale=1时，取值就是该设施的逻辑像素：

当initial-scale=0.5时，取值是该设施的逻辑像素的2倍：
（只设置initial-scale也能实现成果，因为浏览器会主动去计算出width的值：布局视口宽度 = 设施现实视口宽度 / initial-scale
不设置width属性时，浏览器会将布局视口宽度设置为视觉视口宽度，以将页面正好铺满屏幕。能够认为这是一条定律。
如果initial-scale和width同时设置了，就取计算结果数值大的那个
）