当前位置: 金莎娱乐场app下载 > 金莎娱乐app > 正文

这种资源有限的移动设备上设计网页的的第一原

时间:2020-02-25 02:59来源:金莎娱乐app
(注意,每个括号的数值只取整数部分,X和Y越相近越好,并且应在4位小数以内,更精确下去就没什么用了。) 33.3 +33.4%这样的分法也不错,加起来能够凑到100%,选项卡之间0.1%的宽度

(注意,每个括号的数值只取整数部分,X和Y越相近越好,并且应在4位小数以内,更精确下去就没什么用了。)

  • 33.3 + 33.4%这样的分法也不错,加起来能够凑到100%,选项卡之间0.1%的宽度差,应该是0.3-0.4像素,可以忽略。好,让我们看看这样的分法结果如何?

金莎娱乐场app下载 1

基本上就是2X+Y=1,而通过程序运算,我们发现找不到这样一组4位以内的数值能同时满足Firefox和Safari的条件,好在目前在高端机的网页上,我们还不需要兼容Firefox——如果有谁知道-moz或-webkit设置宽度的私有属性,请告诉我,可以分别给他们定义宽度。]

public class test1 { private static float decimal = 0.0001f;public static void main(String[] args) { int count = 1; int result_x = 0; int result_y = 0; for (float x = 0.33f; x < 0.34f; x = x + decimal) { for (float y = 0.33f; y < 0.34f; y = y + decimal) { if (((Math.floor(312 * x) + Math.floor(312 * x) + Math.floor(312 * y)) == 312) && ((Math.floor(472 * x) + Math.floor(472 * x) + Math.floor(472 * y)) == 472) ) { System.out.printf("x==>%.4f,y==>%.4fn" ,x, y); } } } System.out.println("result_x==>" + result_x + ",result_y==>" + result_y);}}

所有浏览器–每个浏览器都可以禁用缓存,但禁用的方式不一致。

FireFox、ie下,如上图,非常和谐。

(注意,每个括号的数值只取整数部分,X和Y越相近越好,并且应在4位小数以内,更精确下去就没什么用了。)

在Opera中,要清除缓存的话,点击网络选项卡,选择网络选项中的第二个选项卡,选择其中的第一个选项。在Safari中,在菜单栏中的“开发”菜单中禁用缓存。

好吧,相信万能的机器,总是什么都能做出来的。运行以上程序,一下就输出了几百组结果,X取值从-33.06%—33.47%,Y从33.48%—33.4%,从中选出最接近的1组:

让我们先来看看这些选项卡的html代码结构:

*译注:增加了这个截图,以前我仅仅以为那个方块是用来展示颜色的,囧,根本不知道它还能点击——又多了一个能省略掉计算器的功能。

以上取值是在Firebug的“布局”模块下看到的高度值;而在“计算出的样式”下看到的,是跟表1接近的数值,上表中的值可以近似看成是计算值四舍五入后的一个整数——但Firefox的实际表现跟计算值还是有关系的,有时即使这个布局值已满足了,仍然会出问题。

还是以3个选项卡为例,假设我们的划分法是前2个选项卡宽度一样,最后一个跟前2个稍微有点差别——我们已经看出来,想找到三个完全相等的整数凑起来等于472是不可能的了。

*译注:这又不是Bot,O_O作者应该是指直接在控制台输入表达式:456/3

这时,有一个弱弱的声音在问:但是,请问,请问,我们每次都要这么痛苦么!

以上取值是在Firebug的布局模块下看到的高度值;而在计算出的样式下看到的,是跟表1接近的数值,上表中的值可以近似看成是计算值四舍五入后的一个整数——但Firefox的实际表现跟计算值还是有关系的,有时即使这个布局值已满足了,仍然会出问题。

金莎娱乐场app下载 2

理想情况下,这种划分的结果是怎样的呢?让我们看这个表格:

.tab3 li:not(:last-child){float:left;width:33.33%;}.tab3 li:last-child{margin-left:66.66;}

DOMContentLoaded代表的那条线表示当浏览器已经完成解析文档(但其他资源比如图片和样式表可以还没下载完成),而load事件代表的线表示所有资源都已经加载完成了。

.tab3 li:not{float:left;width:33.33%;}.tab3 li:last-child{margin-left:66.66%;}

但是,浏览器实际是如何解析这个百分比的呢?通过Firebug查看Firefox下这个宽度的被计算出的值是:

在Firebug中,延迟被标记为紫色,并且用的术语是“Waiting”。悬停到时间线上同样能获得各方面时间消耗的详细信息。

对Safari浏览器,要满足的是:

金沙娱城手机app下载,哈哈,好像就不那么完美了。在选项卡数量为3、5个时,我们发现选项卡比下面的内容宽度短了两三个像素,这——是为什么呢~~?–小沈阳问。

文章出自:长天之云的博客

金莎娱乐场app下载,近期刚做的一个手机项目,需求方要求选项卡在窄屏和宽屏自适应,刚开始觉得挺纠结的,后面结合网上的一些资料自己研究了下,分享给大家:

其中,包围在最外面的div.w320,规定的是这个模块的宽度,这里模仿iPhone竖屏时的宽度320px—横屏时就是w480。这里我们给页面两边留的空隙是4px,有效内容宽度是312px。

所有浏览器–.NET开发中的一个常用工具,“监视”允许通过脚本选项卡右上栏的方便的区域来观察一组变量。要观察一个变量很简单,只要输入它的名字,“监视”将保持它最新的值。

这时,我们的选项卡宽度就不能是一个固定值,而要使用百分比了。对于2、4、5这样能被100%整除的数,这个取值很容易,每个选项卡的宽度就是50%、25%、20%;对于3、6、7这样不能整除的数,应该怎么办呢?哈,幸好我们还有一点数学基础,以一组3个选项卡为例:33.3%+33.3%+33.4%这样的分法也不错,加起来能够凑到100%,选项卡之间0.1%的宽度差,应该是0.3-0.4像素,可以忽略。好,让我们看看这样的分法结果如何?

现在要做的就是要找到一个或几个合适的值,按照这种计算方法能使几个选项卡宽度之和等于总宽度——同时在纵向(312px)和横向(472px)情况下。

实时编辑和执行JavaScript代码

还是以3个选项卡为例,假设我们的划分法是前2个选项卡宽度一样,最后一个跟前2个稍微有点差别——我们已经看出来,想找到三个完全相等的整数凑起来等于472是不可能的了。

我们还是主要来看iPhone和Android上的自带浏览器又是怎么解析的。通过Safari和Chrome自带调试工具,我们看到这两种webkit内核浏览器对这一宽度的解析是一样的:

保持

但是,浏览器实际是如何解析这个百分比的呢?通过Firebug查看Firefox下这个宽度的被计算出的值是:

在手机,这种资源有限的移动设备上设计网页的的第一原则是什么?那就是充分利用屏幕。我们的网页两边不再会有几十、几百像素的空隙—取而代之的是仅仅几个像素,在这个例子里,这个数值是4——当然你也可以取其他数值,但是问题还是同样会存在的;随着方向改变,手机屏幕的宽度也在切换,你的页面内容应该自适应这种变化,仍然充满整个屏幕。

(感谢Jason Wilson提供此项信息)

Safari和Chrome下:

.w320{width:312px; padding:0 4px; margin:5px 0;}

Opera – Opera“文档”(Documents)选项卡下边直接有个按钮可以做这件事:

我们还是主要来看iPhone和Android上的自带浏览器又是怎么解析的。通过Safari和Chrome自带调试工具,我们看到这两种webkit内核浏览器对这一宽度的解析是一样的:

在经历了这一番死去活来的推理计算后,一直觉得如鲠在喉,心有不甘。突然有一天,脑子里灵光一现,柳暗花明又一村…让我们换个思路吧:一定要给每个选项卡定义精确宽度么?能不都定义么?如果我们只定义其中前N-1个,而让最后一个自适应会如何?像这样:

  • S (Mac,Cmd+S)保存。

其中,包围在最外面的div.w320,规定的是这个模块的宽度,这里模仿iPhone竖屏时的宽度320px—横屏时就是w480。这里我们给页面两边留的空隙是4px,有效内容宽度是312px。

接下来,包围这组3个选项卡的ul.tab3,定义了每个选项卡的宽度:(再次感谢iPhone,感谢CSS3,让我能用上:last-child这样的高级选择器。)

Chrome–在Chrome中,你可以直接在页面中进行编辑,并不需要使用单独的编辑器或者重新加载页面。简单地双击你想要改变代码,然后输入新的代码!按Ctrl

  今日要闻 直播大厅 今日要闻  

解这样的方程式,有点类似哥德巴赫猜想了,好像有必要写个程序来搞定。幸好这一次,我们有强大的笨笨熊童鞋,写出了这样一段程序:

Firefox,Opera –在Firebug的HTML选项卡中,按下小键盘上的星号(*)键就可以展开选定的所有元素。默认不会展开脚本标记和样式标记,除非你同时按下Shift

x=33.47%y=33.48%

.tab3 li{float:left;width:33.47%;}.tab3 li:last-child{width:33.48%;}

FireFox、ie下,如上图,非常和谐。

改变frame

让我们先来看看这些选项卡的html代码结构:

对Safari浏览器,要满足的是:

轮换颜色定义类型

接下来,包围这组3个选项卡的ul.tab3,定义了每个选项卡的宽度:(再次感谢iPhone,感谢CSS3,让我能用上:last-child这样的高级选择器。)

金莎娱乐场app下载 3

页面所有运行脚本安身的地方,这个选项卡包含了一个下拉菜单,让你可以选择你想要调试的脚本。

规则的宽度–比如150px、300px…合适的选项卡数量:2个、4个…使这些选项卡都恰好能平分宽度,在各大浏览器中完美呈现。

金莎娱乐场app下载 4

  • * 键。

在经历了这一番死去活来的推理计算后,一直觉得如鲠在喉,心有不甘。突然有一天,脑子里灵光一现,柳暗花明又一村…让我们换个思路吧:一定要给每个选项卡定义精确宽度么?能不都定义么?如果我们只定义其中前N-1个,而让最后一个自适应会如何?像这样:

大功告成!iPhone和Android自带浏览器都表现完美了。[再提一点,对Firefox浏览器要满足的条件如下:(312*X)

DOMContentLoaded 和load事件触发

大功告成!iPhone和Android自带浏览器都表现完美了。

从网页选项卡诞生的那一天起,凭借其紧凑的布局和方便的切换方式,就成为各大门户必用的设计元素。让我们来看看这些五花八门的选项卡吧

金莎娱乐场app下载 5

哈哈,好像就不那么完美了。在选项卡数量为3、5个时,我们发现选项卡比下面的内容宽度短了两三个像素,这——是为什么呢~~?–小沈阳问。

金莎娱乐场app下载 6

Firebug, Internet Explorer, Opera – 你需要选择开发工具右手侧面板中的“布局”(Layout)选项卡,或在右侧边栏中的“计算样式”(computed styles)中查看。

.tab3 li{float:left;width:33.3%;}.tab3 li:last-child{width:33.4%;}

<div> <ul> <li><a href="#">今日要闻</a></li> <li><a href="#">直播大厅</a></li> <li><a href="#">今日要闻</a></li> </ul> <div></div></div>

英文出自:andismith.com

[再提一点,对Firefox浏览器要满足的条件如下:

  • (312*X)+(312*Y)=312,同时(472*X) + (472*X)+(472*Y)=472,基本上就是2X+Y=1,而通过程序运算,我们发现找不到这样一组4位以内的数值能同时满足Firefox和Safari的条件,好在目前在高端机的网页上,我们还不需要兼容Firefox——如果有谁知道-moz或-webkit设置宽度的私有属性,请告诉我,可以分别给他们定义宽度。]这样就行啦!

重用JavaScript命令

现在要做的就是要找到一个或几个合适的值,按照这种计算方法能使几个选项卡宽度之和等于总宽度——同时在纵向情况下。

好了,给CSS设置:

使用console.log同时输出多个值和对象

其实这个问题大家应该都会遇到吧,希望看完能受益匪浅,再次也感谢腾讯MXD。

(312*X) + (312*X)+(312*Y)=312,同时(472*X) + (472*X)+(472*Y)=472

元素选项卡

忽然有一天,当你的网站需要移植到iPhone,或是其他移动设备上,你得在一个宽度是320px–并且随时有可能切换为480的屏幕上设计这样一组切换卡时,问题就来了。

实事再次证明,一个好的开发利器对我们的工作帮助是巨大的。从这组数据我们发现,原来Safari和Chrome对这个宽度的取值跟Firefox是不一样的,并非四舍五入的取法,而是直接忽略小数部分,保留整数部分!宽度为33.3%的选项卡比实际估计值少了1px,这就是上图中选项卡宽度比内容宽度短了几个像素的原因。事实上,在查看了5个选项卡后,发现也存在同样的问题。

在IE中,延迟被标记成黄色,并且悬停到时间线上也会取得更多信息。

在手机,这种资源有限的移动设备上设计网页的的第一原则是什么?那就是充分利用屏幕。我们的网页两边不再会有几十、几百像素的空隙—取而代之的是仅仅几个像素,在这个例子里,这个数值是4——当然你也可以取其他数值,但是问题还是同样会存在的;随着方向改变,手机屏幕的宽度也在切换,你的页面内容应该自适应这种变化,仍然充满整个屏幕。

金莎娱乐场app下载 7

金莎娱乐场app下载 8

.w320{width:312px; padding:0 4px; margin:5px 0;}

.tab3 li{float:left;width:33.47%;}.tab3 li:last-child{width:33.48%;}

在IE9中,点击选中脚本旁边的工具图标来格式化JavaScript代码:

世界顿时简单了!Firefox、Safari一次被搞定——ie下用,稍作修改即可。不论5个、7个,一个道理:前N-1个取最接近平均值的百分比,最后一个自适应,填充剩余空间。

理想情况下,这种划分的结果是怎样的呢?让我们看这个表格:

金莎娱乐场app下载 9

实事再次证明,一个好的开发利器对我们的工作帮助是巨大的。从这组数据我们发现,原来Safari和Chrome对这个宽度的取值跟Firefox是不一样的,并非四舍五入的取法,而是直接忽略小数部分,保留整数部分!宽度为33.3%的选项卡比实际估计值少了1px,这就是上图中选项卡宽度比内容宽度短了几个像素的原因。事实上,在查看了5个选项卡后,发现也存在同样的问题。

规则的宽度–比如150px、300px…合适的选项卡数量:2个、4个…使这些选项卡都恰好能平分宽度,在各大浏览器中完美呈现。

金莎娱乐场app下载 10

其实从网页选项卡诞生的那一天起,凭借其紧凑的布局和方便的切换方式,就成为各大门户必用的设计元素。

金莎娱乐场app下载 11

Firefox中叫做“HTML”选项卡,Opera中叫做“文档”(Documents)选项卡。元素(Elements)选项卡显示的是当前状态的DOM。在IE中,你需要点击“刷新”按钮才能查看当前的DOM。

.tab3 li{float:left;width:33.3%;}.tab3 li:last-child{width:33.4%;}

Chrome,Firefox–如果你知道当某个特定部分的DOM改变时页面崩溃了,或者你仅仅想找出是哪段脚本改变了某个元素的属性,Chrome和Firefox都提供了有效设置断点的方式来找出这个元凶。简单地选中你要监视的元素,右键点击它,选择中断条件:

金莎娱乐场app下载 12

Firebug中,点击右侧的Style选项卡旁边的带箭头菜单,然后选择你想要编辑的状态。

好吧,相信万能的机器,总是什么都能做出来的。运行以上程序,一下就输出了几百组结果,X取值从-33.06%—33.47%,Y从33.48%—33.4%,从中选出最接近的1组:

金莎娱乐场app下载 13

忽然有一天,当你的网站需要移植到iPhone,或是其他移动设备上,你得在一个宽度是320px–并且随时有可能切换为480的屏幕上设计这样一组切换卡时,问题就来了。

网络(Network)选项卡显示你页面加载的所有文件资源。大多数情况,你打开它之后,要刷新一下页面才能显示出你想看的信息。在Firebug中,选项卡的名称是“Net”。对于IE,直到版本9以后才有它。

Safari和Chrome下:

Chrome和Safari中,简单地选择脚本选项卡,通过下拉菜单选择相关的脚本,然后点击底部面板的”{}”(pretty print)图标:

世界顿时简单了!Firefox、Safari一次被搞定——ie下用,稍作修改即可。不论5个、7个,一个道理:前N-1个取最接近平均值的百分比,最后一个自适应,填充剩余空间。正所谓大巧无术、大道至简,换一种思路,海阔天空。

直接复制你的代码到剪贴板

x=33.47%y=33.48%

Windows中,在浏览器中可以按下Ctrl + Shift + Delete键调用消除缓存对话框。

这时,我们的选项卡宽度就不能是一个固定值,而要使用百分比了。对于2、4、5这样能被100%整除的数,这个取值很容易,每个选项卡的宽度就是50%、25%、20%;对于3、6、7这样不能整除的数,应该怎么办呢?哈,幸好我们还有一点数学基础,以一组3个选项卡为例:33.3%

你可以用console.warn()输出警告消息;用console.error()输出错误消息;用console.info()输出信息消息。你也可以使用console.assert()来检测表达式为true或false。

这时,有一个弱弱的声音在问:但是,请问,请问,我们每次都要这么痛苦么!好,问的好!

如果你有更多的“秘密”,请自在地在文章末尾留言——一旦我确认了,我会及时更新这篇文章。我也很想知道你哪个开发控制台是你首要的开发工具,也可以直接在下面留言。

编辑:金莎娱乐app 本文来源:这种资源有限的移动设备上设计网页的的第一原

关键词: