移动端适配问题
1.前端开发常用单位
1.1 像素
<!-- 1.什么是像素(Pixel)? 在前端开发中视口的水平方向和垂直方向是由很多小方格组成的, 一个小方格就是一个像素 例如div尺寸是100 x 100, 那么水平方向就占用100个小方格, 垂直方向就占用100个小方格 2.像素特点 不会随着视口大小的变化而变化, 像素是一个固定的单位(绝对单位) -->
1.2 百分比
<!-- 1.什么是百分比? 百分比是前端开发中的一个动态单位, 永远都是以当前元素的父元素作为参考进行计算 例如父元素宽高都是200px, 设置子元素宽高是50%, 那么子元素宽高就是100px 2.百分比特点 2.1子元素宽度是参考父元素宽度计算的 2.2子元素高度是参考父元素高度计算的 2.3子元素padding无论是水平还是垂直方向都是参考父元素宽度计算的 2.4子元素margin无论是水平还是垂直方向都是参考父元素宽度计算的 2.5不能用百分比设置元素的border 结论: 百分比是一个动态的单位, 会随着父元素宽高的变化而变化(相对单位) -->
1.3 em
<!-- 1.什么是em? em是前端开发中的一个动态单位, 是一个相对于元素字体大小的单位 例如font-size: 12px; ,那么1em就等于12px 2.em特点 2.1当前元素设置了字体大小, 那么就相对于当前元素的字体大小 2.2当前元素没有设置字体大小, 那么就相当于第一个设置字体大小的祖先元素的字体大小 2.3如果当前元素和所有祖先元素都没有设置大小, 那么就相当于浏览器默认的字体大小 结论: em是一个动态的单位, 会随着参考元素字体大小的变化而变化(相对单位) -->
1.4 rem
<!-- 1.什么是rem? rem就是root em, 和em是前端开发中的一个动态单位, rem和em的区别在于, rem是一个相对于根元素字体大小的单位 例如 根元素(html) font-size: 12px; ,那么1em就等于12px 2.rem特点 2.1除了根元素以外, 其它祖先元素的字体大小不会影响rem尺寸 2.2如果根元素设置了字体大小, 那么就相对于根元素的字体大小 2.3如果根元素没有设置字体大小, 那么就相对于浏览器默认的字体大小 结论: rem是一个动态的单位, 会随着根元素字体大小的变化而变化(相对单位) -->
1.5 vwvh
<!-- 1.什么是vw(Viewport Width)和vh(Viewport Height)? 1.1vw和vh是前端开发中的一个动态单位, 是一个相对于网页视口的单位 1.2系统会将视口的宽度和高度分为100份,1vw就占用视口宽度的百分之一, 1vh就占用视口高度的百分之一 1.3vw和vh和百分比不同的是, 百分比永远都是以父元素作为参考 而vw和vh永远都是以视口作为参考 结论: vw/vh是一个动态的单位, 会随着视口大小的变化而变化(相对单位) 2.什么是vmin和vmax? vmin: vw和vh中较小的那个 vmax: vw和vh中较大的那个 使用场景: 保证移动开发中屏幕旋转之后尺寸不变 -->
2.视口
<!-- 1.什么是视口? 视口简单理解就是可视区域大小我们称之为视口 在PC端，视口大小就是浏览器窗口可视区域的大小 在移动端, 视口大小并不等于窗口大小, 移动端视口宽度被人为定义为了980 2.为什么是980而不是其他的值? 因为过去网页的版心都是980 乔老爷子为了能够让网页在移动端完美的展示, 所以将iOS手机视口的大小定义为了980 后来谷歌也觉得这是一个非常牛X的方案, 所以Android手机的视口也定义为了980 3.移动端自动将视口宽度设置为980带来的问题 虽然移动端自动将视口宽度设置为980之后让我们可以很完美的看到整个网页 但是由于移动端的物理尺寸(设备宽度)是远远小于视口宽度的 所以为了能够在较小的范围内看到视口中所有的内容, 那么就必须将内容缩小 (和前面讲解Canvas时讲解的viewbox一样, 近大远小原理) 4.如何保证在移动端不自动缩放网页的尺寸? 通过meta设置视口大小 <meta name="viewport" content="width=device-width, initial-scale=1.0"> width=device-width 设置视口宽度等于设备的宽度 initial-scale=1.0 初始缩放比例, 1不缩放 maximum-scale：允许用户缩放到的最大比例 minimum-scale：允许用户缩放到的最小比例 user-scalable：用户是否可以手动缩放 -->
3. 移动端常用适配方案
3.1 方案一,媒体查询适配
@media screen and (min-width: 375px){} <!--最小是375--> @media screen and (max-width: 414px){}<!--最大是414--> <!-- 1.通过媒体查询 媒体查询的方式可以说是我早期采用的布局方式， 它主要是通过查询设备的宽度来执行不同的css代码，最终达到界面的配置 2.媒体查询优势 简单, 哪里不对改哪里 调整屏幕宽度的时候不用刷新页面即可响应式展示 特别适合对移动短和PC维护同一套代码的时候 3.媒体查询劣势 由于移动端和PC端维护同一套代码, 所以代码量比较大，维护不方便 为了兼顾大屏幕或高清设备，会造成其他设备资源浪费，特别是加载图片资源 为了兼顾移动端和PC端各自响应式的展示效果，难免会损失各自特有的交互方式 4.应用场景 对于比较简单(界面不复杂)的网页, 诸如: 企业官网、宣传单页等 我们可以通过媒体查询、伸缩布局、Bootstrap来实现响应式站点 对于比较复杂(界面复杂)的网页, 诸如: 电商、团购等 更多的则是PC端一套代码, 移动端一套代码 -->
3.2 通过媒体查询 + rem
<!-- 虽然我们将移动端独立到一套代码中了, 但是由于移动端也有很多的屏幕尺寸, 所以也需要进行适配 例如: iPhone3/4/5: 320px iPhone678: 375px iPhoneX/plus: 414px 当下在企业开发中设计师提供给我们的移动端设计图片是750*xxx的或者1125*xxx的 所以我们需要对设计师提供的图片进行等比缩放, 这样才能1:1还原设计图片 2.如何等比缩放? 2.1将设计图片等分为指定份数,求出每一份的大小 例如: 750设计图片分为7.5份, 那么每一份的大小就是100px 2.2将目标屏幕也等分为指定份数,求出每一份的大小 例如: 375屏幕也分为7.5份, 那么每一份的大小就是50px 2.3用 原始元素尺寸 / 原始图片每一份大小 * 目标屏幕每一份大小 = 等比缩放后的尺寸 例如: 设计图片上有一个150*150的图片, 我想等比缩放显示到375屏幕上 那么: 150 / 100 * 50 = 1.5*50 = 75px 3.如何在前端开发中应用这个计算公式? 3.1目标屏幕每一份的大小就是html的font-size: 50px 3.2使用时只需要用 "原始元素尺寸 / 原始图片每一份大小rem" 即可 150 / 100 = 1.5 / 1.5rem 1rem = 50px / 1.5rem === 1.5*50 = 75px 4.大公司应用实例 4.1网易新闻 750/100=7.5 375/7.5=50; 320/7.5=42.7; 4.2苏宁易购 750/50=15 375/15=25 320/15=21.33 -->
3.3 移动端常用适配方案三
<!-- 注意点: 通过JS动态计算当前屏幕每一份大小的好处: 不用写很多的媒体查询 坏处: 切换了屏幕尺寸之后需要刷新界面才有效,而媒体查询如果切换了屏幕的尺寸不需要重新刷新界面,但在实际开发中不需要考虑这些,因为不需要像我们在浏览器模拟手机一样需要一直刷新. --> <script> //document.documentElement 就是获取html document.documentElement.style.fontSize = window.innerWidth / 7.5 + "px"; //在html代码中我们只需要以下写 </script> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>11-移动端常用适配方案三</title> <style> //1.计算设计图片每一份大小: 750 / 7.5 = 100px //2.计算当前屏幕每一份大小: 当前屏幕宽度 / 设计图片每一份大小 = 当前屏幕每一份大小 img{ //比如原始设计图为750px,其中有一个图片的大小是410px,那么在当前屏幕中只需要写410/100rem width: 410/100rem; height: 270/100rem; vertical-align: bottom; } </style> </head> </html>
3.4移动端常用适配方案四
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>12-设备像素和CSS像素</title> <style> div{ width: 100px; height: 100px; border: 1px solid #000; } </style> </head> <body> <div></div> <script> //先来了解一下css像素和设备像素 /* 1.什么是设备像素和CSS像素? 1.1设备像素又称为物理像素, 是"物理屏幕"上真实存在的发光点，只有屏幕一经出厂就固定不会改变 1.2CSS像素又称为逻辑像素，是编程世界中虚拟的东西, 我们通过代码设置的像素都是逻辑像素 例如: iPhone3G/iPhone3GS 3.5英寸/ 逻辑像素320*480 / 设备像素320*480 iPhone4/4S 3.5英寸/ 逻辑像素320*480 / 设备像素640*960 也就是说CSS像素和设备像素在有的时候是不一样的 3.什么时候不一样?为什么不一样? 3.1在PC端，1个CSS像素往往都是对应着电脑屏幕的1个物理像素, 所以我们无需关心PC端的CSS像素和设备像素 3.2在手机端，最开始其实1个CSS个像素也是对应着手机屏幕的1个物理像素, 但是后来一个改变世界的男人(乔布斯)改变了这一切~ 从iPhone4开始，苹果公司推出了所谓的retina视网膜屏幕。 iPhone4的屏幕尺寸却没有变化，但是像素点却多了一倍 这就导致了在1个CSS个像素等于1个物理像素的手机上, 我们设置1个CSS像素只会占用1个物理像素 而在1个CSS个像素不等于1个物理像素的手机上, 我们设置1个CSS像素就会占用2个物理像素 所以仔细观察你会发现同样是1像素但是在retina视网膜屏幕的手机上会粗一些 https://segmentfault.com/a/1190000015736900 https://ask.csdn.net/questions/692608 */ /* 1.如何解决设备像素和CSS像素不一样的问题? 如果设备像素和CSS像素一样, 那么无需处理不会带来任何负面影响 如果设备像素是CSS像素的2倍, 那么我们只需将CSS像素缩小一半即可 但是有时候设备像素可能是CSS像素的3倍/4倍... 2.获取设备像素比DPR(Device Pixel Ratio) DPR = 设备像素 / CSS像素 iPhone3GS : 320 / 320 = 1 iPhone4S: 640 / 320 = 2 iPhone678: 750 / 375 = 2 iPhoneX: 1125 / 375 = 3 在JS中我们可以通过 window.devicePixelRatio 获取当前的设备像素 3.如何缩小? 通过 <meta name="viewport">的initial-scale属性来缩小 注意点: 缩放视口后视口大小会发生变化 * */ // console.log(1.0 / window.devicePixelRatio); // 1 / 1 = 1; 1 / 2 = 0.5; let scale = 1.0 / window.devicePixelRatio; //动态添加以下代码 let text = `<meta name="viewport" content="width=device-width, initial-scale=${scale}, maximum-scale=${scale}, minimum-scale=${scale}, user-scalable=no">`; document.write(text); document.documentElement.style.fontSize = window.innerWidth / 7.5 + "px"; </script> </body> </html>
物理像素和css像素.png
