版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/DreamFJ/article/details/81986264
常见适配方法
- PC端
- 最外层容器定宽居中（960px/1000px居中）
- 盒子模型，定高，定宽
- display: inline-block
- 移动web
- 定高，宽度百分比
- flex
- media query（媒体查询）
Media Query（媒体查询）
@media 媒体类型 and (媒体特性){
/*css样式*/
}- 媒体类型
- screen
- ...
- 媒体特性
- max-width
- max-height
- ...
- eg
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>移动端适配</title> <style type="text/css"> .box { width: 100%; height: 100px; background-color: red; } .inner:nth-child(1) { background-color: blue; } .inner:nth-child(2) { background-color: red; } .inner:nth-child(3) { background-color: blue; } .inner:nth-child(4) { background-color: red; } /* 屏幕宽度小于等于320px时inner的样式 */ @media screen and (max-width:320px) { .inner { width: 25%; height: 100px; float: left; } } /* 屏幕宽度大于等于321px时inner的样式 */ @media screen and (min-width:321px) { .inner { width: 100%; height: 100px; } } </style> </head> <body> <div class="box"> <div class="inner"></div> <div class="inner"></div> <div class="inner"></div> <div class="inner"></div> </div> </body> </html>
rem
- 字体单位（值根据html根元素的font size大小而定，同样可以作为宽度、高度等单位）
- 适配原理（将px替换成rem，动态修改html的font-size适配）
- 兼容性（ios 6以上和android 2.1以上，基本覆盖所有流行的手机系统）
- eg
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>测试rem</title> <style type="text/css"> .box { width: 10rem; height: 10rem; background-color: red; } .text { color: #fff; font-size: 1rem; } /* html默认的font-size是16px，所以这里1rem = 16px; */ </style> </head> <body> <div class="box"> <p class="text">hello rem</p> </div> </body> </html>
-
利用media query动态修改html的font-size以适应不同的机型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>测试rem</title>
<style type="text/css">
.box {
width: 10rem;
height: 10rem;
background-color: red;
}
.text {
color: #fff;
font-size: 1rem;
}
/* 屏幕宽度<=320px时的html的font-size */
@media screen and (max-width:320px) {
html {
font-size: 24px;
}
}
/* 321px<=屏幕宽度<=360px时的html的font-size */
@media screen and (max-width: 360px) and (min-width:321px) {
html {
font-size: 20px;
}
}
</style>
</head>
<body>
<div class="box">
<p class="text">hello rem</p>
</div>
</body>
</html>但是，移动端的机型实在是太多了，如果全部用上面方法去做适配，那样太麻烦了！下面用另一种方法去修改html的font-size，通过js去修改。
利用js动态修改html的font-size以适应不同的机型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>测试rem</title>
<style type="text/css">
.box {
width: 10rem;
height: 10rem;
background-color: red;
}
.text {
color: #fff;
font-size: 1rem;
}
</style>
</head>
<body>
<div class="box">
<p class="text">hello rem</p>
</div>
<script type="text/javascript">
// 获取视窗宽度
var htmlWidth = document.documentElement.clientWidth || document.body.clientWidth;
// 获取视窗元素
var htmlDom = document.getElementsByTagName('html')[0];
htmlDom.style.fontSize = htmlWidth / 10 + 'px';
</script>
</body>
</html>