cshtml 如何使用@media print 105
2个回答
展开全部
@("@")media
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
识别不了@media定义的CSS样式节解决的办法
在这里整理一下，
首先我们还是要从让IE支持media的的思路开始，首先JavaScript大将出马。
1. 项目css3-mediaqueries-js
该项目由Wouter van der Graaf发起（项目地址），旨在为了提供对于类似于IE 5+、Firefox 1+和Safari 2低版本浏览器的Media Queries支持，使用方式也很简单，直接引用脚本即可，当然现在基本上非IE的浏览器和IE9及以上版本已经原生支持Media Queries了，所以我们可以使用IE特有的条件注释处理代码引用，比如下面的代码示例：
<!-- css3-mediaqueries.js for IE less than 9 --><!--[if lt IE 9]><script src="//css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script><![endif]-->
遗憾的是在IE8浏览器下实际测试下来并没有效果。
2. 使用CSS Hack
IE各个版本对CSS都有一些怪异的支持模式，猜测是浏览器开发人员故意留下的，所以我们可以利用这种特性对IE浏览器进行CSS Hack。
Keith Clark在其博文《Moving IE specific CSS into @media blocks》提供了一种CSS Hack的新思路：
目标平台IE6或者IE7：
@media screen/9 {body { background: red; }}
目标平台IE6、7和8：
@media /0screen/,screen/9 {body { background: green; }}
目标平台IE8：
@media /0screen {body { background: blue; }}
目标平台IE8、9和10：
@media screen/0 {body { background: orange; }}
目标平台IE9和10：
@media screen and (min-width:0/0) {body { background: yellow; }}
使用示例
body {background: pink;} /* IE 6 and 7 fallback styles */@media all/9 { body { background: red; } h1 { color: yellow; }} /* IE 6 and 7 fallback print styles */@media print/9 { body { color: blue; } h1 { color: red; }}
大家可以访问《IE specific CSS rules and bypass filters using @media block hacks》来测试相关属性及获取支持情况。
3. 使用onbeforeprint和onafterprint方法
这里我再提供一个思路供大家参考，我们可以给body设置一个id，比如这样的：
<html> <head></head> <body id="MyPage"></body></html>
然后JavaScript代码可以这样写：
window.onbeforeprint = function() {document.getElementById("MyPage").className += " printstyle";};window.onafterprint = function() {document.getElementById("MyPage").className = document.getElementById("MyPage").className.replace ( /(?:^|/s)printstyle(?!/S)/g , '' );};
最后CSS代码类似如下：
.printstyle div { /* div style */ }.printstyle p { /* paragraph style */ }
这里利用了JavaScript触发的打印前和打印后的两个事件，对页面的class引用做出修改，这样就可以让不同的CSS样式表发生作用。
这里再说个题外话：onbeforeprint和onafterprint在IE和FireFox中支持良好，如果我们需要利用这两个事件设置其他的效果，这时发现这个事件属性不是跨浏览器的，比如WebKit家族的Chrome就不支持，参考《Detecting Print Requests with JavaScript》这里有个替代的办法：
var mediaQueryList = window.matchMedia('print');mediaQueryList.addListener(function(mql) {if (mql.matches) {console.log('onbeforeprint equivalent');} else {console.log('onafterprint equivalent');}});
兼容的写法如下：
(function() { var beforePrint = function() { console.log('Functionality to run before printing.'); }; var afterPrint = function() { console.log('Functionality to run after printing'); }; if (window.matchMedia) { var mediaQueryList = window.matchMedia('print'); mediaQueryList.addListener(function(mql) { if (mql.matches) { beforePrint(); } else { afterPrint(); } }); } window.onbeforeprint = beforePrint; window.onafterprint = afterPrint;}());
好了，扯多了，让我们继续回到IE浏览器打印上面，毕竟其他浏览器对页面打印支持良好。
参考微软MSDN的文章《Scripting Support for Web Page Printing》我们可以获取更多关于IE打印专属的特性，比如我们除了使用window.print()调用打印功能外还可以使用WebBrowser控件实现相关功能，比如下面的代码同样的实现了打印：
document.body.insertAdjacentHTML("beforeEnd","<object id=/"idWBPrint/" width=0 height=0 /classid=/"clsid:8856F961-340A-11D0-A96B-00C04FD705A2/"></object>");idWBPrint.ExecWB(6, 1);idWBPrint.outerHTML = "";
实际上对于IE来说ExecWB还有更多的功能实现，比如：
WebBrowser.ExecWB(6,1)// 打印WebBrowser.ExecWB(7,1)// 打印预览WebBrowser.ExecWB(8,1)// 打印页面设置WebBrowser.ExecWB(10,1) // 查看页面属性
在这里整理一下，
首先我们还是要从让IE支持media的的思路开始，首先JavaScript大将出马。
1. 项目css3-mediaqueries-js
该项目由Wouter van der Graaf发起（项目地址），旨在为了提供对于类似于IE 5+、Firefox 1+和Safari 2低版本浏览器的Media Queries支持，使用方式也很简单，直接引用脚本即可，当然现在基本上非IE的浏览器和IE9及以上版本已经原生支持Media Queries了，所以我们可以使用IE特有的条件注释处理代码引用，比如下面的代码示例：
<!-- css3-mediaqueries.js for IE less than 9 --><!--[if lt IE 9]><script src="//css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script><![endif]-->
遗憾的是在IE8浏览器下实际测试下来并没有效果。
2. 使用CSS Hack
IE各个版本对CSS都有一些怪异的支持模式，猜测是浏览器开发人员故意留下的，所以我们可以利用这种特性对IE浏览器进行CSS Hack。
Keith Clark在其博文《Moving IE specific CSS into @media blocks》提供了一种CSS Hack的新思路：
目标平台IE6或者IE7：
@media screen/9 {body { background: red; }}
目标平台IE6、7和8：
@media /0screen/,screen/9 {body { background: green; }}
目标平台IE8：
@media /0screen {body { background: blue; }}
目标平台IE8、9和10：
@media screen/0 {body { background: orange; }}
目标平台IE9和10：
@media screen and (min-width:0/0) {body { background: yellow; }}
使用示例
body {background: pink;} /* IE 6 and 7 fallback styles */@media all/9 { body { background: red; } h1 { color: yellow; }} /* IE 6 and 7 fallback print styles */@media print/9 { body { color: blue; } h1 { color: red; }}
大家可以访问《IE specific CSS rules and bypass filters using @media block hacks》来测试相关属性及获取支持情况。
3. 使用onbeforeprint和onafterprint方法
这里我再提供一个思路供大家参考，我们可以给body设置一个id，比如这样的：
<html> <head></head> <body id="MyPage"></body></html>
然后JavaScript代码可以这样写：
window.onbeforeprint = function() {document.getElementById("MyPage").className += " printstyle";};window.onafterprint = function() {document.getElementById("MyPage").className = document.getElementById("MyPage").className.replace ( /(?:^|/s)printstyle(?!/S)/g , '' );};
最后CSS代码类似如下：
.printstyle div { /* div style */ }.printstyle p { /* paragraph style */ }
这里利用了JavaScript触发的打印前和打印后的两个事件，对页面的class引用做出修改，这样就可以让不同的CSS样式表发生作用。
这里再说个题外话：onbeforeprint和onafterprint在IE和FireFox中支持良好，如果我们需要利用这两个事件设置其他的效果，这时发现这个事件属性不是跨浏览器的，比如WebKit家族的Chrome就不支持，参考《Detecting Print Requests with JavaScript》这里有个替代的办法：
var mediaQueryList = window.matchMedia('print');mediaQueryList.addListener(function(mql) {if (mql.matches) {console.log('onbeforeprint equivalent');} else {console.log('onafterprint equivalent');}});
兼容的写法如下：
(function() { var beforePrint = function() { console.log('Functionality to run before printing.'); }; var afterPrint = function() { console.log('Functionality to run after printing'); }; if (window.matchMedia) { var mediaQueryList = window.matchMedia('print'); mediaQueryList.addListener(function(mql) { if (mql.matches) { beforePrint(); } else { afterPrint(); } }); } window.onbeforeprint = beforePrint; window.onafterprint = afterPrint;}());
好了，扯多了，让我们继续回到IE浏览器打印上面，毕竟其他浏览器对页面打印支持良好。
参考微软MSDN的文章《Scripting Support for Web Page Printing》我们可以获取更多关于IE打印专属的特性，比如我们除了使用window.print()调用打印功能外还可以使用WebBrowser控件实现相关功能，比如下面的代码同样的实现了打印：
document.body.insertAdjacentHTML("beforeEnd","<object id=/"idWBPrint/" width=0 height=0 /classid=/"clsid:8856F961-340A-11D0-A96B-00C04FD705A2/"></object>");idWBPrint.ExecWB(6, 1);idWBPrint.outerHTML = "";
实际上对于IE来说ExecWB还有更多的功能实现，比如：
WebBrowser.ExecWB(6,1)// 打印WebBrowser.ExecWB(7,1)// 打印预览WebBrowser.ExecWB(8,1)// 打印页面设置WebBrowser.ExecWB(10,1) // 查看页面属性
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
