不同屏幕尺寸自适应问题

小牛椰椰
·发布于 1 年前

屏幕尺寸自适应问题

核心思想

  1. 基本原则是：布局更多地使用flex，然后尺寸使用rem，vw，vh为单位
  2. 如果是根据不同的屏幕需要有不同的布局，一般通过检测屏幕尺寸换不同的站点或者媒体查询使用css

rem

以html字体大小为1rem的大小，html为16px，1rem则16px。rem之所以能自适应就是根据屏幕大小去用js重新设置html的字体大小。
算法为：

html字体大小 = （js获取的当前设备宽度/设计图宽度） * 设计图宽度下1rem大小
缺点在于：要根据设计图得到宽度，再计算，然后将计算后的改为rem
于是有了对应的自动转化库-postcss-pxtorem + js计算
注意与构建工具（webpack/vite）集成在一起，具体配置使用时查询

let width = Math.min(document.body.clientWidth,750);
//比如设计图宽度为750
let fontsize = (width/750) * 100;
document.documentElement.style.fontSize = fontsize + "px";
//这里可以做一个监听，就可以实现动态更新
document.body.onresize = function(){
    let width = Math.min(document.body.clientWidth,750);
    //比如设计图宽度为750
    let fontsize = (width/750) * 100;
    document.documentElement.style.fontSize = fontsize + "px";
}

vw && vh

1vw - 1%视口宽度，1vh - 1%视口宽度
假设屏幕宽高为750 * 1200 ，那么1vw就是7.5px，1vh就是12px
使用vw做单位无需做计算，因为vw会自动根据屏幕宽度变化
vh一般用于做全屏设计

对应的自动转化库-postcss-px-to-viewport(这个不需要配js)

百分比

百分比是相对于父元素的百分比，所以一般除非是最外层的容器，否则不具备响应式调整的功能。

方案对比

rem vs vw
两个方案都可以用于控制某个盒子的大小，都会根据屏幕宽度灵活变化。rem相对于vw灵活度更高，如果你的移动端项目还需要web端浏览，那么rem可以做到vw做不到的事情。如果页面单纯只是在移动端看（比如app内web）。
rem不去监听resize事件，去修改fontSize是做不到动态改变屏幕宽度时变化大小的，如果你不想去监听resize事件，或者你的变化触发不了resize，使用vw

百分比
百分比并不是一无是处，rem和vw都是根据屏幕去算的，如果我们需要根据父组件去缩放，那么现在就可以使用百分比。比如父元素是一个用js计算出来的尺寸的盒子，我们现在希望里面的两个内容一个占百分之30，一个占百分之70

其他注意事项

  1. 关于边距处理-靠左靠右这种用flex，顶开部分小距离rem，vw
  2. 图片我们一般都定宽不定高，防止图片变形，但是如果屏幕跨度过大，可能会导致图片大到很夸张，可以考虑把图片设置最大宽度，然后居中，避免过长
  3. 在一些大屏可视化项目中，界面必须是刚好满屏幕的，不能溢出不能短。但是这个时候我们通过f11切换全屏，会引起高度变化，这个rem和vw是不会变化的，所以这种需求的项目，有的高度可以用vh来做
  4. 上述的postcss-pxtorem和postcss-px-to-viewport，都无法修改内联样式，若想要修改内联样式，可以通过js来遍历获取每个内联样式再处理（搜索出来是这样解决的），最好还是在使用时尽量避免使用内联样式来设置width或height
JavaScript
前端
$ cd ..