レスポンシブデザインのページをPCビューの状態で印刷するためのメディアクエリの書き方

レスポンシブデザインのページは何もしないでいると
印刷するときにスマホビューになってしまいますが
PCで見たままを紙で出したいというご希望もあります

その解決法として　モバイルファーストのcssに限るやり方ですが

メディアクエリの記述に初めからprintを入れる

普段こうやって書きがちなところを

・・・
・・・
/*768px以上での表示*/
@media screen and  (min-width: 768px){
　　　　デスクトップ用のcssの内容
}

このようにprintを付けた記述に変えます

・・・
・・・
/*768px以上での表示*/
@media print, screen and  (min-width: 768px){
　　　　デスクトップ用のcssの内容
}

これで印刷のときに768px以上での表示が反映されます

コメント