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
}