Media type in CSS media type_html/css_WEB-ITnose-HTML Tutorial-php.cn

Table of Contents

The role of madia type

How to declare media type

Home

Web Front-end

HTML Tutorial

Media type in CSS media type_html/css_WEB-ITnose

Jun 24, 2016 am 11:58 AM

css media type media type

The role of madia type

First of all, we need to understand that the HTML pages we usually write may be displayed in different media types, such as they may be displayed on the screen or on paper print on. Then when the page is displayed in different media types, the required styles may be different. For example, generally, the font size of the page should be larger when displayed on the screen, and smaller when displayed on paper media. So how do you tell someone what media type a style is suitable for? This is achieved by declaring media type.

How to declare media type

Common media types are: all, screen, print, handled, speech, etc.;

Note that media types are case-sensitive and can only be Lowercase;

When the browser encounters an incorrect media type or a non-existent media type, it will ignore the existence of this media type, such as:

@media screen, 3D {  P { color: green; }}

Copy after login

Here, 3D is not If the media type exists, the browser will parse it as

@media screen {  P { color: green; }}

Copy after login

How to declare the media type for the style, see the following sample code:

&lt;span style=&quot;font-size:14px;&quot;&gt;&lt;head&gt;    &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;mystyle1.css&quot; media=&quot;screen,print&quot;&gt;&lt;span style=&quot;color:#ff6666;&quot;&gt;&lt;!--mystyle1样式表只应用于screen和print媒介--&gt;&lt;/span&gt;    &lt;style&gt;        @import url("mystyle2.css") screen,print;&lt;span style=&quot;color:#ff6666;&quot;&gt;/*mystyle2样式表只应用于screen和print媒介*/&lt;/span&gt;        @media screen {            body{font-size:14px;}   &lt;span style=&quot;color:#ff6666;&quot;&gt; /*在screen媒介中body字体为14px*/&lt;/span&gt;        }        @media print {            body{font-size: 10px;}  &lt;span style=&quot;color:#ff6666;&quot;&gt; /*在print媒介中body字体为10px*/&lt;/span&gt;        }        body{color: #ff0000;}&lt;span style=&quot;color:#ff6666;&quot;&gt;/*若样式没有声明媒体类型，相当于媒体类型为all，则此样式会应用于所有的媒体类型*/&lt;/span&gt;    &lt;/style&gt;&lt;/head&gt;&lt;/span&gt;

Copy after login

For more information about media types, please refer to the W3C official website: http://www.w3.org/TR/CSS21/media.html

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn