1.手动配置viewport
在HTML中:
1 <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
以上代码的作用是：让viewport的宽度等于当前设备的宽度，同时不允许用户手动缩放，其中initial-scale=1.0和maximum-scale=1.0不是必须要添加的，需要根据用户需求，其中width=device-width是必须的，这样可以保证不会出现横向滚动条。
meta viewport的属性：
width：设置layout viewport的宽度，为正整数也可以为“device-width”的字符串；
height：设置layout viewpor的高度，很少用；
initial-scale：设置页面初始缩放比例，可以为小数；
maximum-scale：页面的最大缩放比例；
minimum-scale：页面的最小缩放比例；
user-scalable：是否允许用户缩放，值为yes或no，当不允许用户手动缩放时则不需添加minimum-scale和maximum-scale。
2.媒体查询
在HTML代码中：
1 <link rel="stylesheet" media="(max-width:480px)" href="mobile.css">
以上代码的意思是如果viewport的max-width=480px被满足了，则使用mobile.css的样式。
以上代码的功能还可以通过@media（max-width：480px）{...}来实现，将其放在被引入css样式的代码中。
3.媒体类型
all 用于所有设备；print用于打印机；projection用于方案展示，比如幻灯片；screen用于电脑显示器；等
4.媒体特性
参考：https://developer.mozilla.org/zh-CN/docs/Web/CSS/@media
例如：@media（orientation：portrait）{..}
aspect-ratio 可视化宽高比 例如：aspect-ratio：3/2 ； 3为宽比例 2为高比例 ，同时支持max和min；
device-aspect-ratio 设备可视化宽高比，用法同上；注意窗口不等于可视窗口
orientation 设备的使用方向 例如：orientation：landscape；landscape为水平方向，portrait为垂直方向；
height 可视化窗口高度 ；device-height 窗口高度（判断设备宽高），支持max和min；
width&0device-width用法同上；
4.操作符
使用and可以将不同的媒体特性组合在一起，即可以包含一个媒体类型和多个媒体表达式
1 @media screen and (min-width:480px){..};
使用，逗号可以分隔不同的媒体查询，相当于 or
@media screen and(max-width:980px),screen and(min-width:480px){..}
使用not操作符，用于排除特定的媒体类型，使用not操作符时一定要指定媒体类型，如果没有指定媒体类型，会永远返回假的值
@media not screen and (min-width:700px){...}
以上代码是先判断min-width然后才使用not
使用only操作符，用于指定特定的媒体类型，可以用来排除不支持媒体查询的浏览器。