【大屏可视化】大屏适配公式

1.大屏适配公式

• 设计稿尺寸：16：9
• 大屏：显示16：9
  1.如果屏幕很宽，就以高度为基准，左右居中
  2.如果屏幕很高，就以宽度为基准，上下居中
  3.保持比例不变形
  

• 在 head 里用 JS设置 1rem=Wp/100
  Wp是页面有效宽度

2.实践：布局和适配

• 在网站下载设计图之后，在Photoshop中打开
  1.测量设计图尺寸工具：m 框选
  ——打开窗口–信息
  ——这样可以保证画布大小比例一致
  2.取色：取色工具

1.屏幕大小

• 获取设计图大小：m – ctrl+a
  1.全选获取设计图尺寸：一般都是 16:9
  ——2420:1361（px）
  2.全屏截图看电脑尺寸
  ——1920:1080（px）
• 调试大小
  1.选择：Responsive 响应式，然后自己给尺寸
  2.一般先给1：1
  
• 计算页面的宽高
  1.在 index.html 中的 head中 通过 script 标签内获得设备宽高
  2.通过下列公式计算得到 页面宽高 和 1rem 的大小
  ——简单来说就是
  ——保持 16:9 的比例，尽可能的以 宽/高 为基准，占满屏幕
  ——当设备宽度特别长时，以高度为标准，保持 16:9 计算页面宽度
  ——当设备高度特别长时，以宽度为标准，保持 16:9 计算页面高度
  ——1个字节(rem)大小始终等于页面有效宽度除以100

<script>
    const 设备宽度 = document.documentElement.clientWidth
    const 设备高度 = document.documentElement.clientHeight
    let 页面宽度
    if (设备宽度/设备高度 > 16/9){
		页面宽度 = 设备高度 * (16/9)
	}else{
		页面宽度 = 设备宽度
	}
	const 页面高度 = 页面宽度 / (16/9)
	const string = `<style>html{
		font-size:${页面宽度/100} px
	}</style>`
	document.write(string)
</script>

• 将页面宽高写到div上
  注意后面要加像素

<div id="root">
  <script>
    root.style.width = pageWidth + 'px'
    root.style.height = pageHeight + 'px'
  </script>
</div>

• 添加默认的CSS
  ——CSS控制左右居中
  ——JS控制上下居中

//在style.scss中，左右居中
#root{
  margin: 0 auto;
}
//在 index.html 中
root.style.marginTop = (clientHeight-pageHeight)/2 + 'px'

2.适配一个div

• 由于屏幕宽度是不固定的，因此div的宽度是不能写死的，要写成rem（字节大小）
• 步骤
  1.使用表示标尺辅助线，m 获取一个框的大小，记住大小像素
  2.创建一个div，其宽高为
  ——宽 = 测量宽度 / 设计稿宽度 * 100rem
  ——高 = 测量高度 / 设计高度 *100rem
  ——其中：页面宽度被换算为 100rem，因此对应宽高的单位也是 rem
  ——这样计算出来的宽高就能保证这个div永远占有效屏幕的固定比例
  3.每次这样计算有点烦，可以声明一个函数，放到 helper.scss 里面

@function px($n){
 @return $n/设计稿宽度 * 100rem
}
//使用
import helper
width:px(测量宽度)