前端不同屏幕尺寸自适应

• 核心内容

  • 屏幕自适应方案总结和具体实施方案
  • 各个方案的选取建议
  • 一些其他适配注意事项

• 总的说下核心思想

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

• 屏幕适配肯定不能单纯的使用rem来适配，因为移动端和pc端是两种完全不同的布局，一般以大于960为pc端站点，小于960为移动端

  • 如果样式变化比较大可以采用不同的站点
  • 2，如果只是CSS的不同可以利用link查询媒体标签加载不同的CSS样式

• rem

  • rem 以HTML字体大小为1rem的大小，HTML为16px，1rem为16px，1rem则16px，rem之所以能自适应就是根据屏幕大小去用JS重新设置HTML字体大小。
    算法为：HTML字体大小=（JS获取到的当前设备宽度/设计图宽度）*设计图宽度下1rem大小 对应的自动化转化库：postcss-pxtorem+js计算

HTML中的配置还是必须要写的要不然不起作用，有时候我们的整体宽度不需要转化这时候可以刻style，style是不会转化的

• vw，vh
  • 1vw-1%视口宽度，1vh-1%视口高度 假设屏幕宽度宽高为750*1200 那么1vw就是7.5px 1vh就是12px
  • 使用vw做单位无需做计算，因为vw会自动根据屏幕宽度变化
  • vh一般用来做全屏设计,如果设置百分之的话必须所有的父元素都设置为百分之百，因为百分比就根据父元素来的，而vh不需要设置父元素就可以设置满屏

对应的自动转化库-postcss-px-to-viewport

• 百分比

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

• rem VS vw

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

• 百分比
• 百分比并不是一无是处，rem和vw都是根据屏幕去算的，如果我们需要根据父组件去缩放我们就必须用百分比，比如父元素是一个用JS计算出来的尺寸盒子，我们现在希望里面的两个内容一个占百分之20，一个占百分之80

注意：

• 关于边距处理--靠左靠右这种用flex，顶开部分小距离rem，vw
• 图片我们一般都定宽不定高，防止图片变形，但是如果屏幕跨度很大，可能会导致图片大到夸张，可以考虑把图片设置最大宽度，然后居中，避免过长。
• 在一些大屏可视化项目中，界面必须是刚好满屏幕一屏幕的，不能溢出不能短。但是这个时候我们通过f11切换全屏，会引起高度变化，这个rem和vw是不会变化的，所以这种需求的项目，有的高度可以用vh来做