移動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>
