PC端
HTML部分的实例
1、页面默认使用高版本浏览器内核
<meta name="renderer" content="webkit">
<!--360 浏览器就会在读取到这个标签后，立即切换对应的极速核。-->
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<!--这样写可以达到的效果是如果安装了 Google Chrome Frame，则使用 GCF 来渲染页面，如果没有安装 GCF，则使用最高版本的 IE 内核进行渲染。兼容IE-->
2、正经来说在QQ聊天窗口中发送链接地址，有时候会有网页面部分内容介绍
<meta itemprop="name" content=" "/>
<meta itemprop="description" content=" "/>
<meta itemprop="image" content=" " />
CSS部分实例
1、阻止页面选中事件，例如，当鼠标双击按钮时，会选中按钮的文字
/*取消双击选中文字*/
-moz-user-select:none;/*火狐*/
-webkit-user-select:none;/*webkit浏览器*/
-ms-user-select:none;/*IE10*/
-khtml-user-select:none;/*早期浏览器*/
user-select:none;
2、一般网页端我会用的字体
font: 14px/1.5 Helvetica, Tahoma, Arial, "PingFang SC", STXihei, "Microsoft YaHei", "WenQuanYi Micro Hei";
3、文字内容超出部分隐藏，并用（...）显示
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
4、CSS3控制侧边栏滚动条显示效果；
/*滚动条，选择器为外层容器*/
.school_content::-webkit-scrollbar{width: 8px;}
.school_content::-webkit-scrollbar-track{background-color: #fff;border-left: 1px solid #ff8400;}
.school_content::-webkit-scrollbar-thumb{background-color: #ff8400;}
.school_content{overflow: scroll;overflow-x: hidden;}
可以用jquery.mCustomScrollbar.min.js提供更好的兼容行和更多的定制化
5、Select 标签，后面的小三角形，去掉；
.aselect{appearance:none;
-moz-appearance:none;
-webkit-appearance:none;
background-color:transparent
}
JS部分实例
1、js获取元素的各个值；
网页可见区域宽： document.documentElement.clientWidth;
网页可见区域高： document.documentElement.clientHeight;
网页正文全文宽： document.documentElement.scrollWidth;
网页正文全文高： document.documentElement.scrollHeight;
网页被卷去的高(ff)：document.body.scrollTop;
网页被卷去的高(ie): document.documentElement.scrollTop;
网页被卷去的左：document.body.scrollLeft;
网页正文部分上：window.screenTop;
网页正文部分左：window.screenLeft;
某个元素的宽度：obj.offsetWidth;
某个元素的高度：obj.offsetHeight;
某个元素的上边界到body最顶部的距离：obj.offsetTop;（在元素的包含元素不含滚动条的情况下）
某个元素的左边界到body最左边的距离：obj.offsetLeft;（在元素的包含元素不含滚动条的情况下）
返回当前元素的上边界到它的包含元素的上边界的偏移量：obj.offsetTop（在元素的包含元素含滚动条的情况下）
返回当前元素的左边界到它的包含元素的左边界的偏移量：obj.offsetLeft（在元素的包含元素含滚动条的情况下）
2、js控制页面弹窗弹出；（现在为3张图片连续弹出，可以修改成同一张图片弹出n次之后不再弹出）
//这个需要引入jquery,
//设置记录次数，起始值为1
var Num = 1;
//获取写好的html弹出窗样式
var Obj = $("#img");
//打开网站，第一个图片延迟3秒弹出
Obj.delay(3000).fadeIn();
//每次点击关闭（$(".close")为关闭按钮）之后不超过设定的值启动另一个计时器（在最底下）
$(".close").click(function(){
//隐藏当前弹窗
Obj.hide();
//增加次数
Num++;
//根据需求修改次数，
if(Num>3){
Obj.hide();
return false;
};
if(Num<=3){
//按照图片的名字修改参数
Obj.find("img").attr("src", alNum + '.png');
//alNum值按照自己的需求改动，如果可以你能每次弹不同的内容
//这里的意思是每隔7秒弹出图片，
Obj.delay(7000).fadeIn();
}
3、js方法显示可剩余输入字数；
HTML部分
<textarea class="goods_textarea" name="" id="goods_textarea" onMouseMove="conWrite('goods_textarea',500,'goods_t_f_n_word')" onKeyUp="conWrite('goods_textarea',500,'goods_t_f_n_word')"></textarea>
<div class="goods_t_font_num"><i id="goods_t_f_n_word">0</i>/500</div>
<!--这里的goods_t_font_num为定位到某个位置的，css就不引入了-->
JS部分
/**
*方法中obj为输入框的id，size为限制输入字数，msg为显示剩余字数的元素id
**/
function conWrite(obj, size, msg) {
if(document.getElementById(obj) != null) {
//已经输入字符
var nLength = document.getElementById(obj).value.length;
//剩余输入字符
var length = size - document.getElementById(obj).value.length;
document.getElementById(msg).innerText = nLength;
}
}
M端
HTML部分
1、手机端常用头部
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="format-detection" content="telephone=no">
<meta http-equiv="Expires" content="-1">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Pragma" content="no-cache">
2、M端点击电话号码，自动拨打电话
<a href="tel:400-900-xxxx" mce_href="wtai://wp//mc;400-900-xxxx">400-900-xxxx</a>
CSS部分实例
1、手机端字体
font-family: 'Consolas', 'Courier', 'Monaco', sans-serif,monospace;
2、手机端适配大小（媒体查询，rem随着html的字体大小而变化，当然还可以细化一些）
Ps : 下面的媒体查询是以设计图宽度为750为比例，初始html字体为30px，调试完成，并不包括所有尺寸，其实我没正式用过，只是没事儿调了一下而已。
@media screen and (min-width: 320px) {
html {font-size: 12.8px;}
}
@media screen and (min-width: 360px) {
html {font-size: 14.3px;}
}
@media screen and (min-width: 375px) {
html {font-size:15px;}
}
@media screen and (min-width: 400px) {
html {font-size: 16.5px;}
}
@media screen and (min-width: 440px) {
html {font-size: 17.6px;}
}
@media screen and (min-width: 480px) {
html {font-size: 19.2px;}
}
@media screen and (min-width: 540px) {
html {font-size: 21.6px;}
}
@media screen and (min-width: 640px) {
html {font-size: 25.6px;}
}
@media screen and (min-width: 720px) {
html {font-size: 28.8px;}
}
@media screen and (min-width: 750px){
html {font-size: 30px;}
}
JS部分
1、rem适配
window.onload = function(){
(function () {
var width = document.documentElement.clientWidth;
var styleNode = document.createElement("style");
styleNode.innerHTML = "html{font-size:" + (width / 16) + "px!important}";
document.head.appendChild(styleNode);
})();
}
这里是用16（也就是用正常字体
16px）作为基数来计算font-size，并给html赋值；
用less写的话需要配合考拉，并且less文件的第一行必须声明初始rem；
以设计图宽度为750px为例，
那么less文件第一行必须声明@rem:46.875;，
值的来源为750/16 = 46.875
下面应用的话height: 660/@rem;
这里的660为在PS或其他软件中量出设计图中元素的实际高度。
2、判断手机端平台并调用APP方法
//这个是跟公司自己的APP配合时用到的
//生成json传值给APP
var jsonO = {
"type": 9,
"id": 0,
"userInfo": {
"uid": data.uid,
"ticket": data.ticket,
"professionid": data.professionid,
"phone": data.phone
}
}
//JSON.stringify这个如果不用的话IOS能接收，ANDROID不行
var jsonStr = JSON.stringify(jsonO);
//判断平台调用方法（方法名跟APP人员协商）
if (navigator.userAgent.match(/(iPhone|iPod|iPad);?/i)) {
window.webkit.messageHandlers.showSendMsg.postMessage(jsonStr);
//这里的调用IOS的方法showSendMsg
}else if(navigator.userAgent.match(/android/i)){
window.android.buyNew(jsonStr);
//这里调用android的方法buyNew
}
