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-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-480px){..};
使用,逗号可以分隔不同的媒体查询,相当于 or
@media screen and(max-980px),screen and(min-480px){..}
使用not操作符,用于排除特定的媒体类型,使用not操作符时一定要指定媒体类型,如果没有指定媒体类型,会永远返回假的值
@media not screen and (min-700px){...}
以上代码是先判断min-width然后才使用not
使用only操作符,用于指定特定的媒体类型,可以用来排除不支持媒体查询的浏览器。