首先，我在做公司的新的軟件頁面，后臺頁面，遇到的問題是當我引入百度的echarts.js，想使用他們的插件來實現(xiàn)圖表的功能，發(fā)現(xiàn)JS的信息描述必須放在他們div id的下面，否則會失效，這是問題一。

?

現(xiàn)在遇到的問題是解決不了關于圖表在PC端和在手機端顯示的問題，由于echarts.js的機制，他是需要在

<div class="am-panel am-panel-default am-u-sm-12"><div id="tfe" class="wutoo" style="min-width: 60rem; min-height:40rem;"></div> </div>

style里面進行寬度和長度的設置，也就是說，他在DOM里自己設置了寬度的DOM，這就是問題所在。

我開始尋找網(wǎng)上所有關于響應式頁面的問題，也就是CSS3新屬性，根據(jù)頁面寬度來判斷 例如 width的顯示問題，比如這樣

@media screen and (max-width:700rem){div#tfe{width: 6rem;height:4rem;}}@media screen and (max-width:1024rem){div#tfe{width: 60rem;height:40rem;

根據(jù)@media screen and來進行媒體判斷寬度，進而實現(xiàn)根據(jù)寬度調整DOM的樣式。

但是style是寫在 div里面的，他的權限高于在css type里的權限，也就是說，我這么寫并不能修改圖表的樣式。

?

JS的辦法，直接給寬度設定

網(wǎng)上有個給我推薦了這么一個方法，但是對我來說不適用，當然，這是一個辦法，能讓我短暫的解決移動端的樣式問題。

<script type="text/javascript">let height = window.innerHeight();document.docunmentElement.style.fontSize =(height/1080)*100+"px"</script>

還有一個方法是在百度的API文檔里找到他們專門在JS的方法，昨天嫌繁瑣，想找個偷懶的辦法，看來今天必須解決這個問題了

手機端的echarts能實現(xiàn)這個功能，也就是說百度已經(jīng)有了合適的方法，但是我現(xiàn)在就需要從這個地方去進行改變，周六日解決這個問題。

?

轉載于:https://www.cnblogs.com/alex-toni/p/5834513.html

總結

以上是生活随笔為你收集整理的关于页面图表相应式的问题，问题遇见时间，9月1日，到今天9月2日，尚未解决...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內容還不錯，歡迎將生活随笔推薦給好友。