This is the 15th day of my participation in the August Text Challenge.More challenges in August

Introducing way

1, directly referenced in head, in fact, media in CSS2 already exist, but his main role you do not pay attention to, compatible with all media and so on. You’ve probably seen it written like this:

 <link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
Copy the code

Now, to accommodate the screen size, we can write:

<link rel="stylesheet" media="screen and (max-width: 600px)" href="smallscreen.css" />
Copy the code

Load ‘SmallScreen.css’ at 600px maximum

@import = @import = @import = @import

<style type="text/css" media="screen"< span style = "max-width: 100%; clear: both; min-height: 1em"text/css" media="screen and (max-width: 600px)"> 
    @import url("css/style.css");
  </style>
Copy the code

That is, to load style.css under a particular screen

3. I most often use the third method, which is the following method:

  @media screen and (max-width: 600px) {selector {property: property value; }}Copy the code

Write the @Media screen control directly in style.

use

1, maximum Width Max Width

   <link rel="stylesheet" media="screen and (max-width:600px)" href="small.css" type="text/css" />
Copy the code

Small. CSS styles will be used to render Web pages when the screen is less than or equal to 600px.

2. Min Width

   <link rel="stylesheet" media="screen and (min-width:900px)" href="big.css" type="text/css"  />
Copy the code

The Web page will be rendered in big.css style when the screen is larger than or equal to 900px.

3. Use multiple Media Queries

  <link rel="stylesheet" media="screen and (min-width:600px) and (max-width:900px)" href="style.css" type="text/css" />
Copy the code

A Media Query can combine multiple Media queries; in other words, a Media Query can contain zero to more than one expression, which can contain zero to more than one keyword, and a Media Type. As shown above, use style.css styles to render web pages when the screen is between 600px and 900px.

4. Output Width of Device screen

<link rel="stylesheet" media="screen and (max-device-width: 480px)" href="iphone.css" type="text/css" />
Copy the code

The above code refers to the iPhone-css style for a device with a maximum width of 480px, such as display on an iPhone. Max-device-width refers to the actual device resolution

5, 4

<link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)" type="text/css" href="iphone4.css" />
Copy the code

The style above is written specifically for the iPhone4 mobile device.

6, the

  <link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css" type="text/css" /> 
  <link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css"  type="text/css" />
Copy the code

In most cases, Safari on a mobile device on an iPad is the same as Safari on an iPhone, except that the iPad declares different directions, such as in the example above, using portrait. CSS to render the page in portrait; Use landscape. CSS to render the page in landscape.

7, the android

 /*240px width */
  <link rel="stylesheet" media="only screen and (max-device-width:240px)" href="android240.css" type="text/css" />
  /*360px width */
  <link rel="stylesheet" media="only screen and (min-device-width:241px) and (max-device-width:360px)" href="android360.css" type="text/css" />
  /*480px width */
  <link rel="stylesheet" media="only screen and (min-device-width:361px) and (max-device-width:480px)" href="android480.css" type="text/css" />
Copy the code

We can use Media Query to provide specific styles for Android phones at different resolutions, so that we can solve the problem of page refactoring for Android phones at different screen resolutions.

8, the not keyword

 <link rel="stylesheet" media="not print and (max-width: 1200px)" href="print.css" type="text/css" />
Copy the code

The not keyword is used to exclude certain specified media types, in other words, devices that conform to expressions.

9, only keyword

<link rel="stylesheet" media="only screen and (max-device-width:240px)" href="android240.css" type="text/css" />
Copy the code

Only specifies a specific media type and can be used to exclude browsers that do not support media queries. In fact, only is often used to hide style sheets from devices that do not support Media Query but do support Media Type. The devices support Media Queries. Only does not exist. Devices that do not support Media Queries but also support Media types will not read styles because they read only instead of Screen. In addition, browsers that do not support Media Qqueries will not be adopted regardless of whether they support only.

If the Media Type is not specified in the Media Query, the default Media Type is all.

<link rel="stylesheet" media="(min-width: 701px) and (max-width: 900px)" href="medium.css" type="text/css" />
Copy the code

There is also the use of a comma (,) to indicate juxtaposition or to indicate or, as follows

<link rel="stylesheet" type="text/css" href="style.css" media="handheld and (max-width:480px), screen and (min-width:960px)" />
Copy the code

The style.css style in the code above is used on handheld devices with a width of 480px or less, or on devices with a screen width of 960px or more.