PrintArea打印,@media screen解決移動web開發的多分辨率問題,@media print設置打印的樣式


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設置就可以打印出各種紙張的風格。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM