移动端页面应该怎么写?移动端布局的一些小见解
2016-12-20 23:52

    移动端在web行业所占的比重越来越大,而移动端,主要是手机端,屏幕的大小各部相同,我们需要让我们的页面在各个页面中显示出来的效果一致。

    尺寸.jpg

  这张图是我从网上找的一张设备的分辨率图,我们需要参照的就是设备独立像素这一列。可以看到大屏的宽度才414,而小屏的宽度320。具体详细的移动端的分辨率和设备像素的关系可以自行百度,网上有很多这个的介绍。选用图片时,我们要注意一下这个设备像素比(又叫倍率):比方iphone5上的100px宽的图片,我们要用200px宽的图片然后缩小到100px使用,这样才能让图片清晰。至于这个为什么,在网上的设备分辨率内容中也有介绍。

    你可以点击查看这篇文章的分辨率介绍,里面对于尺寸和PPI像素密度等介绍的很详细。

    在我们web页面中,我们只需要引入几个移动端的meta标签,然后浏览器就会把我们的px宽度按照设备独立像素设置。

//按照设备独立像素展现
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
//IOS中Safari允许全屏浏览
<meta content="yes" name="apple-mobile-web-app-capable">
//IOS中Safari顶端状态条样式
<meta name="apple-mobile-web-app-status-bar-style" content="black">
//忽略将数字变为电话号码
<meta name="format-detection" content="telephone=no">
//这是IOS中Safari特有的meta,是在你保存某个页面到桌面的时候使用这张图作为桌面图标,尺寸和iphone上的一致,是57*57px
<link rel="apple-touch-icon" href="custom_icon.png">

 上面这几个meta标签加上之后,我们的页面就算是一个移动端的页面了。

    flex.png

  你可以点击这里查看布局效果

   这种列表样式,我们有几种实现方式:

    1,clearfix浮动实现,利用margin负值实现,我之前写过一篇margin负值的布局的文章,你可以点击这里查看

<div class='clearfix'>
    <div class='fleft wdfull'>
	<div class='fcontent'>浮动列表</div>
    </div>
    <div class='fname fleft'>标签</div>
</div>
<style>
.clearfix:before,.clearfix:after{content:"";display:table;line-height:0;visibility:hidden;}
.clearfix:after{clear:both;}
.wdfull{width:100%;}
.fleft{float:left;}
.fname{width:100px;margin-left:-100%;color:orange;}
.fcontent{margin-left:100px;color:#535353;}
</style>

    2,利用absolute实现,

<div class='rel'>
      <div class='fcontent'>绝对定位列表</div>
      <div class='absname'>位置</div>
</div>
<style>
.rel{position:relative;}
.absname{width:100px;position:absolute;z-Index:2;left:0;top:0;color:#157AA9;}
</style>

    3,利用flex,box-flex弹性布局实现。

<div class='flex-item'>
    <div class='flex-before'>
	<div class='flex-name'>新颖</div>
   </div>
   <div class='flex-content'>
        flex弹性布局
   </div>
</div>
<style>
.flex-item{display:-moz-flex;display:-webkit-flex;display:flex;}
.flex-content{-moz-flex:1;-webkit-flex:1;flex:1;color:#535353;}
.flex-name{width:100px;color:#12AD83;}
</style>
---------------------------------
<div class='box-item'>
   <div class='box-before'>
	<div class='box-name'>名称</div>
   </div>
   <div class='box-content'>
	box-flex弹性布局
   </div>
</div>
<style>
.box-item{display:-moz-box;display:-webkit-box;display:box;}
.box-name{width:100px;color:#6819A0;}
.box-content{-moz-box-flex:1;-webkit-box-flex:1;box-flex:1;color:#535353;}
</style>

可能有人会问box和flex有什么不同?它们两个没有什么大区别,就是flex是12年提出的,比较晚,box较早,如果你要兼容较老的机型,就需要用box,或者box和flex两个一起写。

既然手机端有这三种列表布局的实现方式,我们应该使用哪一种呢。当然是使用flex弹性布局了,不只是因为它是H5的东西,更是因为它更适合移动端的布局。

阿的.png

如果我们要做列表后面加一个文字或者图标,flex布局只要在后面写一个div就可以,其他的布局,你得把整体的css改一遍才能实现。

<div class='box-item'>
   <div class='box-before'>
      <div class='box-name'>名称</div>
   </div>
   <div class='box-content'>
       box-flex弹性布局
   </div>
   <div style='color:red;'>重要</div>
</div>

  我们只需要在后面直接添加就可以,弹性,就是适应性很强。我们可以把弹性布局看作是移动端的table,一行就是一个table,table会根据td自动渲染布局位置的。

  移动端布局中,我们拿最后一列讨论,“名称”属于宽度固定的,“重要”属于固定的,“box-flex弹性布局”属于不固定的,属于伸缩项,布局中,我们要确定哪些是可伸缩项,将伸缩项设置为“flex:1;box-flex:1”;把多余的空间都让给它。

仍然.png


屏幕宽度较大的时候,固定项是不变的,伸缩项的空白增大,整体视觉是一致的。那么移动端有这么多尺寸,我们应该按照较小的尺寸来实现,这叫向下兼容。目前,我们页面的实现要按照iphone5的尺寸来实现。因为iphone5的尺寸最小,而且还有一定量用户,只要在iphone5下我们的页面是正常的,在iphone6,7下我们的页面就是正常的。如果我们不想列表项因为文字过多而变形,我们就要通过nowrap来控制不换行

.nowrap{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

nowrap在移动端中用途很多,很多单列列表信息多需要添加此样式,来保证不变形。弹性布局还可以在tab页面和底部的菜单项中,多项平分中体现其功能。弹性布局使得我们的移动端页面书写变得轻松和有条理。

尤其对于这种不定列数的的布局,flex就体现出了它的强大功能。

<div class='foot'>
   <div class='item active'>首页</div>
   <div class='item'>活动</div>
  <div class='item'>我的</div>
  <!--我们可以多加一列或者减少一列而不用改样式-->
</div>
<style>
.foot{position:fixed;z-Index:2;left:0;bottom:0;width:100%;display:-webkit-box;display:flex;
background:#fff;line-height:46px;border-top:1px solid #d8d8d8;}
.item{-webkit-box-flex:1;flex:1;color:#646465;font-size:13px;text-align:center;}
.active{color:#128BBD;}
</style>

这里如果你用inline-block或者float;并且定义每列的宽度为百分比,那样效果跟弹性布局是一样的,但是它就缺少了适应性,当列数改变的时候,我们还需要去改变百分比宽度的数值,3列是33.333%,4列时就要改成25%了。

CSS3有了新的单位,rem,vw等,可以用在文字上来通过@media媒体查询来改变文字的大小,个人觉得移动端页面没有必要改变文字的大小。从屏幕宽度可以看出相差不大,而我们的文字大小,如果320和400px上要增加400/320-1=0.25,12px*1.25=15px,文字增大了3个像素。

a.png

fet.png

通过15px和12px的大小对比,差别是很大的,如果适应屏幕宽度改变文字大小的话,那么拿两个手机一对比,就会显得我们的页面很不一致,而且如果改横屏,文字会更大,甚至会超出容器的高度,那就很难看了。

所以我觉得,文字的大小不论屏幕大小,要统一不变,再者文字的大小和间距对一个页面的整齐度对人的感觉是很明显的。

   我们移动端的布局是不是都要用弹性布局呢,也不一定。css3还提供的vw,vh相对于视窗的宽高,我们不用它来定义文字的宽度,但是我们可以在单页应用中定义一些容器的高度和宽度。

  最后再说一下移动端的弹窗的大小,320*568是最小大小(因为有了iphoneSE,你也可以考虑按照iphone4的大小实现320*480),宽度必然是百分比的,或者通过margin,padding设置边距。而高度如果在确定不大于568的情况下,可以用固定px来设置高度,如果弹窗内容要用iscroll进行滚动,这时弹窗要想对于屏幕高度设置百分比的高度,可以是80%等数值。这里用百分比的好处是,小屏下可以正常显示,大屏下我们的高度增大了,弹窗可视区增大,甚至可以让滚动区的内容全显示,体现了大屏的优势。这时你要是还用固定高度,那么在大屏上就会显得很憋屈,一共4,5条内容,明明弹窗高点就可以全显示,非要那么吝啬,要滚动才能看全。

    上面是我对于移动端页面布局的一些个人见解,希望你能从中得到取其精华,得出更好的布局方式。

    

原创文章,转载请注明来自:妹纸前端-www.webfront-js.com.
阅读(2082)
辛苦了,打赏喝个咖啡
微信
支付宝
妹纸前端
妹纸前端工作室 | 文章不断更新中
京ICP备16005385号-1