Menu
What does media="screen" mean in the below css code?
<style type="text/css" media="screen">
451
screen: It is used to set the screen size of media query. The screen size can be set by using max-width and min-width. The screen size is differ from screen to screen. Example: This example use media query which works when the maximum width of display area is 400px.
Media queries can be used to check many things, such as: width and height of the viewport. width and height of the device. orientation (is the tablet/phone in landscape or portrait mode?)
CSS 2.1 defines the following media groups: continuous or paged. visual, audio, speech, or tactile. grid (for character grid devices), or bitmap. interactive (for devices that allow user interaction), or static (for those that do not).
What is the media-screen query? The @media screen query simply means that the query in question is intended for the color screens or devices that support a “screen” mode. Let's take an example: @media screen and (max-width:500px) The above query applies to screens with a maximum width of 500 pixels.
The goal of the media attribute is to allow you to specify different styles for different methods of display.
Most commonly I use this to have 2 sets of styles, 1 for display (screen) and 1 for printing (print)
Normally on the "print" css I'll do things like hide buttons, strip out extraneous images, ads, etc etc. Basically, make it 8.5x11 friendly.
137
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
