一、PC端与移动端自动切换相应的链接地址
<script type="text/javascript">
$(function(){
try {
var urlhash = window.location.hash;
if (!urlhash.match("fromapp")){
//移动端
if ((navigator.userAgent.match(/(iPhone|iPod|Android|ios|iPad)/i))){
window.location.href='/cn/index.htm';
//pc端
}else{
window.location.href='/cn/index.htm';
}
}
}catch(err){}
});
</script>
二、媒体查询关键代码
一共需要两步(head里面加meta+媒体查询的尺寸限制)
2.1 head里面的代码
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width,height=device-height">
2.2 需要写的代码
/*只有在PC下才执行的样式*/
@media screen and (min-width: 992px) {
h1 {
font-size: 36px;
margin: 30px 0 10px 0;
}
.box {
border: 1px solid #a33;
color: #a33;
background-color: #fee;
margin: 10px;
padding: 10px;
}
}
/*只有在PAD下才执行的样式*/
@media screen and (min-width: 768px) and (max-width: 992px) {
h1 {
font-size: 28px;
margin: 20px 0 10px 0;
}
.box {
border: 1px solid #3a3;
color: #3a3;
background-color: #efe;
margin: 10px;
padding: 10px;
}
}
/*只有在PHONE下才执行的样式*/
@media screen and (max-width: 767px) {
h1 {
/*font-size: 28px;
margin: 20px 0 10px 0;*/
display: none;
}
.box {
border: 1px solid #33a;
color: #33a;
background-color: #eef;
margin: 10px;
padding: 10px;
}
}
三、rem的使用方法
操作步骤: