3.移动端适配
#3.1.百分比适配
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta ="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div {
width: 25%;
height: 100px;
float: left;
}
.box_1{
background-color: #673AB7;
}
.box_2 {
background-color: #E91E63;
}
.box_3 {
background-color: #009688;
}
.box_4 {
background-color: #FF5722;
}
</style>
</head>
<body>
<div class="box_1"></div>
<div class="box_2"></div>
<div class="box_3"></div>
<div class="box_4"></div>
</body>
</html>
百分比适配这种方式比较简单，但缺点是高度无法适配，因为高度通常都不确定，所以，百分比适配这种方案一般是宽度适配
#3.2.viewport适配
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
<script>
(function(){
// 固定目标宽度
var targetWidth = 320
// 获取屏幕宽度
var w = window.screen.width
// 算出设备屏幕宽度是目标宽度的多少倍
var scale = w / targetWidth
// 创建一个meta标签
var meta = document.createElement('meta')
meta.name = "viewport"
meta.content="user-scalable=no, initial-scale="+scale+",minimum-scale="+scale+",maximum-scale="+scale
document.head.appendChild(meta)
})()
</script>
<meta ="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body{
margin: 0;
}
div {
width: 80px;
height: 100px;
float: left;
}
.box_1{
background-color: #673AB7;
}
.box_2 {
background-color: #E91E63;
}
.box_3 {
background-color: #009688;
}
.box_4 {
background-color: #FF5722;
}
</style>
</head>
<body>
<div class="box_1"></div>
<div class="box_2"></div>
<div class="box_3"></div>
<div class="box_4"></div>
</body>
</html>
viewpoint的适配的核心思想是通过控制viewport的缩放来实现各种设备的适配，我们在写的时候是按某个固定宽度来写的
#3.3.rem适配
rem是一个字体单位，值会根据html元素大小变化而变化，宽度和高度我们都可以用rem来表示，使用rem做适配的原理就是把页面元素的px单位换成rem单位，然后动态的修改html的字体大小，html字体大小变化了，那么以rem为单位的子元素大小也会跟着变化
这里比较关键的是动态的去设置html字体的大小，这里设置的依据是根据不同设备的宽度来进行设置的，这样我们就能在不同的设备上展示不同的大小，从而达到不同尺寸设备的适配
1.1rem等于浏览器默认的html元素的font-size值
.html {
font-size: 16px;
}
p {
font-size: 2rem; /* 2 * 16 = 32px */
}
2.动态的修改html元素font-size大小,通俗的说就是设置1rem的长度
var rem = document.documentElement.clientWidth / 10
document.document.documentElement.style.fontSize = rem + "px"
注意：上面 “document.documentElement.clientWidth / 10” 这里的10可以是其他的值， 20、30 都可以，我们在做px转rem的时候要用到
3.使用的时候，我们需要将px转成rem，举个例子：设计稿宽度是750px， 其中有一个盒子的宽度是100px，高度是100px，如果在iphone6下面显示，应该如何用rem来表示这个盒子的宽高呢
公式： 像素/rem基准值
在iphone下面，document.documentElement.clientWidth的值为375，rem基准值为 375/10=37.5，那么，100px转换成rem为：
100px/37.5 = 2.66667rem(约等于)
#3.4.基于vw的适配方案
在css3中引入了视口单位，vw表示视口的宽度，vh表示视口的高度，也就是把视口平均分成100份，每一份为1个单位，那么1vw = 1%视口宽度，1vh = 1%视口高度
image
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- <script>
document.documentElement.style.fontSize = document.documentElement.clientWidth / 100 + "px"
</script> -->
<meta ="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body{
margin: 0;
}
div {
width: 100vw;
height: 10vh;
float: left;
}
.box_1{
background-color: #673AB7;
}
.box_2 {
background-color: #E91E63;
}
.box_3 {
background-color: #009688;
}
.box_4 {
background-color: #FF5722;
}
</style>
</head>
<body>
<div class="box_1"></div>
<div class="box_2"></div>
<div class="box_3"></div>
<div class="box_4"></div>
</body>
</html>
网友评论