px:相对长度单位。像素px是相对于显示器屏幕分辨率而言的

em:相对单位,继承父节点(层层继承,传递)基准点为父节点字体的大小,如果自身定义了font-size按自身来计算(浏览器默认字体是16px),整个页面内1em不是一个固定的值。

rem:相对单位,相对长度单位。r’是“root”的缩写,相对于根元素的字体大小, 可理解为”root em”, 相对根节点html的字体大小来计算,CSS3新加属性,chrome/firefox/IE9+支持。

(另外需注意chrome强制最小字体为12号,即使设置成 10px 最终都会显示成 12px,当把html的font-size设置成10px,子节点rem的计算还是以12px为基准,所以网上很多文章提到的将html的font-size设为10方便计算不是那么可取)。

rem在移动端应用可参考淘宝的页面http://m.taobao.com (html的font-size通过动态计算获取)

注:需设置meta缩放比1:1

vw:viewpoint width,视窗宽度,1vw等于视窗宽度的1%。
vh:viewpoint height,视窗高度,1vh等于视窗高度的1%。
vmin:vw和vh中较小的那个。
vmax:vw和vh中较大的那个。

vw, vh, vmin, vmax:IE9+局部支持,chrome/firefox/safari/opera支持,iOS safari 8+支持,Androidbrowser4.4+支持,chrome for android39支持

其它的单位还有:
%:百分比
in:寸
cm:厘米
mm:毫米
pt:point,大约1/72寸

pc:pica,大约6pt,1/6寸

ex:取当前作用效果的字体的x的高度,在无法确定x高度的情况下以0.5em计算(IE11及以下均不支持,firefox/chrome/safari/opera/ios safari/android browser4.4+等均需属性加么有前缀)

ch:以节点所使用字体中的“0”字符为基准,找不到时为0.5em(ie10+,chrome31+,safair7.1+,opera26+,ios safari 7.1+,android browser4.4+支持)

(1)怎样计算rem
先设置font-size:的px

html {

  font-size:100px;(也可以设置百分比)

}

body {

  font-size:14px;(可以改变)

}

p {

  //假如屏幕宽度是320px,那么字号是7px;

  font-size:7px;

}

计算过程:

标准 640px font-size:100px 设置字号 font-size:14px;则rem为0.14,即1rem=100px

屏幕宽度 改变为320px 那么font-size:变成50px rem为0.14 则设置字号 font-size:50*0.14=7px

(2) rem(App)

html {

  font-size:15.625vw;(就是宽度640的手机)

}

body {

  font-size:12px; // font-size会被继承, 为了避免后来修改font-size修改不来,就在body加上font-size:12px

}

最好按照宽度为320来计算,640相当于分成100份,那么320就分成50份,也就是说,原本有一个div宽度和高度都为50px,现在他们的宽度和高度都为1rem,不过得要美工给出的稿子要符合一定的规则才行。

额外说点:美工给的设计稿有两种,一种是宽度是640px(小屏),然后适应各种手机屏幕宽度,就是说内容扩大了,缺点会变得模糊;一种是宽度750px(中屏),然后适应各种手机屏幕宽度,适应各种手机屏幕比较好

由于公司业务需要,需要对网站特定地区的访客进行不同跳转。比如,上海的用户跳转到“shanghai.url.cn”,南京的用户跳转到“nanjing.url.cn”。下面就是我的实现方法,分享出来,顺便做个记录。
第一步,获取IP并判断归属地
直接使用搜狐的IP库查询接口

接使用搜狐的IP库查询接口

返回的数据是

var returnCitySN = {"cip": "222.94.148.132", "cid": "320100", "cname": "江苏省南京市"};
接下来,直接对‘returnCitySN’操作

第二步,判断归属地
我用的indexOf(),如果字符串中包含特定字符,返回索引值;如果字符串中不存在特定字符,返回值‘-1’

returnCitySN.cname.indexOf('上海')==-1
这里我是要对上海以外的其他城市进行操作。如果需要对上海这座城市的访客进行操作:

returnCitySN.cname.indexOf('上海')!=-1
第三步,自动跳转到指定页面
不要问我这是干啥,就是对特定地区的访客进行页面跳转而已。

window.location.href='URL'
这里URL就是要跳转到的目标网址

至此,完整的代码如下:

为了隐蔽,可以对JS加密,加密地址:https://www.sojson.com/javascriptobfuscator.html

目的:

北京地区用户访问跳转到http://www.sindns.com

其他地区用户访问跳转到http://www.sindns.net/server

<html>

<meta http-equiv="Content-Type"

content="text/html; charset=gb2312" />

以上代码用的是126公司的IP地址库,你也可以自己替换ip138 taobao 新浪这类公司的库。以上代码可以设置嵌入到自己的页面里面,还可以封装js调用。

如果设置多个省份不同页面 只需else下继续if。

随着智能手机和平板电脑的普及, 越来越多的人用移动设备浏览网页,我们平时在pc浏览器上用的鼠标事件,比如:click, mouseover等, 已经无法满足移动设备触摸屏的特点,触摸时代的到来,离不开那些触摸事件。

触摸事件包含4个接口。
TouchEvent

代表当触摸行为在平面上变化的时候发生的事件.

Touch

代表用户手指与触摸平面间的一个接触点.

TouchList

代表一系列的Touch; 一般在用户多个手指同时接触触控平面时使用这个接口.

DocumentTouch

包含了一些创建 Touch对象与TouchList对象的便捷方法.

(参考于 https://developer.mozilla.org/zh-CN/docs/Web/API/Touch_events )

TouchEvent接口可以响应基本触摸事件(如单个手指点击),它包含了一些具体的事件,

事件类型:

touchstart : 触摸开始(手指放在触摸屏上)

touchmove : 拖动(手指在触摸屏上移动)

touchend : 触摸结束(手指从触摸屏上移开)

touchenter :移动的手指进入一个dom元素。

touchleave :移动的手指离开一个dom元素。

还有一个touchcancel,是在拖动中断时候触发。

事件属性:

altKey : 该属性返回一个布尔值,表示在指定的事件发生时,Alt 键是否处于按下状态, event.altKey=true|false|1|0

type : 触摸时触发的事件类型,比如touchstart

每个触摸事件都包括了三个触摸属性列表:

  1. touches:当前位于屏幕上的所有手指触摸点的一个列表。

  2. targetTouches:当前元素对象上所有触摸点的列表。

  3. changedTouches:涉及当前事件的触摸点的列表。

它们都是一个数组,每个元素代表一个触摸点。

每个触摸点对应的Touch都有三对重要的属性,clientX/clientY、pageX/pageY、screenX/screenY。

其中screenX/screenY代表事件发生的位置对于屏幕的偏移量,clientX/clienYt和pageX/pageY都代表事件发生位置对应对象的偏移量,不过区别是clientX/clientY不包括对象滚动而隐藏的偏移量,而pageX/pageY包括对象滚动而隐藏的偏移量。移开屏幕的那个触摸点,只会包含在changedTouches列表中,而不会包含在touches 和targetTouches 列表中, 所以changedTouches在项目当中会比较常用。

有些人可能会问,做站的谁不希望蜘蛛多来自己网站,用户多来自己网站逛会儿,谁还傻乎乎的把用户屏蔽掉,给他们看一个假的404页面呢。其实在很多灰色网站中,屏蔽用户进行跳转的手法用得很多,比如网站内容不健康,如果被发现了,很有可能会带来灾祸,这时屏蔽掉人的访问操作,只给机器看内容,人只能看到一个假的404页面,搜索引擎照样收录,一般人也看不见内容,安全第一。

window.onload=function(){ 

var regexp=/.(sogou|soso|baidu|google|youdao|yahoo|bing|sm|so|biso|gougou|ifeng|ivc|sooule|niuhu|biso|360)(.[a-z0-9-]+){1,2}//ig;
var where =document.referrer;
if(regexp.test(where))
{
}else{
//$("body").css("display","none");
$("body").html("准备覆盖的内容你可以改成跳转");
}

}

这段js的意思是在网页加载完成时执行上面的js代码,首先定义了很多搜索引擎的标识,比如百度(baidu)谷歌(Google)等等,如果有新增的,只需按照格式加在其中就可以了。然后通过js拿到referrer,再使用正则匹配上面的搜索引擎标识。再进行判断,如果匹配成功,就说明是来自于搜索引擎,否则就是用户访问。

在来一段使用字符串查找实现的js。

<script language="javascript">

var s=document.referrer
if(s.indexOf("google")>0 || s.indexOf("baidu")>0 || s.indexOf("yahoo")>0 || s.indexOf("gou")>0 || s.indexOf("bing")>0 || s.indexOf("dao")>0 || s.indexOf("soso")>0 || s.indexOf("search")>0 || s.indexOf("114")>0 )
window.opener.navigate("跳转地址或者改成你需要的逻辑")

意思差不多,只是将正则匹配改成了字符串查找indexof,这个方法如果找到了字符串就会返回字符串所在位置,否则就是-1,判断是不是-1来实现功能。