不同的解析度,使用不同的CSS

來源:互聯網
上載者:User

一個Portal site, 在1024 * 768 解析度情況下,顯示很大的捲軸. 1280 * 1024 正常顯示.

在這兩個解析度,我對比了一下,發現頁面字型太大,Menu之間 空格太多, 如果把字型 設定小一點 , 空格去掉.在1280下面又不好看.

思考之後,我決定寫兩個css.一個是在1024下面時候,一個在1280下面.

首先, 刪除現有的CSS.我用的Master 是BlueBland.master(不同的模板,有不同的主CSS),它用的主CSS是

<SharePoint:CssRegistration name="<% $SPUrl:~sitecollection/Style Library/~language/Core Styles/Bland.css %>" runat="server"/>

然後,在<Head>標記裡面加下面的代碼:

 <script type="text/javascript">
  var head = document.getElementsByTagName('HEAD').item(0);
  var style = document.createElement('link');
  if(window.screen.width<1025)
  {
     style.href = '/Style%20Library/en-US/Core%20Styles/Band.css';
  }
  else
  {
   style.href = '/Style%20Library/en-US/Core%20Styles/Band1280.css';
  }
  style.rel = 'stylesheet';
  style.type = 'text/css';
  head.appendChild(style); 
 </script>

Ok,儲存Master ,然後發布.這樣就在不同的解析度情況下用不同的CSS.

相關文章

Alibaba Cloud 10 Year Anniversary

With You, We are Shaping a Digital World, 2009-2019

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。