web前端之移动端：知识汇

2019 年 10 月 10 日
筆記

一、响应式布局：

// Extra small devices (portrait phones, less than 576px)  // No media query for `xs` since this is the default in Bootstrap    // Small devices (landscape phones, 576px and up)  @media (min-width: 576px) { ... }    // Medium devices (tablets, 768px and up)  @media (min-width: 768px) { ... }    // Large devices (desktops, 992px and up)  @media (min-width: 992px) { ... }    // Extra large devices (large desktops, 1200px and up)  @media (min-width: 1200px) { ... }

二、移动端适配

移动设计图： 640px，iopne6： 750px

PC屏： 1240px， 960px

概念：

屏幕尺寸：屏幕对角线（英寸）

屏幕分辩率：物理像素（像素点） 1024*1980 px

1px： 1横向像素 * 1纵向像素
就是卖手机标注的屏幕像素

屏幕像素密度（PPI）：一英寸内的拥有的像素

设备独立像素：

是一种可以被程序所控制的虚拟像素，在Web开发中对应CSS像素

占满屏幕的虚拟的开发像素

像素比：物理像素/设备独立像素

2.1 为什么适配：

像素：

位图像素：图片的像素

当位图像素 = 物理像素才能完美显示

视口：

视觉视口： （就是文档的实际在浏览器中的大小）

就是html元素
随用户的缩放改变，即网页开发配置的尺寸被改变
网站设计稿，是小于等于视觉视口的

布局视口：（设备出厂定好了，不能改变，就是屏幕大小，不是屏幕分辩率）

浏览器默认的不出现滚动条的屏幕大小，所以，在移动端，网页设计尺寸，不超过布局视口就不出现滚动条，（即配置的视觉视口大于布局视口）
滚动条只于布局视口有关
移动端要保证，视觉视口 = 布局视口，才能完整网页

<meta name='viewport' width = 'device-width'/>  //  布局视口等于视觉视口

width = ‘device-width’ 这个相当于移动端的协议，必须签，不签的话，调式工具的 像素比, 就会出错；签了才是DPR=2, 或者DPR=3；
pc端viewport无效

理想视口：

签了协议的视口

获取视口的方法：

PC：只有一个视口

document.docmentElenment.clientWidth (不包空滚动条)

window.inderWidth = 包括滚动条

screen.width = 分辨率

完美视口：

<meta name='viewport' width = 'device-width, inition-scale=1.0'/>

移动端：

document.docmentElenment.clientwidth = 布局视口

window.inderWidth = 视觉视口（不用，兼容不好）

screen.width = 布局视口/或理想视口（不用）

缩放：

用户缩放

PC：会影响视觉视口，布局视口

移动端：会影响视觉视口，不影响布局视口

系统缩放

改变理想视口，做缩放

旋转:

完美视口，能解决旋转兼容问题

图片：（设计位图像素 == 物理像素（分辨率））

锐化：图片缩小

失真：图片放大

适配： 不同设备等比还原设计图

1、rem适配：

改变了一个元素在不同设备上占据的css像素的个数
html的高宽==视觉视口，width，height，只读；用户缩放会影响

rem基于html的fontSize的大小; 所以所设计图与html的font-size进行等比

（function(){      var styleNode = document.createElement('style')      var htmlW = document.documenElement.clientWidth / 16  //将视觉视口分成16份        styleNode.innerHtml = `html{font-size:${htmlW} !important}`  // 利用css才有！imporant属性， 将根字体固定，防止误改      document.head.appendChild(styleNode)  }）()

利用css才有！imporant属性，将根字体固定，防止误改

优点： 没有破坏完美视口

缺点： px到rem太复杂

2、viewport适配

改变视觉视口的大小， html的宽度，使之等于设计图
不同设备css像素一样，视觉视口缩放不一样

(function(targetWidth){      let targetWidth = 640;      var scale = documentElement.clientWidth/targetWidth      var meta = document.querySelector(meta[name='viewport'])      meta.content = `initial-scale=${scale},minimum-scale=${scale},maximum-scale=${scale}, user-scaleble=no`  })()

优点：所量即所得

缺点：没有实现完美视口

3、百分比适配（页面简单可以）

4、vw方案

vw也是一个相对单位，它相对的是布局视口，1vw就是1%的布局视口宽度。

5、flexible, 是查询屏幕，生成font-size的大小，所以在不需要适配的时候，还是要@media 做限定

一物理像素:

1、图片做border线

2、meta标签：

rem适配+scale缩放，border用px（taobao方案）
这样会改变，适配，不推荐

3、css3属性；

@media + transform： scale（1/dpr）缩放（主流：）

4、box-shadow：

-webkit-box-shadow:0 1px 1px -1px rgba(0, 0, 0, 0.5);