常见尺寸适配单位与场景

hang1126
333 阅读6分钟
1.px
  1. pixel的缩写，意为像素。
  2. px是我们网页设计常用的单位，也是基本单位。
  3. 通过px可以设置固定的布局或者元素大小。
  4. 缺点：没有弹性。

假设：一个宽度为 600px 的 div，在设计中它应该占据屏幕的一半。但是当你遇到不同的 屏幕 时（4K、1080P、或者 手机）那么这固定的 600px 是无法占据整个屏幕一半的宽度的。

Tips：浏览器显示最小字体问题：
    1. 一般默认只显示到12px大小，谷歌等新版本浏览器可以在设置中-外观-自定义最小字体大小。
    2. 使用缩放transform:scale()，使用较为广泛。
        a. 优点：单行、多行文本都可使用
        b. 缺点：只是视觉效果变小，并不会改变盒子的实际占位，在对齐其他盒子时不太友好
    3.使用SVG 矢量图设置text。
        a.优点： 1px-12px任意字号均可设置，可对设计界面进行对齐调整。
        b.缺点：不支持多行文本
2.rpx
  1. rpx 是微信小程序解决自适应屏幕尺寸的尺寸单位。
  2. rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。
  3. 微信小程序规定屏幕的宽度为750rpx。
  4. 解释：例如宽度，相当于把屏幕宽度分为750份，1份就是1rpx。高度类似。
3.upx
  1. uni-app 使用 upx 作为默认尺寸单位， upx 是相对于基准宽度的单位，可以根据屏幕宽度进行自适应。
  2. uni-app 规定屏幕基准宽度750upx。
  3. upx不能像rpx那样直接支持动态绑定，不再推荐upx的使用。
4.em

  1. 参考物是父元素的font-size，具有继承的特点。

  2. 如果自身定义了font-size按自身来计算（浏览器默认字体是16px），整个页面内1em不是一个固定的值。

  3. 特点

  4. em的值并不是固定的；

  5. em会继承父级元素的字体大小。

  6. 1em=1倍父元素font-size的值，2em=2倍父元素font-size的值，以此类推。

5.rem
  1. rem(root em)是一个相对单位，类似于em，em是父元素字体的大小，不同的是rem的基准是相对于html元素的字体大小根元素（html）设置font-size = 12px; 非根元素设置width: 2rem; 则换成px表示就是24px。
  2. 优点是，只需要设置根目录的大小就可以把整个页面的成比例的调好。
  3. em是相对于父元素的字体大小来说的
  4. rem是相对于html元素字体大小来说，html只有一个，实现整体控制的效果，可以通过修改html的字体大小来控制整体的大小

在日常开发中，可以直接通过如下代码来控制 html 根标签 fontsize 动态变化

/**
 * 初始化 rem 基准值，最大为 40px
 */
export const useREM = () => {
  // 定义最大的 fontSize
  const MAX_FONT_SIZE = 40

  // 监听 html 文档被解析完成的事件
  document.addEventListener('DOMContentLoaded', () => {
    // 获取 html 标签
    const html = document.querySelector('html')
    // 获取根元素 fontSize 标准，屏幕宽度 / 10。（以 Iphone 为例 Iphone 6 屏幕宽度为 375，则标准 fontSize 为 37.5）
    let fontSize = window.innerWidth / 10
    // 获取到的 fontSize 不允许超过我们定义的最大值
    fontSize = fontSize > MAX_FONT_SIZE ? MAX_FONT_SIZE : fontSize
    // 定义根元素（html）fontSize 的大小 （rem）
    html.style.fontSize = fontSize + 'px'
  })
}
6.vw\vh

  1. vw和vh是一个相对单位

  2. vw：viewport width 视口宽度单位

  3. vh： viewport height 视口高度单位

  4. 相对视口的尺寸计算结果

  5. 1vw = 1/100视口宽度

  6. 1vh = 1/100视口高度

  7. 例如：当前屏幕是375像素，则1vw就是3.75像素，当前屏幕是414像素，则1vw就是4.14像素

  8. 百分比是相对于父元素来说，vw是相对于当前视口的宽度

  9. 不经常用vh因为vw会随着页面宽度变化而变化

7.vm
  1. css3新单位，相对于视口的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vm 举个例子：浏览器高度 例：900px，宽度1200px，取最小的浏览器高度，1 vm = 900px/100 = 9 px。
  2. 兼容性太差 ,不建议使用。
  3. vmin：选取vw和vh中最小的那个。
  4. vmax：选取vw和vh中最大的那个。
  5. vmin（视口最小值）：表示视口较小尺寸（宽度或高度）的百分比。 1 vmin 等于视口较小尺寸的 1%。如果视口宽度为 1000px，高度为 800px，则 1vmin 为 8px。
  6. vmax（视口最大值）：表示视口较大尺寸（宽度或高度）的百分比。 1 vmax 等于视口较大尺寸的 1%。如果视口宽度为 1000 像素，高度为 800 像素，则 1vmax 为 10 像素。
8.%：是相对于父元素的大小设定的比率，position:absolute;的元素是相对于已经定位的父元素，position：fixed；的元素是相对可视窗口

9.pt：point，大约1/72寸

10.pc：pica，大约6pt，1/6寸

其他：

1.媒体查询：

  1. 作用：使用@media查询，可以针对不同的媒体类型定义不同的样式，@meedia可以针对不同的屏幕尺寸设置不同的样式

  2. @media mediatype and | not | only (media feature ){ CSS-Code; }

  3. 用@media开头，mediatype媒体类型[ all 用于所有设备，print 用于打印机和打印预览，scree 用于电脑屏幕，pad,phone等 ]，关键字[ and 可以将多个媒体特性连接到一起，not 排除某个媒体事件，only 指定某个特定的媒体类型 ] and not only，media feature媒体特性[ width 定义输出设备中页面课件区域的宽度，min-width 输出设备中页面最小可见区域宽度，max-width 页面最大可见区域宽度 ]必须有小括号包含

  4. 例如：

  5. @media scree and (max-width: 800px){ body{ background-color: pink; } }

  6. 在屏幕上并且最大宽度是800像素 设置样式

  7. 可以根据不同的屏幕尺寸改变样式

2.布局方式：

  1. flex布局
  2. 栅格布局
  3. Grid布局
  4. 其他响应式框架、库等

常见场景：

1.echarts自适应

window.addEventListener("resize", function (event) {
  myChart.resize();
})

tips: 通过监听窗口大小变化，当用户调整浏览器窗口尺寸时，触发 resize 事件，进而调用 myChart.resize() 方法来响应图表组件的尺寸更新。

2.不同分辨率下自适应

calc() 函数

(1920 * 1080)

width: calc( 100vw * 50 / 1920 );

3.不同比例尺寸

常见屏幕比例 16:9，4:3，16:10 等

解决方案：使用同一单位

width: 100vw;
height: 50vh;

width: 100vw;
height: 40vw;

以上内容由个人整理得出，不足之处，还请不吝赐教。

avatar
文章
阅读
粉丝