bootstrap之响应式布局

1.手动配置viewport

在HTML中:

 <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代码中:

 <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可以将不同的媒体特性组合在一起,即可以包含一个媒体类型和多个媒体表达式

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

上一篇:Android系统 小米/三星/索尼 应用启动图标未读消息数(BadgeNumber)动态提醒


下一篇:桌面图标未读消息(小米,sony,三星手机)