移动web开发经验分享

一个简单的HTML5页面

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport"
 content="target-densitydpi=device-dpi, width=device-width, 
 initial-scale=1, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <title>首页</title>
    <link rel="stylesheet" href="../css/zdliu.css">
    <link rel="stylesheet" href="../css/mall.css">
</head>
<body class="ub ub-ver">

</body>
</html>

 窗口自动调整到设备宽度,并禁止用户手动缩放页面、

<meta name="viewport"
 content="target-densitydpi=device-dpi, width=device-width, 
 initial-scale=1, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">

css样式 

css单位用的是em和rem

初始定义用em,浏览器默认字体大小是16px,em为16的倍数,以此做响应式设计。当然这个差距的大小可以自己定义,我的是以15em差设定。

html{font-size:100%!important}
body{font-size:1em!important;background-color:#fff}
@media screen and (min-width:30em){body{font-size:1.5em!important}
html{font-size:150%!important}}
@media screen and (min-width:45em){body{font-size:2em!important}
html{font-size:200%!important}}
@media screen and (min-width:60em){body{font-size:2.5em!important}
html{font-size:250%!important}}
@media screen and (min-width:75em){body{font-size:3em!important}
html{font-size:300%!important}}

css3弹性盒子基本样式名称定义

(借鉴appcan提供的,名称用习惯了,懒得改了)  注:appcan是一款H5混合开发app的工具

.ub{display:-webkit-box!important;display:box!important}
.ub-ac{-webkit-box-align:center;box-align:center}
.ub-ae{-webkit-box-align:end;box-align:end}
.ub-pc{-webkit-box-pack:center;box-pack:center;}
.ub-pe{-webkit-box-pack:end;box-pack:end;}
.ub-ver{box-orient:vertical;-webkit-box-orient:vertical;}
.ub-f1{position:relative;-webkit-box-flex:1;box-flex:1;}
.ub-f2{position:relative;-webkit-box-flex:2;box-flex:2;}
.ub-f3{position:relative;-webkit-box-flex:3;box-flex:3;}
.ub-f4{position:relative;-webkit-box-flex:4;box-flex:4;}


bod样式定义:
body{position:absolute;top:0;left:0;width:100%;height:100%;font-size:1rem;}

从body开始使用rem单位


em与rem的区别

em:em是相对长度单位。相对于当前对象呗文本的字体尺寸如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。

  1. 如果元素自身没有设置字体大小,那么元素自身上的所有属性值如“boder、width、height、padding、margin、line-height”等值,我们都可以按下面的公式来计算:1 ÷ 父元素的font-size × 需要转换的像素值 = em值

  2. 这一种千万要慢慢理解,不然很容易与第二点混了。如果元素设置了字体大小,那么字体大小的转换依旧按第二条公式计算,也就是下面的:1 ÷ 父元素的font-size × 需要转换的像素值 = em值

  3. 那么元素设置了字体大小,此元素的其他属性,如“border、width、height、padding、margin、line-height”计算就需要按照下面的公式来计算:1 ÷ 元素自身的font-size × 需要转换的像素值 = em值

rem:rem是相对于根元素<html>

对象设置字体大小,其他样式值不像em那样需要重新计算值。所以用rem做响应式很方便。


其他


  1. 图片:建议声明为块状元素display:block(不然某些安卓机下面会出bug)。一般图片只设置宽度,高度自适应。对于网站图标来说,图标用矢量图,而已是单个的,不要像pc端放在一个大的png图上。移动端分辨率很多,图标需要缩放。

  2. margin用在float对象上。非float对象用了,虽然chrom模拟器上可以,但是有些安卓机器上面margin值不会起作用,特别是marigin-top.

......以后继续更新

结尾

提供一个Demo参考微信商城。  之前给朋友做的一个微信商城私活。(源码仅供参考,)


你可能感兴趣的:(前端,移动web)