bootstrap之响应式布局

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操作符，用于指定特定的媒体类型，可以用来排除不支持媒体查询的浏览器。