不同的分辨率,使用不同的CSS
一个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.
