Html5开发总结

页面头部要求

必需设定下面meta

 

<meta name="viewport"

content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=10,user-scalable=no" />

 

页面等比缩放

目地：

设置页面随着屏幕大小等比缩放

方案：

页面所有尺寸均采用rem为单位

动态设置html标签(页面根节点) font-size属性为x 像素

实践前奏：

（公式一）

标准的手机屏幕宽是320 px，标准的font-size时16 px

320 / 16 ＝ 20/1 (即:手机屏幕宽与像素的比是20:1)

所以屏幕宽为x,那么像素就是x/20

（公式二）

1像素等于 1/16 rem

标准页面font-size为16px即1 rem 所以1像素为1/16rem

由这个公式可以将页面中所有像素为单位的值转为rem

 

动态设置font-size：

 

 var fontSize = document.documentElement.clientWidth / 20;

 document.documentElement.style.fontSize = fontSize + 'px';

 

 

像素转换：

 

如果一个元素width=150px; height=60px; 那么它的对象rem值为多少？

Width = 150 * 1/16; height=60*1/16; 即 width=9.375rem; height=3.75rem;

 

监听输入框值改变

监听文本输入框内容变化，只需绑定oninput 和 onpropertychange事件即可

 

$("input,textarea").bind("input propertychange",function(e){

        var text = $(this).val();

        console.log(“当前输入值为:”+text);

});

 

CSS样式相关

1.      在写样式的时候,iphone会有一些默认样式,

使用-webkit-appearance:none可去除系统默认的样式

 

2.      溢出省略号…

 

text-overflow: ellipsis;

         white-space: nowrap;

         overflow: hidden;

 

微信浏览器中相册浏览功能

document.addEventListener("WeixinJSBridgeReady",function(){

$(".shop-pic img").click(function(){

               var currImg = $(this).attr("src");

               //imagePreview不能变，固定的

               WeixinJSBridge.invoke("imagePreview",{

                      "urls":iShop_photos,//图片地址数组 [绝对路径]

                      "current":currImg//当前图片地址

               });

});

});