gridview自适应宽度（webview自适应高度）

大家好，我是讯享网，很高兴认识大家。
&lt;!DOCTYPE html&gt;
&lt;html&gt; &lt;head&gt; 讯享网&lt;meta charset=<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">utf-8</span><span style="color: rgba(128, 0, 0, 1)">"</span>&gt; &lt;meta name=<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">viewport</span><span style="color: rgba(128, 0, 0, 1)">"</span> content=<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">width=device-width, initial-scale=1</span><span style="color: rgba(128, 0, 0, 1)">"</span>&gt; &lt;title&gt;数据大屏scale&lt;/title&gt; 
 &lt;/head&gt; &lt;style type=“text/css”&gt;
讯享网 <span style="color: rgba(0, 128, 0, 1)">/*</span><span style="color: rgba(0, 128, 0, 1)"> 去除默认样式 </span><span style="color: rgba(0, 128, 0, 1)">*/</span> *<span style="color: rgba(0, 0, 0, 1)"> { margin: </span><span style="color: rgba(128, 0, 128, 1)">0</span><span style="color: rgba(0, 0, 0, 1)">; padding: </span><span style="color: rgba(128, 0, 128, 1)">0</span><span style="color: rgba(0, 0, 0, 1)">; } .container { width: 100wh; height: 100vh; background: orange; background: url(</span>/Users/hoge/Desktop/code/vueStudy/硅谷甄选/admin_template/project/src/views/screen/images/bg.png) no-<span style="color: rgba(0, 0, 0, 1)">repeat; background</span>-<span style="color: rgba(0, 0, 0, 1)">size: cover; } .box { width: 1920px; height: 1080px; background: red; transform</span>-<span style="color: rgba(0, 0, 0, 1)">origin: left top; position: </span><span style="color: rgba(0, 0, 255, 1)">fixed</span><span style="color: rgba(0, 0, 0, 1)">; left: </span><span style="color: rgba(128, 0, 128, 1)">50</span>%<span style="color: rgba(0, 0, 0, 1)">; top: </span><span style="color: rgba(128, 0, 128, 1)">50</span>%<span style="color: rgba(0, 0, 0, 1)">; } .top { width: 100px; height: 100px; background: hotpink; margin</span>-<span style="color: rgba(0, 0, 0, 1)">left: 50px; } .bottom { width: 100px; height: 100px; background: skyblue; margin</span>-<span style="color: rgba(0, 0, 0, 1)">left: 50px; margin</span>-<span style="color: rgba(0, 0, 0, 1)">top: 100px; } </span><span style="color: rgba(0, 128, 0, 1)">/*</span><span style="color: rgba(0, 128, 0, 1)"> 放大缩小的倍数从设备的中心点开始进行放大 </span><span style="color: rgba(0, 128, 0, 1)">*/</span> 
 &lt;/style&gt; &lt;body&gt; 讯享网&lt;!-- div box 为整个数据大屏的根节点，100vh 100wh的高度 --&gt; &lt;div <span style="color: rgba(0, 0, 255, 1)">class</span>=<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">container</span><span style="color: rgba(128, 0, 0, 1)">"</span>&gt; &lt;!-- 数据展示的区域 --&gt; &lt;div <span style="color: rgba(0, 0, 255, 1)">class</span>=<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">box</span><span style="color: rgba(128, 0, 0, 1)">"</span>&gt; &lt;div <span style="color: rgba(0, 0, 255, 1)">class</span>=<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">top</span><span style="color: rgba(128, 0, 0, 1)">"</span>&gt;我是祖国的&lt;/div&gt; &lt;div <span style="color: rgba(0, 0, 255, 1)">class</span>=<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">bottom</span><span style="color: rgba(128, 0, 0, 1)">"</span>&gt;老花骨朵&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; 
 &lt;/body&gt; &lt;/html&gt;
&lt;script&gt; <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 监控数据大屏的放大与缩小</span> let box = document.querySelector(<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">.box</span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(0, 0, 0, 1)">); box.style.transform </span>= `scale(${getScale()}) translate(-<span style="color: rgba(128, 0, 128, 1)">50</span>%<span style="color: rgba(0, 0, 0, 1)">)`; </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 计算缩放的比例</span> function getScale(w = <span style="color: rgba(128, 0, 128, 1)">1920</span>, h = <span style="color: rgba(128, 0, 128, 1)">1080</span><span style="color: rgba(0, 0, 0, 1)">) { </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 屏幕的宽|高/设计稿的宽|高</span> <span style="color: rgba(0, 0, 255, 1)">const</span> ww = window.innerWidth /<span style="color: rgba(0, 0, 0, 1)"> w; </span><span style="color: rgba(0, 0, 255, 1)">const</span> wh = window.innerHeight /<span style="color: rgba(0, 0, 0, 1)"> h; </span><span style="color: rgba(0, 0, 255, 1)">return</span> ww &lt; wh ?<span style="color: rgba(0, 0, 0, 1)"> ww : wh; } window.onresize </span>= () =&gt;<span style="color: rgba(0, 0, 0, 1)"> { box.style.transform </span>= `scale(${getScale()}) translate(-<span style="color: rgba(128, 0, 128, 1)">50</span>%<span style="color: rgba(0, 0, 0, 1)">)` } 
 &lt;/script&gt;
讯享网
gridview自适应宽度（webview自适应高度）

相关推荐
