前端开发常用单位

像素

• 在前端开发中视口的水平方向和垂直方向是由很多小方格组成的,一个小方格就是一个像素
• 特点: 不会随着视口大小的变化而变化,像素是一个固定的单位(绝对单位)

百分比

• 百分比是前端开发中的一个动态单位,永远都是以当前元素的父元素作为参考进行计算
• 特点
  • 子元素宽度是参考父元素宽度计算的
  • 子元素高度是参考父元素高度计算的
  • 子元素padding和margin无论是垂直方向还是水平方向都是参考父元素的宽度计算的
  • 不能通过百分比设置元素的border
  • 百分比是一个动态的单位,会随着父元素宽高的变化而变化

em

• em是前端开发中的一个动态单位,是一个相对于元素字体大小的单位
• 特点
  • 当前元素设置了字体大小,那么就相对于当前元素的字体大小
  • 当前元素没有设置字体大小,那么就相对于第一个设置字体大小的祖先元素的字体大小
  • 如果当前元素和所有祖先元素都没有设置大小,那么就相对于浏览器默认的字体大小
  • em是一个动态单位,会随着参考元素字体大小的变化而变化(相对单位)

rem

• rem就是root em,和em一样是前端开发中的一个动态单位
• rem和em的区别在于,rem是一个相对于根元素(html)字体大小的单位
• 特点
  • 除了根元素以外,其他祖先元素的字体大小不会影响rem尺寸
  • 如果根元素设置了字体大小,那么就相对于根元素的字体大小
  • 如果根元素没有设置字体大小,那么就相对于浏览器默认的字体大小
  • rem是一个动态单位,会随着根元素字体大小的变化而变化(相对单位)

vwh

• vw和vh是前端开发中的一个动态单位,是一个相对于网页视口的单位
• 系统会将视口的宽度和高度分为100份,1vw就占用视口宽度的百分之一,1vh就占用视口高度的百分之一,vw和vh永远都是以视口为参考
• 特点: vw/vh是一个动态单位,会随着视口大小的变化而变化(相对单位)
• vmin和vmax
  • vmin:vw和vh中较小的那个
  • vmax:vw和vh中较大的那个
  • 使用场景: 保证移动开发中屏幕旋转之后尺寸不变

移动端视口

• 简单理解就是可视区域大小我们称之为视口

• 在pc端,视口大小就是浏览器窗口可视区域的大小,在移动端,视口大小并不等于窗口大小,移动端视口宽度被人为定义为了980

• 移动端自动将视口宽度设置为980带来的问题

  • 虽然移动端自动将视口宽度设置为980之后让我们可以很完美的看到整个网页,但是由于移动端的物理尺寸(设备宽度)是远远小于视口宽度的
  • 为了能够在较小的范围内看到视口中所有的内容,那么就必须将内容缩小
  • 和前面Canvas时讲的viewbox一样,近大远小原理

• 通过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:用户是否可以手动缩放

移动端常用适配方案

通过媒体查询

• 媒体查询的方式可以说是我们早期采用的布局方式,它主要是通过查询设备的宽度来执行不同的css代码,最终达到界面的配置
• 优势
  • 简单,哪里不对改哪里
  • 调整屏幕宽度的时候不用刷新页面即可响应式展示
  • 特别适合对移动端和pc维护同一套代码的时候
• 劣势
  • 由于移动端和pc端维护同一套代码,所以代码量比较大,维护不方便
  • 为了兼顾大屏幕或高清设备,会造成其他资源浪费,特别是加载图片资源
  • 为了兼顾移动端和pc端各自响应式的展示效果,难免会损失各自特有的交互方式
• 应用场景
  • 对于比较简单(界面不复杂)的网页,如:企业官网,宣传单页等,我们可以通过媒体查询,伸缩布局,bootstrap来实现响应式站点
  • 对于比较复杂(界面复杂)的网页,如:电商,团购等,更多的则是采用pc端一套代码,移动端一套代码
• 界面自动跳转
  • 默认打开PC端界面
  • 在PC端界面中通过BOM拿到当前浏览器信息
  • 通过正则判断当前浏览器是否是移动端浏览器
  • 通过BOM的location对象实现跳转到移动端界面

通过媒体查询+rem

• 虽然我们将移动端独立到一套代码中了,但是由于移动端也有很多的屏幕尺寸,所以也需要进行适配

• 当下在企业开发中设计师提供给我们的移动端设计图是750*xxx或者1125*xxx的,所以我们需要对设计师提供的图片进行等比缩放,这样才能1:1还原设计图片

• 如何等比缩放

  • 将设计图片等分为指定分数,求出每一份的大小
  • 将目标屏幕也等分为指定分数,求出每一份的大小
  • 用原始元素尺寸/原始图片每一份大小*目标屏幕每一份大小=等比缩放后的尺寸

• 应用计算公式

  • 目标屏幕每一份的大小就是html的font-size
  • 使用时只需要用原始元素尺寸/原始图片每一份大小rem 即可

• JS动态计算当前屏幕每一份的大小

  <script>
    document.documentElement.style.fontSize = window.innerWidth / 7.5 + "px";
  </script>
  

  • 不用写很多的媒体查询
  • 切换了屏幕尺寸需要刷新界面才有效

设备像素和CSS像素

• 设备像素又称为物理像素,是"物理屏幕"上真实存在的发光点,只要屏幕一经出厂就固定不会改变
• CSS像素又称为逻辑像素,是编程世界中虚拟的东西,我们通过代码设置的像素都是逻辑像素
• CSS像素和设备像素在有的时候是不一样的
  • 在pc端,1个CSS像素往往都是对应着电脑屏幕的一个物理像素,所以我们无需关心pc端的CSS像素和设备像素
  • 在手机端,最开始1个CSS像素也是对应着手机屏幕的1个物理像素,从iPhone4开始,苹果公司推出了所谓的retina视网膜屏幕
  • 屏幕尺寸没有变化,但是像素点却多了一倍
  • 这就导致了在1个CSS像素等于1个物理像素的手机上,我们设置1个CSS像素只会占用1个物理像素
  • 而在1个CSS像素不等于1个物理像素的手机上,我们设置1个CSS像素就会占用2个物理像素
  • 所以仔细观察会发现同样是1像素但是在retina视网膜屏幕的手机上会粗一些

适配方案三

• 如果设备像素和CSS像素一样,那么无需处理不会带来任何负面影响
• 如果设备像素是CSS像素的2倍,那么我们只需将CSS像素缩小一半即可,但是有时候设备像素可能是CSS像素的3倍/4倍...
• 获取设备像素比DPR
  • DPR = 设备像素 / CSS像素
  • 在JS中我们可以通过window.devicePixelRatio 获取当前设备像素比
  • 通过<meta name="viewport">的initial-scale属性来缩小
  • 注意点:缩放视口后视口大小会发生变化