关于apicloud 自适应

一方秋水

之前开发移动端 都是用js 控制根字体大小 页面使用rem单位布局，看到apicloud 上有说 可以直接使用 px 单位进行布局？ 如果可以的话，请问一下要注意什么呢？论坛上逛了一圈 也就看到 说 建议ui 给 720宽的图 可以直接测量尺寸后 直接代入使用，还有一个就是 高度 要除以2之后才能代入？ 有没有大神愿意给新手科普一下..感激不尽！！！

heikezy

APICloud里的像素准确说是所有网页的像素(Pixel)分为两种 一种叫css pixel 一种叫device pixel。
首先说device pixel，这个很直观，硬件屏幕上的一个物理像素点就是device pixel，这也是我们普遍接受的像素概念。
而CSS pixel是在网页里虚拟出来的一种表示相对像素的单位，通常情况下css pixel==device pixel。而比如网页需要根据dpi进行自适应时，这时候像素pixel单位就是一个非常大的障碍。可是我的网页大部分单位已经用px写好了怎么办尼？于是CSS pixel就起作用了。这时候设置css pixel和device pixel的对应比例，就能将px转换为像rem一样的相对单位。

而APICloud的px之所以能自适应，也就是用了这样的原理。对于大多数屏幕，APICloud处理后的css pixel大约为device pixel的一半，所以官方会建议取设计图一半的像素尺寸。也是基于这样原理，会出现不容易得到到真正1px的线的问题。

我的建议是，能使用rem就尽量使用rem。px可以用，但是不能当作绝对布局来用，和屏幕尺寸有关的长度就不要使用px了 比如占满一行坑定不能使用720/2=360px

smifxrh

http://docs.apicloud.com/Dev-Guide/screen-adapt-guide这个有介绍

一方秋水

smifxrh 发表于 2017-4-6 17:59
http://docs.apicloud.com/Dev-Guide/screen-adapt-guide这个有介绍

....就是看这个看的一头雾水才来提问的

常山赵子云

简单介绍：
rem是逻辑单位，引擎在排版运算时会转换成px，在不同屏幕密度的手机上，1rem可能为16px，24px等；
css中的px在移动设备上是与屏幕绝对像素大小无关的单位。移动设备可能有720×1280、1080×1920等绝对像素的屏幕，操作系统为了统一这些分辨率，方便开发，设计了屏幕密度这样一个换算关系值，屏幕绝对像素分辨率除以这个密度后，屏幕就固定在一定范围内了，比如1080×1920的设备屏幕密度为3，运算完后就是360×640，720×1280的设备屏幕密度为2，运算完后也是360×640，这个360×640就是与绝对像素无关的px；反过来，你在css中使用px，操作系统在渲染的时候会将它还原成屏幕绝对像素，使得你的UI在不同绝对分辨率的手机上表现效果一致，比如在css中一个button宽高写成width:80px;heigth:30px;这个button在不同密度的手机上将可能为80×30、160×60、240×90等；
这就是自适应。

一方秋水

常山赵子云 发表于 2017-4-6 18:30
简单介绍：
rem是逻辑单位，引擎在排版运算时会转换成px，在不同屏幕密度的手机上，1rem可能为16px，24px等 ...

哦哦！意思是不是 如果我拿到720的图，一个button width 为80px height为30px，那我写在css 里就是 width：40px；height：15px？

酸性氢氧化物

一方秋水 发表于 2017-4-7 09:15
哦哦！意思是不是 如果我拿到720的图，一个button width 为80px height为30px，那我写在css 里就是 width ...

一般情况下设计图按照官方给定的尺寸做，不用做什么变化

一方秋水

酸性氢氧化物 发表于 2017-4-7 09:23
一般情况下设计图按照官方给定的尺寸做，不用做什么变化

直接将计量的尺寸 不做运算..直接写入css中吗？

酸性氢氧化物

一方秋水 发表于 2017-4-7 10:07
直接将计量的尺寸 不做运算..直接写入css中吗？

是的，如果正规按照官方推荐的

阿牛2017

酸性氢氧化物 发表于 2017-4-7 10:14
是的，如果正规按照官方推荐的

好的 ， 谢谢各版主 热情回答！！！！ 最后一个小白问题... 官方推荐的是 720*1280这个尺寸的 对吧？