再谈移动页面之移动开发方面新的小收获

上一个移动项目已经是前段时间的事了,这篇文章本想那时候就趁热写出来,但由于心绪各种波折,耽搁到现在。争取能够最大可能的去挖掘记忆把它们挖出来吧!~

一、再次强调分辨率
用一句话来色彩鲜明的描述一下这个问题,PC屏幕很大,iphone屏幕很小,可是前者的分辨率却可能没有后者那么大。这一点要特别的去注意,不然很容易钻进死胡同走不出来。

二、如何更好的在PC上调试移动端网页?
很多人觉得用谷歌浏览器可以模拟,这当然是一种方法,不过,还有另外的很直观也挺方便的方法,那就是把自己的浏览器“变成”手机屏幕,怎么变呢?直接调屏幕分辩率就是了,就这么简单。不过只是相似效果哦!(还要忍受所有图标都变大,眼睛会不舒服~)。肯定还有很多方法,再介绍一种吧,用DW,如果你对它的印象仅仅是用来编码,估计你还不知道这个功能,
再谈移动页面之移动开发方面新的小收获 - 灵感 - linggan
是的,它就在你所熟悉的浏览器预览按钮的前面,虽然这里列出来的分辨率可选项有限,还是能提供到一些参照性。
我相信还有很多更好的方法,如果您知道,请不吝赐教,定十分感谢!~

三、当心你所用的是“百分比”!

既然是百分比,那请告诉我决定了它的宽度和直觉效果的是什么?对,就是总宽,那就不要指望能一次性定义所有设备显示效果一样了,或许你之前对此一点都不怀疑,举个很简单的例子。
再谈移动页面之移动开发方面新的小收获 - 灵感 - linggan
再谈移动页面之移动开发方面新的小收获 - 灵感 - linggan
这两张图代码的区别是什么呢?呵呵,仅仅红色部分宽度不同而已(可能你会觉得怎么高度和字体大小也变了,好吧是我图截的不好,你们可以自己做试验),这里只是微调,如果是两款分辨率相差很多的设备,视觉效果还会相差很多。所以,一次定义打遍天下是不大可能了~

四、px、em、rem和62.5%
很多人或者会觉得px很常用,都知道是什么,也可能很多人用过em,肯定也有人会把em当做rem的性质去用了一段时间之后还没有察觉,而rem和62.5%就有着密切联系了。
em是按比例来的,那px是绝对单位么?如果你很迅速并且很响亮的回答:是的! 那恭喜你!

px是一个相对单位,相对的是设备像素(device pixel)。
比如iPhone 5使用的是Retina视网膜屏幕,使用2px x 2px的 device pixel 代表 1px x 1px 的 css pixel,所以设备像素数为640 x 1136px,而CSS逻辑像素数为320 x 568px。
比较正确的工作方式是:由设计师按照设备像素(device pixel)为单位制作设计稿。前端工程师,参照相关的设备像素比(device pixel ratio),进行换算以及编码。

那em呢?大家都知道字体的类型和大小是会继承的,而em是和当前元素的父元素去比较,非body所定义的根元素或浏览器默认大小。

如果想计算方便,那62.5%和rem就派上用场了,不必怕,为什么定义62.5%?——16*0.625=10!哇,好好的数字,是的,为了
方便,而rem则是相对于浏览器默认或者body定义字体大小。在body里定义了62.5%之后,你下面想定义多大的字体根本就用不着计算器了直接加个小数点后面跟rem就欧了!~不过要说的一点是,我们通常要照顾浏览器的兼容性去多写一些代码,以防在不支持的情况下死得很惨,想必大家都习惯了吧?~

五、媒体查询和js判断屏幕

要想真的适应各种屏幕,媒体查询是不可少的了,当然,有时候js对屏幕的判断也是比较有用的,如果一个页面其他方面都挺合适的,就因为部分内容的高度或者宽度显得很别扭,那你就有必要把它单独拿出来处理,而不是把整个页面都重新定义
,单独进行大小尺寸的调整,或者必要的时候可以只保留主要部分,次要的可以拿掉,可用第一,不能有明显的bug,不然你就玩完了!~

先这么多吧,脑细胞已经挂了不少了,以后有了会继续!~

灵感_idea wechat
欢迎关注我的公众号“灵感周末”,每个周末推送优质好文!
给加个蛋呗