[{"data":1,"prerenderedAt":156},["ShallowReactive",2],{"content:\u002F2023\u002Fbig-screen":3,"surround:\u002F2023\u002Fbig-screen":150},{"id":4,"title":5,"body":6,"categories":124,"date":126,"description":82,"draft":127,"extension":128,"image":129,"meta":130,"navigation":132,"path":133,"permalink":129,"published":129,"readingTime":134,"recommend":129,"references":139,"seo":143,"sitemap":144,"stem":145,"tags":146,"type":148,"updated":129,"__hash__":149},"content\u002Fposts\u002F2023\u002Fbig-screen.md","大屏适配方案汇总",{"type":7,"value":8,"toc":112},"minimark",[9,13,17,30,36,39,42,47,50,54,57,60,63,66,89,93,96,99,103,106],[10,11,12],"h2",{"id":12},"确定页面容器的有效宽高",[14,15,16],"p",{},"以 1920 * 1080 的设计稿为例，当屏幕的宽高比：",[18,19,20,24,27],"ul",{},[21,22,23],"li",{},"等于 16:9 时，宽高都刚好占满屏幕",[21,25,26],{},"小于 16:9 时（说明设备较高），页面上下留白，左右占满并上下居中",[21,28,29],{},"大于 16:9 时（说明设备较宽），页面左右留白，上下占满并居中",[14,31,32],{},[33,34,35],"strong",{},"始终保持页面宽高比例为 16:9",[14,37,38],{},"具体代码实现：",[10,40,41],{"id":41},"适配方案",[43,44,46],"h3",{"id":45},"vw-方案","vw 方案",[14,48,49],{},"原理：按照设计稿的尺寸，将 px 按比例计算转为 vw 和 vh\n网页宽度 = 1920px = 100vw\n1px = 100vw \u002F 1920\n以一个宽 300px 和 200px 的 div 来说，其所占的宽高，以 vw 和 vh 为单位：\ndiv 宽 = 300 * (100vw \u002F 1920)\ndiv 高 = 200 * (100vw \u002F 1920)",[43,51,53],{"id":52},"transform-scale-方案","transform scale 方案",[14,55,56],{},"原理：利用 css 的 transform scale 对页面进行缩放。",[14,58,59],{},"如何缩放：",[14,61,62],{},"当屏幕宽高比 \u003C 16:9（宽度确定），我们需要缩放的比例是屏幕宽度 \u002F 设计稿宽度(1920)\n当屏幕宽高比 > 16:9（高度确定），我们需要缩放的比例是屏幕高度 \u002F 设计稿高度(1080)",[14,64,65],{},"如何居中：",[67,68,69,72,86],"ol",{},[21,70,71],{},"首先设置页面容器的基点为左上角transform-origin: 0 0;",[21,73,74,75],{},"利用绝对定位将图表定位到中间位置\n",[76,77,83],"pre",{"className":78,"code":80,"language":81,"meta":82},[79],"language-css","position: absolute;\nleft: 50%;\ntop: 50%;\n","css","",[84,85,80],"code",{"__ignoreMap":82},[21,87,88],{},"进行页面缩放时，将页面沿 x，y 轴各移动 -50% transform:translate(-50%,-50%)",[43,90,92],{"id":91},"rem-方案","rem 方案",[14,94,95],{},"原理：1rem = html font-size\n用 js 设置 html 的 font-size 为屏幕宽度 \u002F 100\n因此 1rem = html font-size = 屏幕宽度 \u002F 100，即 100rem = 屏幕宽度\n以一个宽 300px 和 200px 的 div 来说，其所占的宽高，以 rem 为单位：\ndiv 宽 = 300 * (100rem \u002F 1920)\ndiv 高 = 200 * (100rem \u002F 1920)",[14,97,98],{},"我的理解是，用 rem 是为了让 CSS 单位跟视口的宽高相关联，然而 vw 天生与视口宽度关联（100vw = 视口宽度），所以直接用 vw 就好了",[10,100,102],{"id":101},"适配图表字体间距位移等尺寸","适配图表字体、间距、位移等尺寸",[14,104,105],{},"echarts 的字体大小只支持具体数值（像素），不能用百分比或者 vw 等尺寸；\n可以编写一个工具函数，计算出当前屏幕宽度(innerWidth \u002F clientWidth)和默认设计宽度(1920)的比值，将原始的尺寸乘以该值",[107,108,109],"blockquote",{},[14,110,111],{},"注意：innerWidth 包含滚动条，clientWidth 不包含滚动条",{"title":82,"searchDepth":113,"depth":113,"links":114},4,[115,117,123],{"id":12,"depth":116,"text":12},2,{"id":41,"depth":116,"text":41,"children":118},[119,121,122],{"id":45,"depth":120,"text":46},3,{"id":52,"depth":120,"text":53},{"id":91,"depth":120,"text":92},{"id":101,"depth":116,"text":102},[125],"学习笔记","2023-07-14",false,"md",null,{"comments":127,"slots":131},{},true,"\u002F2023\u002Fbig-screen",{"text":135,"minutes":136,"time":137,"words":138},"3 min read",2.78,166800,556,[140],{"title":141,"link":142},"一次搞懂数据大屏适配方案 (vw vh、rem、scale)","https:\u002F\u002Fjuejin.cn\u002Fpost\u002F7163932925955112996",{"title":5,"description":82},{"loc":133},"posts\u002F2023\u002Fbig-screen",[147],"大屏","tech","7Mb4zhqRbH6j09GHv36ARgEpniAqcjtwOo1aBFP8aEE",[151,129],{"title":152,"path":153,"stem":154,"date":155,"type":148,"children":-1},"CSS命名规范-BEM（转载）","\u002F2023\u002Fcss\u002Fbemcss","posts\u002F2023\u002Fcss\u002Fbemcss","2023-07-07",1793699837885]