PrintArea打印,局部DIV打印插件,依賴JQuery。
github:https://github.com/RitsC/PrintArea
當打印時需要臨時改變頁面布局,可以使用
@media print{
/*
* CSS
*/
}
打印時生效,打印完自動失效。
需要屏幕自適應,或多種分辨率可以使用
@media screen and
一、判斷媒體類型,引用不同的樣式表
<link rel=”stylesheet” media=”screen and (判斷條件)” herf=”需要調用的樣式表文件” />
通過設定屏幕的判斷條件,調用對應的css文件。該實例多用於整頁面不同風格的css調用與選取,使用該方法可能需要為一個頁面制作多份個css文件。
二、判斷媒體類型,執行不同的css樣式屬性
@media screen and (max-width:240px){
.box{width:200px;}
.title{color:red;}
}
上述實例可以出現在外部樣式表與內部樣式表中。直接在樣式表中以@media screen屬性標注媒體類型的判斷事件,在括號中寫出判斷條件為max-width:240px;該判斷的意思是屏幕寬度大於240px則執行大括號內的樣式屬性,如果小於240px則不執行。
前端開拓者做了@media screen相應的判斷嘗試,並在首頁與文章列表頁加入了@media screen的功能實例。判斷樣式書寫如下:
@media screen and (min-width:1200px){.post_box{width: 45%;float: left;}.c-con{height:140px;}}
一、判斷媒體類型,引用不同的樣式表
<link rel=”stylesheet” media=”screen and (判斷條件)” herf=”需要調用的樣式表文件” />
通過設定屏幕的判斷條件,調用對應的css文件。該實例多用於整頁面不同風格的css調用與選取,使用該方法可能需要為一個頁面制作多份個css文件。
二、判斷媒體類型,執行不同的css樣式屬性
@media screen and (max-width:240px){
.box{width:200px;}
.title{color:red;}
}
上述實例可以出現在外部樣式表與內部樣式表中。直接在樣式表中以@media screen屬性標注媒體類型的判斷事件,在括號中寫出判斷條件為max-width:240px;該判斷的意思是屏幕寬度大於240px則執行大括號內的樣式屬性,如果小於240px則不執行。
前端開拓者做了@media screen相應的判斷嘗試,並在首頁與文章列表頁加入了@media screen的功能實例。判斷樣式書寫如下:
@media screen and (min-width:1200px){.post_box{width: 45%;float: left;}.c-con{height:140px;}}
通過@media screen與width條件判斷,可以事先對頁面的寬度進行策划,然后根據不同的頁面寬度設定不同的css樣式,有效的控制web頁面在各種分辨率下的樣式表先。
摘自:http://www.frontopen.com/1221.html
通過這兩種CSS設置就可以打印出各種紙張的風格。
