移动web开发适配利器—rem
2018-02-04 本文已影响0人
jia林
移动web开发与适配
image.png
image.png
- meadia也可以写在link里面：
<link rel="stylesheet" type="text/css" href="" media="screen and (max-width:320px)">
//当屏幕小于等于320时，所使用的link
- 使用media时注意
/*当同时小于360px和320px时,应定义一个区间,否则将会覆盖*/
@media screen and (max-width:360px) and (min-width:321px){
/*code*/
}
@media screen and (max-width:320px){
/*code*/
}
rem
-
rem是 font size of the root element
image.png
- rem和根元素的font-size有关
- 浏览器默认的1rem = 16px;
动态修改font-size
- 使用media
@media screen and (max-width:360px) and (min-width:321px){
html{
font-size:22px;
}
}
@media screen and (max-width:320px){
html{
font-size:30px;
}
}
- 使用js
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.inner{
width:2rem;
height: 2rem;
border:1px solid #ccc;
}
</style>
</head>
<div class="inner"></div>
<body>
<script type="text/javascript">
window.addEventListener('resize',function(){
// 获取视窗宽度
let htmlWidth = document.documentElement.clientWidth || document.body.clientWidth;
//获取html
let htmlDom = document.getElementsByTagName('html')[0];
htmlDom.style.fontSize = htmlWidth / 10 + 'px'; //求出基准值
})
</script>
</body>
</html>
