column-count 栏目列数

column-width 栏目宽度

column-rule 栏目间隔线

column-gap 栏目距离

all 所有媒体

媒体种类

embossed 盲文打印机

braille 盲文触觉设施

projection 打印预览

print 手持设施

speech '听觉'类似的媒体种类

screen 彩屏设施

tv 电视

tty 不适用像素的设施

and

关键词

only only用来定某种特定的媒体种类

not not关键词是用来排除某种拟定的媒体种类

(max-width:600px)

媒体特质

(orientation:portrait) 竖屏

(max-device-width: 480px) 设施输出宽度

(-webkit-min-device-pixel-ratio: 2) 像素比

(orientation:landscape) 横屏

window.devicePixelRatio = 物理像素 / dips

devicePixelRatio 设施像素比

<link rel="stylesheet" href="css/index.css" media="print" />

样式引入

@media screen{ }

@import url("css/demo.css") screen;

<link rel=”stylesheet” media=”all and (orientation:landscape)”href=”landscape.css”>

<link rel=”stylesheet” media=”all and (orientation:portrait)” href=”portrait.css”>

样式引入

@media screen and (min-width:360px) and (max-width:500px) {}

<link rel="stylesheet" type="text/css" href="indexB.css" media="screen and (min-width: 600px) and (max-width: 800px)">

<link rel="stylesheet" type="text/css" href="indexA.css" media="screen and (min-width: 800px)">

手机

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

width [pixel_value | device-width(设施宽度)]

<meta name="viewport" content="" />

user-scalable 是不是允许手工缩放 （no||yes）

height [pixel_value | device-height(设施高度)]

minimum-scale 允许缩放的最小比率

initial-scale 初始比率

target-densitydpi [dpi_value | device-dpi | high-dpi | medium-dpi | low-dpi]

maximum-scale 允许缩放的最大比率

<meta name="viewport" content="" />

手机

height [pixel_value | device-height(设施高度)]

width [pixel_value | device-width(设施宽度)]

initial-scale 初始比率

user-scalable 是不是允许手工缩放 （no||yes）

maximum-scale 允许缩放的最大比率

minimum-scale 允许缩放的最小比率

target-densitydpi [dpi_value | device-dpi | high-dpi | medium-dpi | low-dpi]

希望以上内容可以解决您的问题！
如有其他问题欢迎大家一起交流学习！