浅谈 web app 的几种适配方法感想

移动端越来越火,特别是基于微信开发的web,今天就来捣鼓捣鼓web app适配不同大小手机屏幕的几种方法以及感想,如有错误和不足,望大虾指正
1.响应式:
响应式比较出名的一个框架bootstrap,bootstrap是一个“ 组件化” 的框架,快速建站,但是组件化的框架都有一个缺点,设计受到限制,必须和组件类似,否则实现极其复杂,不断的样式层叠会让你崩溃,但是可以实现web page 到web app 的一步到位,节约成本,视觉体验较差,不推荐。


2.流式布局:
这是目前比较流行的一种布局,使用百分比布局,固定高度,可以适应各个大小的屏幕,但是问题来了,文字如何适应,当然可以用媒体查询适配,但是也只是粗糙的适配,除此之外,高度固定,在大屏幕手机看起来感觉就像是被拉长一样,对于精致的web app来说这是致命的。一个固执的设计师无法接受这样的缺陷。


3.viewport缩放: ps:简单粗暴,由于见识不足,还没发现这个方法的坑,有大虾发现望指教交流
  viewport缩放的做法就是固定宽度固定大小,然后用viewport进行自适应缩放。当然,想到缩放大家可能就会想到一个缺点,图片失真,但是这个问题非常容易解决,只要把设计稿切图片稍微切高清一点,图片大小并不会差别很大,这样就解决了,可能这也是我能发现的唯一一个缺点了。使用方法:

<meta name="viewport" content="width=320,maximum-scale=1.3,user-scalable=no">  //以320为基准,最大方法1.3倍,ps:简单,粗暴,有效,推荐


4。使用rem单位:
rem是一个相对单位,相对于html的font-size大小的相对单位,比如html的font-size:12px; 那么1rem就等于12px;width和height等等全部用rem来做单位,只需要改变html的font-size就可以改变整个网页所有元素的大小,包括字体高度宽度等。和viewport实现的效果一样,整体放大缩小使用方法:
font-size的初始值为12px;
适配某个屏幕的font-size值=(屏幕的宽度/font-size等于12时web的宽度)*12px;
ps:只需要监控window的change时间设计font-size就可以实现适配所有分辨率的手机,简单.粗暴.快捷。推荐
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值