俄罗斯贵宾会-俄罗斯贵宾会官网
做最好的网站

移动端页面开发流程

  很早之前就学过了弹性盒子,就感觉自己什么都学会了,没想到到了实际的运用过程中,其实并不是那么一回事,自己根本想不到会用到哪些属性,该怎么使用。

移动端页面布局

  这一次就只把我使用过程中遇到的一些坑来总结一下。

一、移动端app分类

  使用弹性盒子的情况还是需要去看布局的,这个属性使用起来非常爽,不需要考虑那么多,直接几行代码就完成了之前浮动布局要完成的情况,而且自适应页面的能力也要强出好多,不需要自己再去调整好久的样式像素。

1、Native App原生app手机应用程序

  使用原生的语言开发的手机应用,Android系统用的是java,ios系统用的是object-C

  直接上布局的样子吧。

2、Hybrid App 混合型app手机应用程序

  混合使用原生的程序和html5页面开发的手机应用

    页面一

  图片 1

  比如说上面的样式,你们可能有别的更好的布局思路,可以分享一下的哈。 我就说说我猜到的坑,因为之前根本就没有这样去写过,所以有一些细节的部分根本没有考虑过,后来写过一次之后,在看到这种布局就变得容易多了。

3、Web App 基于Web的app手机应用程序

  完全使用html5页面加前端js框架开发的手机应用

  布局思路

    一般我们都会把一个页面分为三部分,我们把最上面的设备监控是头部

    内容部分为中间的那一大堆

    底部就是下面的三个按钮的那一些

  布局思路大概是下面的代码那个样子的,中间的部分肯定是要自适应的了,直接把剩下的高度都占满。

  

#box{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.header{
    height: 100px;
}
.content{
    flex-grow: 1;   // 这里的这个属性  因为之前用这个用的少,所以没有想到,这个属性是定义项目放大比例,默认是0,将他规定一下,然后就会把剩余的空间都给占掉
}
.footer{
    height: 200px;
}


<div id="box">
    <div class="header"></div>
    <div class="content"></div>
    <div class="footer"></div>
</div>

 

  重点的是中间的那一部分,因为中间部分下面的表格部分超出之后要出现滚动条,所以就是表格内容的高度的父元素的高度我拿不准,最开始直接用的是rem给写死了,后来发现有很多弊端,因为是第一次写这样的页面所以讲下面的那个没有考虑到的属性。

  中间的部分分为两部分,黄色的一部分,六个框框,用的弹性盒子,把他们的宽度写成百分比平分,三个分一行,用的33.3%,

  大概代码就是下面的样子的。

  

ul{
    display: flex;
    flex-wrap: wrap;
}
ul li{
    width: 33.3%;
    height: xxx;
}

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

  下面的那个表格要超出出现滚动条,刚才说了我第一次布局的过程中把他父元素的高度给写死了,然后在自适应的过程中出现了一些问题,可以把中间的部分也写成一个弹性盒子,然后上面的那个八个黄色框框的父元素高度给定住,然后下面的部分用到那个flex-grow属性,直接把下面的那一些东西都给占住。

  大概和最开始头部中间部分底部的布局差不多。

  图片 2

 

二、Viewport视口

  视口是移动设备上用来显示网页的区域,一般会比移动设备可视区域大,宽度可能是980px或者1024px,目的是为了显示下整个为PC端设计的网页,这样带来的后果是移动端会出现横向滚动条,为了避免这种情况,移动端会将视口缩放到移动端窗口的大小。这样会让网页不容易观看,可以用meta标签,name="viewport"来设置视口的大小,将视口的大小设置为和移动设备可视区一样的大小。

  在移动端用来承载网页的这个区域,就是我们的视觉窗口,viewport(视口),这个区域可以设置高度宽度,可以按比例放大缩小,而且能设置是否允许用户自行缩放。

  页面二

  图片 3

 

  还是只看中间的部分吧

  中间的部分是左右划分的,所以也可以使用弹性盒子,左右的宽度用百分比规定好, 30%  70% 然后就可以横排显示,注意写好他们的高度

  右边部分又分为上下两部分

图片 4

  这里是右边上半部分的布局,写的好多了,所以也就没有考虑其他的东西了,左右部分大概就两种写法了我

  第一种

    左边用rem固定死, 右边使用flex-grow 分配多余的剩余的空间。

  第二种

    两部分都使用百分比

   里面的小东西在使用自己的方式写就好了,右边的绿色的也可以使用弹性盒子。

参数说明:

width:宽度设置的是viewport宽度,可以设置device-width特殊值
initial-scale:初始缩放比,大于0的数字
maximum-scale:最大缩放比
minimum-scale:最小缩放比
user-scalable:用户是否可以缩放,yes或no(1或0)

<!--viewport只有移动端才能识别-->
<!--设置宽度  设置成和设备一样的宽度(width=device-width)-->
<!--设置默认的缩放比  initial-scale =1.0-->
<!--设置是否允许用户自行缩放  user-scalable   no yes-->

页面三

  图片 5

  也是只介绍一下中间的部分吧。分为左右部分,然后内容超出之后也要出现滚动条。

  这一种的头部,内容部分,底部用到的还是最开始讲的那种,中间部分占掉剩余下来的空间。

  中间的部分分为左右两部分,高度的话因为使用了flex-grow这个东西,所以把黄色盒子应该还有一个父元素和他一样大,不说了,上代码吧

  这里大概模拟一下中间的代码

图片 6

这个就是中间的所有的东西,大概就是content的高度是中间部分的实际高度, 左部分 div.left部分的东西的高度写成100%,适应到中间部分的所有高度,然后设置超出产生滚动条  overflow:scroll,里面的ul就直接那样就可以了,把ul设置成弹性盒子,然后里面的东西多的话就会超过 div.left的高度,然后就会产生滚动条了,同理 右边的大概也是这样的。

  感觉今天会加班,然后头有点疼就想写点东西,没想到直接可以下班了~~~

  坚持写完了,如果你看了我的文章学到了东西我会非常高兴的,回家咯 嘿嘿

 

设置方法如下:

<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">

PC页面在手机缩放的原因:

1、iphone默认的viewport980px ,user-scalable=yes
2、那么initial-scale在320px的浏览器上就是320/980 为0.33333

总结:

用meta标签把viewport的宽度设为device-width,同时initial-scale=1.user-scale=0就构建了一个标准的移动web页面

 

三、PC及移动端页面适配方法

设备有多种不同的分辨率,页面适配方案有如下几种:

1、全适配:流体布局+响应式布局

2、移动端适配:

  使用百分比自适应布局(流式布局)同时需要对移动端的viewport视口进行设置,就可以达到适配的目的

  a、流体布局+少量响应式

  b、基于rem的布局

  c、弹性合模型

本文由俄罗斯贵宾会发布于Web前端,转载请注明出处:移动端页面开发流程

您可能还会对下面的文章感兴趣: