长度单位vw vh vm手机屏幕适配及应用场景
2017-03-17 00:00
148 查看
长度单位vw vh vm手机屏幕适配及应用场景
vw:viewpoint width,视窗宽度,1vw等于视窗宽度的1%。
vh:viewpoint height,视窗高度,1vh等于视窗高度的1%。
[b][b][b][b][b][b][b]vmin/vm [/b][/b][/b]相对于视口的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vmin(即vm)。[/b][/b][/b][/b]
vmin:vw和vh中较小的那个。
vmax:vw和vh中较大的那个。
重要的运用场景:
活动页,分享等单页面:
p{font-size:5vm;}
兼容性测试基础环境为:windows系统;IE6-IE10, Firefox6.0, Chrome13.0, Safari5.1, Opera11.51
vw, vh, vmin, vmax:IE9+局部支持,chrome/firefox/safari/opera支持,iOS safari 8+支持,Androidbrowser4.4+支持,chrome for android39支持
vw:viewpoint width,视窗宽度,1vw等于视窗宽度的1%。
vh:viewpoint height,视窗高度,1vh等于视窗高度的1%。
[b][b][b][b][b][b][b]vmin/vm [/b][/b][/b]相对于视口的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vmin(即vm)。[/b][/b][/b][/b]
vmin:vw和vh中较小的那个。
vmax:vw和vh中较大的那个。
重要的运用场景:
.square{ width: 30vw; height: 30vw; }
活动页,分享等单页面:
body{ height:100vh; }
p{font-size:5vm;}
兼容性测试基础环境为:windows系统;IE6-IE10, Firefox6.0, Chrome13.0, Safari5.1, Opera11.51
vw, vh, vmin, vmax:IE9+局部支持,chrome/firefox/safari/opera支持,iOS safari 8+支持,Androidbrowser4.4+支持,chrome for android39支持
相关文章推荐
- 视区相关单位vw, vh..简介以及可实际应用场景
- 视区相关单位vw, vh..简介以及可实际应用场景
- 视区相关单位vw, vh..简介以及可实际应用场景
- 视区相关单位vw, vh..简介以及可实际应用场景
- rem和em和px vh vw和% 移动端长度单位
- css单位介绍em ex ch rem vw vh vm cm mm in pt pc px
- CSS长度单位:vh、vw、vmin、vmax、em、rem、ex、ch、px
- 浅析rem和em和px vh vw和% 移动端长度单位
- PopupWindow全屏显示以及适配不同手机屏幕之 应用实例 更换头像,拍照,相册选取附带动画效果
- android手机屏幕密度的计算及dp、px、sp单位的转换,屏幕适配相关
- android 手机屏幕适配 &分辨率适配
- Android应用如何适配不同分辨率的手机
- 取得手机屏幕大小/style的应用技巧
- Android平板上开发应用的一点心得——精确适配不同的dpi和屏幕尺寸
- android应用如何适配于多个分辨率的手机
- Unity3d 手机屏幕自动适配
- 男人不如手机?Galaxy Note II屏幕尺寸超越丁丁平均长度
- Android平台根据分辨率计算屏幕尺寸,基于物理尺寸来验证手机和平板应用合并的可行性
- CSS3自适配手机屏幕
- Android基础教程(四)之-----取得手机屏幕大小DisplayMetrics的应用