精华内容
下载资源
问答
  • 如果a成立那么里面的控件如何做到按照屏幕分辨率等比缩放呢,比如1920*1080的开发环境放到1366*768等这种情况 我的想法是,既然屏幕分辨率和地图层级一样固定(大差不差),能不能把分辨率对应的控件宽高等比缩放以...
  • 自适应分辨率的UI设计规范和制作规范 基准分辨率 1024*768

    自适应分辨率的UI设计规范和制作规范

    基准设备:iphone 4s

    基准屏幕分辨率 : 960*640(ios) , 800*480(android), 854*480(android)

    基准参数 3.5inc + 330ppi

    标准高度: 768

    1.333(4:3) -> 1.8(16:9)

    UI Height = 768

    Design Size= 1024/768

    Phone Resource Size = 1024/768

    HD Resource Size = 2048/1536

    在这里面,最重要的是 Design Size的 Aspect Ratio 和 Resource Size 的像素值。


    关于设计标准:

    设计人员最需要关注的是最小/最大纵横比,并且在最小纵横比上进行设计工作

    原因:从窄屏可以通过逐个控件调整相对于父对象的Anchor, Stretch来自适应宽屏。反过来就不一定成立。

    实际操作的时候,设计人员有时候会从设备截屏,并以此图作为实际情况,在PS里对UI布局进行精细调整。

    以ipad3为例,设计尺寸是4:3。

    这个时候截屏的图的比率虽然正确,但截图图的像素是2048*1536。

    可以在PS里创建一张同等比率、高度为标准高度的图层,将截图缩放到标准高度大小。这时测量得到的像素值,就是NGUI里需要调整的像素值。

    关于制作标准:

    1、NGUI里UIRoot设置为FixedOnMobiles。
    2、Manual Height 的值设置为标准高度。
    3、 逐个控件精细、巧妙地调整相对于父对象的Anchor, Stretch来自适应宽屏。
    4、原则上能不缩放控件就不缩放控件,使用资源原始的尺寸。此项原则的执行程度是决定整个UI最终设备质量的关键因素之一。

    关于资源标准:

    原始资源的精度是决定整个UI最终设备质量的关键因素之二, 精度越高,UI资源也越大
    资源切图之前都有个原始图,制作规范是
    1、图像尺寸为最小纵横比 * 标准高度.
    2、图像dpi = 72. 使用PS默认值72,这个值是设备相关值。显示器的DPI一般在96左右,移动设备的PPI参考附录三和附录四。

    关于标准高度:

    常见的标准高度为:480,640,720, 768,1536

    480 是早期Android设备,一般用于3.5inc以下的屏幕。
    常见的分辨率为 800*480 和 854*480 ,占有率为16%和11%

    640 是4、4s、5、5s、5C的参数,截止于2014-7 
    占全部iphone的15%、29%、25%、29%、3%,话说国内Android是主流平台。

    720 是大屏Android设备,一般用于4inc以上的屏幕。
    常见的分辨率为1280*720 和 1920*1080, 占有率为38%和18%

    768 是iPad1和iPad Mini的分辨率,我猜测早期APP出的HD版资源以此为标准。
    1536 是iPad2以后的平板设备的分辨率

    选择的标准高度是 768,因为
    1、1024*768. 1024是UI Atlas使用的贴图大小,在制作Atlas时,切分三段式或九宫格也有天然的对齐优势。
    2、768精度完爆目前65%的Android手机和除了Plus之外的全部Iphone手机。
    3、720->768 资源大小增加13%,不算很大。但和目前实际情况的960*480相比,会增加28%。
    4、高精度设备上看着比640强得多。


    在设计、制作、资源三方面统一标准高度的重要性:

    统一的标准尺寸才可以让像素值一致,多人协作时的重要性不言自明。

    关于比率范围的选择:

    目前移动设备的比率据我所知为 1.1 - 1.9。
    主流设备在1.3333 - 1.79x
    为了避免在16:9大屏上做精确适配,直接涵盖到1.8,搞定各种代工厂的屏幕比率浮动。
    所以选择 1.33333 - 1.8

    屏幕超出标准的处理办法:

    凡是小于1.33的切上下两边.

    凡是大于1.8的切左右两边.

    Apple设备全部在此范围内,所以不用切。


    PS:为什么有同学反映我们的UI在Ipad上看着不好?是因为

    1、我们都在用高精度设备匹配低精度资源。(720/1536 匹配 640的资源).

    2、UI布局和原始资源大小有差距。(标准不统一造成的)

    附录1:ppi和屏幕型号的关系

    数据来源:http://blog.csdn.net/guozh/article/details/8954994

    "HVGA    mdpi"
    "WVGA   hdpi "
    "FWVGA hdpi "
    "QHD      hdpi "
    "720P     xhdpi"
    "1080P   xxhdpi "

    附录2:常见屏幕分辨率和纵横比

    数据来源:http://www.cnblogs.com/ganzhijie/archive/2011/08/18/2144216.html  (2011)

    4864401.104545
    5765201.107692
    128010241.25
    256020481.25
    512040961.25
    3202401.333333
    6404801.333333
    8006001.333333
    10247681.333333
    11528641.333333
    12809601.333333
    140010501.333333
    160012001.333333
    204815361.333333
    280021001.333333
    320024001.333333
    409630721.333333
    640048001.333333
    192014001.371429
    12808541.498829
    3204801.5
    4803201.5
    9606401.5
    160010241.5625
    320020481.5625
    640040961.5625
    7684801.6
    12808001.6
    14409001.6
    168010501.6
    192012001.6
    256016001.6
    384024001.6
    512032001.6
    768048001.6
    4002401.666667
    8004801.666667
    12807681.666667
    10245761.777778
    12807201.777778
    16009001.777778
    192010801.777778
    204811521.777778
    256014401.777778
    384021601.777778
    409623041.777778
    768043201.777778
    13667681.778646
    8544801.779167
    4322401.8


    附录3:安卓手机主流屏幕占有率

    数据来源: http://developer.android.com/about/dashboards/index.html#Screens



    附录4:Apple移动设备资料:

    数据来源: http://www.apple.com



    附录5:各种设备占有率

    数据来源互联网,时间2014-7


    展开全文
  • var bufferedBar = new
  • 滚动条区域大小自适应分辨率

    千次阅读 2016-11-29 10:04:25
    这样,就造成针对客户端不同的分辨率的显示器,滚动条的高度和宽度固定,对于分辨率小的机器,在页面上看不到滚动条,分辨率大的机器,滚动条右下方留出了很大的空白,这样造成页面不美观,影响用户体验。...

    需求描述

    报表在WEB页面输出的时候,行、列都很多,需要设置横向、纵向滚动条来固定报表表头。这样,就造成针对客户端不同的分辨率的显示器,滚动条的高度和宽度固定,对于分辨率小的机器,在页面上看不到滚动条,分辨率大的机器,滚动条右下方留出了很大的空白,这样造成页面不美观,影响用户体验。

     

    解决方法

    可以通过jsp调节参数实现。

    步骤一:

    1.在客户访问一个报表页面之前,加一个redirect.jsp页面,里面加入一个js函数,来获取客户端浏览器窗口的大小:

    <SCRIPT>

            var w = 0;   

            var h = 0;   

             //通过深入Document内部对body进行检测,获取浏览器窗口大小   

             if (document.documentElement  && document.documentElement.clientHeight && document.

    documentElement.clientWidth){   

                 h = document.documentElement.clientHeight;   

                 w = document.documentElement.clientWidth;   

             }else{

                w = 1259 ;

                h = 632 ;

             }     

    //重定向到报表所在的jsp页面,并且把客户端浏览器宽度、高度,作为参数

    //传递给报表所在的jsp页面     

           window.location.href=”<%=path%>/mis2/reportcenter/res/showReport.jsp?<%=param%>&w=”+w+”&h=”+h ;

     </SCRIPT>

     

    步骤二:

    在报表所在的jsp页面上(showReport.jsp),获取浏览器的宽度、高度。

    String w = request.getParameter(”w”) ;

           String h= request.getParameter(”h”) ;

     

    步骤三:

    修改发布标签

                  <report:html name=”report1″ reportFileName=”a.raq”

                         funcBarLocation=””

                         params=”<%=param.toString()%>”

                         needScroll=”yes”

                         scrollWidth=”<%=w%>” –动态设置滚动条宽度、高度

                         scrollHeight=”<%=h%>” 

           />

    展开全文
  • 下来是重点了,几乎所有的教程里都没介绍过自适应分辨率的问题,我理解对于3d游戏,除了ui部分,是不需要自适应的,因为无非就是视口显示的内容多少。而ui可以通过ugui实现自适应 那么问题来了,2d游戏,在不同...

    做这一组教程的目的有2个。

    1、为了分享一些个人心得经验,很多问题一直困扰这我,然而看了很多资料,并没有讲的非常明确的文章。所以写出来让大家少走弯路

    2、为了给自己留一个底以后用的时候方便查询

    这篇教程主要解决两个问题。我们一个一个来。

    如何在u3d里使用像素px单位。大家知道,u3d里的x,y,z默认是米。所以在导入素材的时候,在Inspector面板中要设置1像素等1单位。这样就能使u3d的单位变成像素了

     

     

    下来是重点了,几乎所有的教程里都没介绍过自适应分辨率的问题,我理解对于3d游戏,除了ui部分,是不需要自适应的,因为无非就是视口显示的内容多少。而ui可以通过ugui实现自适应

    那么问题来了,2d游戏,在不同分辨率设备上,如果不做处理,显示的内容差别会很大。所以需要做如下工作来使2d游戏只适应分辨率

    以上是主流设备分辨率,这里会有一个概念宽高比1.6就是16/10,就是16比10的分辨率,例如1280*800。

    那到底怎么做才能让u3d的2d游戏自适应分辨率呢。

     

    第一,由于相机的位置默认是在正中间,我们以1280*800作为基准分辨率来开发。所以我们移动相机到x640 y400。目的是让左下角的起始点变为x=y=0 方便开发。如上图1部分

     

    第二,也是重点,要设置相机的视口为正交模式,就是平行的视口,这样物体的大小就和z的距离无关了
    Orthograohic的Size是重点。这里要设置为高度的一半。由于我们是800高度为基准,这里我们写400就可以了,如上图2部分。

    这样做了以后,只要是在16:10分辨率的设备上,视口和元素都会等比例方法缩小,做到自适应分辨率

    上图3部分的图片宽度是400,占屏幕小三分之一

     

    经过以上设置游戏就可以在各种分辨率下正常显示了。当然还有一些瑕疵,就是比例不是16:10的情况下,上下或最有会有黑边。但是基本上不影响游戏性。

     

    大家可以拖动game浏览窗口大小自行观察自适应情况

     

     

     

     

    展开全文
  • div id="web_bg" style="position:absolute; width:100%; height:100%; z-index:-1"> <img style="position:fixed;" src="http://a.lanyes.org/bg1.jpg" height="100%" width="100%" /> </div&g...
    <div id="web_bg" style="position:absolute; width:100%; height:100%; z-index:-1">
    <img style="position:fixed;" src="http://a.lanyes.org/bg1.jpg" height="100%" width="100%" />
    </div>

     

    转载于:https://www.cnblogs.com/zjy954/p/5436525.html

    展开全文
  • charset=gb2312" language="java" import="java.util.*,com.iproject.examsys.web.to.*" %> <%@ taglib prefix="s" uri="/struts-tags" %> <% if(request.getSession(true).getAttribute...
  • web分辨率自适应

    2021-03-25 08:32:33
    先测试当前代码在不同屏幕分辨率下显示的情况,自行选择一个高度为界变更margin即可 if(height_layer>=1000){ $(".center").css('margin','10%'); }else { $(".center").css('margin','0'); }
  • Web自适应

    2017-04-29 22:52:39
    浅谈Web自适应 前言 随着移动设备的普及,移动web在前端工程师们的工作中占有越来越重要的位置。移动设备更新速度频繁,手机厂商繁多,导致的问题是每一台机器的屏幕宽度和分辨率不一样。这给我们在...
  • http://blog.sina.com.cn/s/blog_4ba291330101j9jp.html ...响应式Web设计:网页随分辨率自适应 (2013-01-29 16:34:43) 转载▼ 标签: ...web自适应 分辨率 全屏 it 分类: 设计心得 响应式W
  • web 自适应

    2019-06-10 11:29:45
    原文链接:http://web.jobbole.com/87267/ 首先在 header 标签中加: <meta name="viewport" content="width=device-width, initial-...文章目录宽度自适应完全自适应解决高保真标注与实际开发值比例问题媒体...
  • 首先最直接遇到的问题是,如果我们在css中将div的width和height写死的话,那么我们所遇到的问题就是当换一个不同的分辨率的显示器进行显示的时候,那么就会出现界面的样式不能适应当前分辨率的界面,所以,自适应是...
  • Unity Web自适应浏览器

    千次阅读 2015-07-20 16:33:40
    unity web自适应浏览器比我想象中要更简单,但是这里也只有更改最简单的东西实现了自适应,完全忽略unity web发布时定义的大小。 1.记事本打开html,将config里的设置改为:width:'100%',height:'100%' 2.将...
  • 但IE或分辨率调整后,仍会发生输入框和背景图错位的情况。请教一下大家,如何才能让背景图片也随IE和分辨率的变化而变化呢??请各位高手不吝赐教!!!!页面代码如下:login.jsp:if(request.getSession(true)....
  • 浅谈Web自适应

    千次阅读 2019-06-05 10:21:11
    特别说明:在开始这一切之前,请开发移动界面的工程师们在头部加上下面这条meta: <meta name="viewport" content="width=device-width, initial-...所谓宽度自适应严格来说是一种PC端的自适应布局方式在移动...
  • 网页自适应屏幕分辨率

    千次阅读 2014-03-05 16:54:46
    这是我写的一段让网页自适应屏幕分辨率的代码。贴出来,欢迎补充。 /** *让网页元素自适应所有的分辨率的脚本 *作者:wikies 1175551641@qq.com *时间:2014.02.05 */ /** *包说明: *应用背景:目前的网页在各个...
  • H5自适应屏幕分辨率大小

    千次阅读 2019-10-03 17:52:49
    说明: ①:H5自适应不同分辨率的设备,其实主要就一句 ,initial-scale=1,minim...
  • 最近公司要弄个app关键是没有web开发,而我有比较闲,那就扛枪上阵吧。 响应式布局,web端的?php我一直都是用tp框架,对于web首先想到的是bootstrap框架。只是简单了解过,没真正实践啊,bootstrap比我想象的要好用...
  • js实现自适应界面分辨率

    万次阅读 2018-01-30 17:16:22
    首先最直接遇到的问题是,如果我们在css中将div的width和height写死的话,那么我们所遇到的问题就是当换一个不同的分辨率的显示器进行显示的时候,那么就会出现界面的样式不能适应当前分辨率的界面,所以,自适应是...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 8,453
精华内容 3,381
关键字:

web自适应分辨率