因为习惯太久的黑暗,所以阳光愈加刺眼!

空一座旧城,守一个旧人

移动端开发

移动端开发

我们现在关注的点还在移动M站上,或者我们可以叫做webapp,其实就是运行在移动端浏览器中的web网站

app:application应用程序。手机软件:主要指安装在智能手机上的软件,完善原始系统的不足与个性化。

移动端开发是与PC端肯定是有很大不同的,所以我们需要学习如何在移动设备上开发完美适配的app

开发移动端应用我们需要学习的知识点可以分成如下几个:

  1. 移动端布局适配

  2. 移动端事件

  3. 移动端交互效果

  4. 移动端前端框架

  5. 移动端调试

移动端布局适配

从屏幕尺寸、屏幕类型等方面来看的话,移动设备和PC设备大有不同,所以从布局、适配等方面都需要我们考虑到

Viewport视口的作用

在很久以前,我们的设备还不是智能设备的时候,设备访问智能访问到网页的左上角(当时都是pc网站),查看全部内容需要通过滚动条

慢慢的我们发现,我们的一个页面放到移动端中访问的时候,没有滚动条了,但是内容都缩小了

这是因为我们有了一个叫做viewport的一个东西

网页不是直接放入浏览器中的,而是先放入到viewport中,然后viewport在等比缩放到浏览器的宽度,放入浏览器,viewport在缩放的过程中,网页内容也被缩小了

这样的话我们需要做一些处理,其实问题的根源在于viewport的宽度和浏览器宽度不一样,如果我们能将其设置为一样的话,不会出现这样的问题了

我们可以通过meta标签来设置viewport将其设置为浏览器的宽度,也就是设备的宽度,这样的话布局就会简单多了

viewport的宽度

当浏览器宽度小于980的时候,宽度就是980,当浏览器尺寸宽度大于980的时候,宽度和浏览器宽度一致

通过meta标签来设置viewport

标签提供关于 HTML 文档的元数据。它不会显示在页面上,但是对于机器是可读的。可用于浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他 web 服务。

meta标签大全

meta viewport 的6个属性:

width
initial-scale 设置layout viewport 的宽度,为一个正整数,或字符串"width-device"
minimum-scale 设置页面的初始缩放值,为一个数字,可以带小数
maximum-scale 允许用户的最大缩放值,为一个数字,可以带小数
height 设置layout viewport 的高度,这个属性并不重要,很少使用
user-scalable 是否允许用户进行缩放,值为"no"或"yes", no 代表不允许,yes代表允许

移动端布局方式与设计图

现有的布局方式:

  1. 固定布局,每一个元素都是固定的尺寸,内容区域居中在浏览器中间

    内容区域的尺寸:980,1000,1100,1200

  2. 响应式布局,利用媒体查询来实现不同尺寸的浏览器显示结构不一样

    一般会有三张设计图,PC,平板,手机

  3. 自适应布局,属于响应式里的一种,利用rem、百分比、vwvh等布局单位来实现

    设计图一般只有一张,640、750居多

移动端布局

移动的屏幕和PC的屏幕有一个很大的区别,移动端是视网膜高清屏(Retina)

retina屏幕有一个属性叫DPR(设备像素缩放比) = 物理像素/逻辑像素

例如,iphone 5s手机商宣传手机的尺寸是:640宽,这个值就是物理像素,而从开发者眼里我们所指的其实是320px(逻辑像素)

在dpr为2的手机中,我们的一个逻辑像素会从横纵两个方向分别以2个像素点来渲染

如果不管dpr的话,其实我们布局依然可以,因为我们设置一个像素宽高的东西的话,在手机上看见的基本也就是这么大,至于手机设备用多少个物理像素去渲染,大小还是不会变化的

设计师出图都是2倍的,是因为,在页面中除了字体(矢量图)大部分都是位图,也就是如果一个像素宽高的盒子里准备放入图片,如果图片的尺寸也是一个像素宽高的话,因为其实在移动端渲染的时候是用四个像素来渲染,图片会失真,但是如果我们给一像素宽高的盒子放入2像素宽高的图片的话,不就失真

布局单位

因为我们的移动设备有很多种,所以我们的布局不可能是固定布局,所以我们要使用自适应布局

我们在开发中可以选用很多自适应布局单位,这些单位必须满足一个条件

  1. %

    优点:简单,无需设置,兼容性好
    缺点:基于父元素的属性来设置,如果父元素没有宽高,设置无效

  2. vwvh

    一个vw等于viewport宽度的百分之一,一个vh等于viewport高度的百分之一
    vmax等于vw和vh中较大的那个 vmin等于vw和vh中较小的那个

    优点:简单,无需设置
    缺点:兼容性不好

  3. rem

    一个rem等于根元素(html)的字体大小,兼容性很好

    优点:兼容好,使用简单
    缺点:需要设置

rem与适配

当我们想使用一个自适应单位的时候,发现%有缺陷,vwvh兼容性差,弹性盒所针对的是元素排列的问题,只适用于某种情况,所以我们就想,能给我一个没啥上面的缺陷的单位,想到了rem

rem的兼容性好一点,它也确实是一个布局单位,不受父子元素的影响,设置了rem之后,也不会对px、em等单位造成影响,它是一个理想的单位

rem也有一个致命的问题,就是它不是一个自适应的单位,不会跟着设备尺寸不同而不同,但是没有关系,我们有万能的js,可以去动态的设置它

方法1:

我们可以将1rem设置成屏幕的某一个比例,比如将1rem设置成屏幕的十分之一

假设我们的设计图是640宽的,我们拿到之后量了一下a的宽度为480px,得到比例a所占屏幕3/4,根据rem与屏幕的关系,最后设置成7.5rem

就是说在设置元素的宽度是时候,会根据设定好的比例关系去进行换算


</head>
<script>
    document.documentElement.style.fontSize = document.documentElement.clientWidth/10 + 'px'
</script>

方法2:

如果设计图是640的图,这个时候我们知道它是照着i5来的,我们现在假设世界上所有的手机都是320的,也就是每一个人用的都是i5,在这个理想的情况下,因为手机都一样,尺寸都一样,和pc端的固定布局也就一样了

假设有一个在640的图上我们量得的宽度是320,因为是二倍图,所以我们知道,它的实际宽度是160px,这样的话,我们直接给这个设置设置width:160px就可以了,这个时候,我们玩个花子,不要单纯的使用px来设置,用rem来设置,例如,我可以将rem设置为100px,这样的,刚才的盒子设置为width:1.6rem,算法就是 量的宽度/(dpr*100) = 要设置的rem值

这样我们就可以开心的开发,量一个尺寸,除个2,再小数点推两位,设置就性了,但是我们也知道,手机的尺寸并不可能都是320,这样的话,没有关系,我们可以根据一个比例来算rem到底设置为多少

在手机宽度为320的时候,我们设置的1rem=100px,所以有一个比例 b = 100/320

那么在W宽度的手机上,1rem应该是多少呢?设为x 那么x/w = b

得到x = w/3.2

那么就不要写死html的fontsize为100了。而是用js去设置:

document.documentElement.style.fontSize = document.documentElement.clientWidth/3.2 + 'px'

这样,我们就可以得到一个自适应的rem

方法3:

设计图如果是640的,我们知道设计的依据屏幕依然是320,假设所有的手机都是320的

有一个div量得320,我们知道它的实际宽度是160,所以我们在css里直接设置160px。布局就很简单了,因为量多少,除以2就可以直接设置了

但是手机不能只有这一个尺寸,不过没关系,我们可以想办法,我们知道,页面是放在viewport里的,页面的宽度就是viewport的宽度,我们在前面的方法会会将viewport通过meta标签设置为手机屏幕的宽度,但是现在我们就将viewport的宽度强行设置为320px,那么我们页面就会认为它的屏幕宽度就是320px,如果是在屏幕宽度不等于320的手机里,viewport也会进行缩放,缩放到手机屏幕大小,但是这个时候,页面依然认为手机屏幕是320的,也就是说,布局使用固定布局,自适应由viewport去做了,让它将咱们320的页面缩放到不同尺寸的移动设计,达到表现一致


<meta name="viewport" content="width=320"> 

饿了么的做法:认为世界的手机都是二倍宽的,然后再调整viewport

兼容查阅网站

can i use ,在这里可以查看很多属性、api的兼容性

375/52.08 = X/100 x = 37500/52.08

posted on 2017-12-08 15:19  空一座旧城,守一个旧人  阅读(352)  评论(0编辑  收藏  举报

导航