HTML styles compatible with different device types

You can use the Media property to specify the style that is used for different media when you experience the effects that appear on the screen in your project and when you print them differently.

Media Property Value:

Value	Describe
Screen	computer screen display (default)
Tty	Telex typewriters and similar media using a wide character grid
Tv	TV type equipment (low resolution, limited scrolling capability)
Projection	Projector
Handheld	Handheld Devices (small screen, limited bandwidth)
Print	Print Preview mode/print page
Braille	Braille Method Feedback Device
Aural	Speech synthesizer
All	Suitable for all devices

Definition and usage

The media attribute specifies what device the linked document will be displayed on.

The media property is used to specify different styles for different media types.

Browser support

All browsers support media properties with a value of "screen", "Print", and "all".

　　tip: in full-screen mode, Opera also supports the "projection" attribute value.

How to use one:

Use Way two:
<style type= "Text/css" media= "All" >/*Common Styles*/         .        printpage{margin:0px Auto;} . Breakpage{page- Break-Before:always;} . Headerarea,. Gridarea,.            bottomarea{margin:5px 0px;        padding:0px; }        . Headerarea,.        Bottomarea{position:relative;overflow:hidden;} .        Headerelement{position:absolute; Display:flex;} .        HeaderElement Span{display:block;} . HeaderElement Span[name= ' ShowLabel ']{min-width:90px; margin-right:5px; text-Align:right;} . HeaderElement Span[name= ' Showvalue ']{flex:1;} table td{Overflow:hidden; White-Space:nowrap; }    </style> <style type= "text/css" media= "screen" >/*On- screen display style*/        . Headerarea[print= ' Headprint ']{display:none;} . Bottomarea[print= ' Bottomprint ']{display:none;} . Gridareatable[print= ' Tableprint ']{margin-top:0; border-top:0}. First-line-Print{display:none;} . Bottomarea[show= ' bottomshow ']{display: '} #btnTemplateDesign, #btnTemplateInit {display:none;} </style> <style type= "text/css" media= "print" >/*style when printing*/. Buttondiv{display:none;} . Headerarea[print= ' Headprint ']{display: '; page- Break-Before:always;} . Bottomarea[print= ' Bottomprint ']{display: ';} . Gridareatable[print= ' Tableprint ']{margin-top:10px; border-top:1}. First-line-print{display: ";} . Bottomarea[show= ' Bottomshow ']{display:none;} </style>
HTML styles compatible with different device types