香港葡京赌侠诗(中国)有限公司

?
各地市:
郑州网站建设 洛阳网站建设 开封网站建设 安阳网站建设 新乡网站建设 濮阳网站建设 焦作网站建设 鹤壁网站建设 三门峡网站建设 商丘网站建设 许昌网站建设 漯河网站建设 平顶山网站建设 驻马店网站建设 周口网站建设 南阳网站建设 信阳网站建设 济源网站建设 二七区网站建设 中原区网站建设 管城区网站建设 惠济区网站建设 金水区网站建设 上街区网站建设 巩义市网站建设 新密市网站建设 登封市网站建设 荥阳市网站建设 中牟县网站建设 经开区网站建设 高新区网站建设 涧西区网站建设 西工区网站建设 老城区网站建设 瀍河回族区网站建设 洛龙区网站建设 吉利区网站建设 偃师市网站建设 孟津县网站建设 新安县网站建设 洛宁县网站建设 宜阳县网站建设 伊川县网站建设 嵩县网站建设 栾川县网站建设 汝阳县网站建设 杞县网站建设 兰考县网站建设 通许县网站建设 尉氏县网站建设 开封县网站建设 金明区网站建设 顺河回族区网站建设 龙亭区网站建设 鼓楼区网站建设 禹王台区网站建设 安阳县网站建设 林州市网站建设 内黄县网站建设 汤阴县网站建设 滑县网站建设 龙安区网站建设 殷都区网站建设 文峰区网站建设 北关区网站建设 辉县市网站建设 卫辉市网站建设 新乡县网站建设 获嘉县网站建设 原阳县网站建设 延津县网站建设 封丘县网站建设 长垣县网站建设 卫滨区网站建设 红旗区网站建设 牧野区网站建设 凤泉区网站建设 华龙区网站建设 清丰县网站建设 南乐县网站建设 濮阳县网站建设 莘县网站建设 范县网站建设 台前县网站建设
当前位置: 主页 > 建站常识 > 网站建设观点 >

郑州网站建设分析:手机网站常用的六种布局方案优缺点

发布时间:2017-04-26 22:31 | 发布者:香港葡京赌侠诗 | 浏览次数:次

    现在越来越多的小伙伴们开始进行了手机网站的移动端开发。但是,手机网站常用的六种布局方案的优缺点,大家又必须去了解,才能决定自己使用什么样的布局方案。
 

闪发车

   下面郑州手机网站建设所说的是需要兼容的系统为iOS 5+、Android 2.3+、Windows Phone 8+。对于普通页面来说,iOS比较好兼容;Android低版本有老规范,需要注意;Windows Phone 8里按道理说应该是IE11,结果QQ和百度浏览器还是IE10的内核。。。

所以一般CSS3的代码通常要写两至四句,兼容以上各种系统:

-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;

-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;

这里没有火狐什么事。关于浏览器前缀支撑,请看caniuse这个网站。

下面我将先容五种常见的布局方式,希翼给大家一点思路。理解原理,合理运用,不要照抄。→DEMO←

 

1、固定布局

固定布局是第一次做移动端的朋友们最好的选择方式,思路沿用PC端,上手比较快。<head>里把viewport加好,然后设想整个网页的宽度为320px即可。其他地方PC端怎么布局,这里类似即可。

缺点也显而易见,大屏手机显示网页比较宽,而固定布局宽度参照永远是320px,导致左右两边会有空白。就像你用27寸显示器看980px宽度网页一样。另一个方面就是手机横屏的时候,两边空白更宽。
2、流动布局
以前PC端很少用到这种布局,因为大家需求要么网页就一种宽度,要么就两种宽度,分宽窄屏处理。而手机上不同,大部份手机默认宽度都不一样,所以流动布局可以很好解决自适应需求。

流动布局重点就是使用百分比来代替传统px作为单位(当前容器宽度除以父级容器实际宽度)。例如设计稿宽度为640px,上面有一个导航里包含四个菜单,四周边距为20px,四个菜单等宽,那么边距应该为20px/640px=3.125%,每个菜单的宽度为100%/4=25%。DEMO里还有边框,所以记得改变盒子模型,加box-sizing:border-box。

优点是无论网页宽度如何改变,四个菜单的宽度永远一样,并且等宽。缺点是不够灵活,如果菜单数量有变化,就满足不了了。
3、浮动布局
很多乐观的人,看到Flexbox最新一版的规范,满心欢喜的觉得移动端可以不用浮动布局了。但很遗憾,对于Android 2.3支撑的Flexbox老规范,连最简单的多行商品按顺序排列,都实现不了。对于这种情况,我喜欢用传统的浮动方式。因为对于开发人员,这种循环是最简单的。再加上:nth-child伪类处理边距,干脆利落。所以,我并没有放弃浮动布局。

当然,因为不需要兼容老版本IE了,浮动的写法也变得简单许多。

.clearfix{
    content:"";
    display:table;
    clear:both;
}

我在Less的公共代码库里,也加了这个:

.clearfix(){
    &:after{
        content:"";
        display:table;
        clear:both;
    }
}

需要清除浮动,直接写.clearfix()即可。
floid app工具

4、Flexbox布局
上一篇入门文章已经提到这货了,不知道你有没有试过,是不是很神奇?现在我大部份布局都是用Flexbox,包括你以前用浮动的情况,大部份也可以用Flexbox代替。

例如上面流动布局用百分比做的宽,局限性就是无法增加删除菜单,改变菜单数量。如果改为用Flexbox布局,这个问题迎刃而解,不论菜单有多少个,都自动等宽排列成一行。

再说两点:

Flexbox有好几版,所以会导致不兼容的情况,特别是Android 2.3。做了个小工具→Flexbox生成工具←。暂时只做了最简单的几种情况,但都兼容iOS 5+、Android 2.3+、Windows Phone 8+,满足日常需求没问题。
在Flexbox里,margin很神奇,所以会导致你频繁用margin:auto;。如果你养成了这个坏习惯,老iOS和老Android里会死得很惨。建议用Flexbox工具里的技术属性,来处理居中情况。
5、混合布局
把所有学到的常识,灵活运用在布局中,我称之为混合布局。

例如我上面DEMO里的混合布局示例,设计稿宽度640px,边距20px,左侧大图宽高390px,右侧小图宽高190px。首先外层容器Flexbox,让里面左右结构显示。容器640px去掉左右边距40px剩600px,左侧390px/600px=65%,右侧190px/600px=31.66666667%,两者之间边距20px/600px=3.33333333%。右侧里面小图片直接宽度100%,高度跟宽度1:1,最后通过Flexbox让两个图一上一下,完成。三张图片记得用图片自适应,比例1:1。
6、定位布局
定位在移动端也用得挺多,特别是弹窗。

position: fixed;
left: 50%;
top: 50%;
-webkit-transform:  translate3d(-50%,-50%,0);
transform:  translate3d(-50%,-50%,0);

如此简单就搞定水平垂直居中的弹窗。

实际使用中,有少数几个手机的浏览器居然不支撑translate3d,实在无语。如果非要兼容这些浏览器,推荐使用Flexbox弹窗。

扩展一下,移动端建议用硬件加速的属性,相关链接1、链接2,而不是直接用margin。(我测试过transition移动一个divmargin会卡顿)

需要各位手机网站前端开发人员需要注意的常见问题:
  
a、虽然移动端不用写:hover,但光写个:active是不够的。实测Android 2.3下按过的按钮会留下浏览器默认颜色,所以记得给:visited也加个颜色。
b、遇到写动画animation的时候,不要用到伪类上。不然Android是没效果的。
c、用Flexbox做等分时,记得给宽度。不然Android里如果内容字数不一样,会撑开。
其他需要各位来待补充啦!


?
?

香港葡京赌侠诗|香港葡京赌侠诗

XML 地图 | Sitemap 地图