app界面设计切图工具(app界面设计切图工具怎么用)

  切图网在为客户做webapp制作的时候,通常都是固定宽度的,比如常见的webapp宽度的设计是640,750等,当我们拿到一个设计稿是 640宽的时候,那么我们切出来的网页也是 固定 640宽的,跟大家所认知的 100%自适应布局、流式布局等不同,所以经常会有客户会提出为什么不是100%宽度的呢,这个是不是会自适应不同宽度的手机下会有问题?答案是不会的, 在任何手机屏幕下,会以640宽度去铺满这个屏幕,所以是自适应的。

  固定宽度可以让网页布局更加好看,在pc上预览更加贴近设计稿原稿,而且对手机下访问没有任何影响,反而更加还原了设计稿的设计。所以切图网 www.Qietu.com更建议定宽方式来布局,如果大家有不同意见可以一起交流。下面介绍关于viewport定宽方式webapp切图的方法。

  --------------------------------------------------------------------

  以下摘自互联网.

  一般来说,我们实现布局自适应可以有以下几种方式:

  使用流动布局(fluidgrid)

  根据屏幕大小选择加载不同的CSS

  使用CSS的@media规则

  这里介绍的是如何让定宽网页在WebApp下(或者手机浏览器)实现自适应。例如,我们设计了一套宽度为640px的小页面,主要是用于手机查看,但是手机屏幕分辨率实在太多了,要适应每台手机,应该怎么办呢?首先,我们在head中加入:

  <head>

  <metaname="viewport"content="width=device-width,user-scalable=no">

  </head>

  这里表示viewport的宽度为匹配设备屏幕的宽度,且禁用缩放。涉及到两个概念:

  viewport元素

  devicePixelRatio:设备上物理像素和设备独立像素(device-independentpixels(dips))的比例。

  由于iphone手机和android4.0以上的手机支持修改viewport的width来改变页面的缩放情况,因此我们可以将width指定为页面设计的宽度,如此一来,你的页面正好充满viewport并全屏显示,而不会缩放。例如:

  <metaname="viewport"content="width=640px,user-scalable=no">

  但是对于android4.0以下的手机,不支持设置viewport的width,但是我们可以设置Android的另一参数target-densitydpi,从而达到相同的目的,计算target-densitydpi的公式如下:

  target-densitydpi=UI-width/device-width*window.devicePixelRatio*160;

  //UI-width:WebApp布局宽度

  //device-width:屏幕分辨率宽度

  于是,最终解决方案如下:

  <metaname="viewport"content="target-densitydpi=device-dpi,width=640px,user-scalable=no">

  $(function(){

  varDEFAULT_WIDTH=640,//页面的默认宽度

  ua=navigator.userAgent.toLowerCase(),//根据useragent的信息获取浏览器信息

  deviceWidth=window.screen.width,//设备的宽度

  devicePixelRatio=window.devicePixelRatio||1,//物理像素和设备独立像素的比例,默认为1

  targetDensitydpi;

  //Android4.0以下手机不支持viewport的width,需要设置target-densitydpi

  if(ua.indexOf("android")!==-1&&parseFloat(ua.slice(ua.indexOf("android")+8))<4){

  targetDensitydpi=DEFAULT_WIDTH/deviceWidth*devicePixelRatio*160;

  $('meta[name="viewport"]').attr('content','target-densitydpi='+targetDensitydpi+

  ',width=device-width,user-scalable=no');

  }

app界面设计切图工具(app界面设计切图工具怎么用),app界面设计切图工具(app界面设计切图工具怎么用),app界面设计切图工具,信息,浏览器,app,第1张

  //TODO:其他手机需要特殊处理的在下面

  });

  存在的问题:

  目前只测试android和ios/ipad手机

  android下使用firefox无法检测出android的版本,因此只能忽略firefox

  ps: 理论上可以利用枚举的方式将通用的手机分辨率记录起来,从而达到适应所有机型的效果。

1、本网站名称:源码村资源网
2、本站永久网址:https://www.yuanmacun.com
3、本网站的文章部分内容可能来源于网络,仅供大家学习与参考,如有侵权,请联系站长进行删除处理。
4、本站一切资源不代表本站立场,并不代表本站赞同其观点和对其真实性负责。
5、本站一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报
6、本站资源大多存储在云盘,如发现链接失效,请联系我们我们会第一时间更新。
源码村资源网 » app界面设计切图工具(app界面设计切图工具怎么用)

1 评论

您需要 登录账户 后才能发表评论

发表评论

欢迎 访客 发表评论