版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/z_x_Qiang/article/details/85952633
1.em单位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
/*
* em:自身的fontsize
*
谷歌下字体的默认大小为16px
谷歌下字体的最小大小为12px
*/
*{
margin: 0;
padding: 0;
}
#test {
/**
em:自身的fontsize
width相当于10em*20px=200px
*/
width: 10em;
height: 10em;
background: pink;
font-size: 20px;
}
</style>
</head>
<body>
<div id="test"></div>
</body>
</html>2.rem单位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
/*
* rem：相当于html根标签的fontsize
* 根标签的fontsize = 1rem
*
* 适配：实现页面在不同设备上等比
*/
*{
margin: 0;
padding: 0;
}
html{
font-size: 10px;
}
#test {
/**
rem：相当于html根标签的fontsize
width相当于10rem*10px=100px
*/
width: 10rem;
height: 10rem;
background: pink;
font-size: 20px;
}
</style>
</head>
<body>
<div id="test"></div>
</body>
</html>3.rem单位优化
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
<title></title>
<style type="text/css">
/*
* rem：相当于根标签的fontsize
* 根标签的fontsize = 1rem
*
* 适配：实现页面在不同设备上等比
*/
*{
margin: 0;
padding: 0;
}
#test{
width: 8rem;
height: 1rem;
background: pink;
}
</style>
</head>
<body>
<div id="test">test</div>
</body>
<script type="text/javascript">
/*var html = document.querySelector("html");
html.style.fontSize = document.documentElement.clientWidth/16+"px!important"; 错！！！
*/
//rem适配
//rem适配原理：改变了一个元素在不同设备上占据的css像素的个数
/*rem适配的优缺点
优点:没有破坏完美视口
缺点:px值到rem的转换太复杂*/
(function(){
var styleNode = document.createElement("style");
var w = document.documentElement.clientWidth/16;
styleNode.innerHTML = "html{font-size:"+w+"px!important}";
document.head.appendChild(styleNode);
})()
</script>
</html>
4.viewport适配
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width"/>
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#test{
width: 320px;
height: 100px;
background: pink;
}
</style>
</head>
<body>
<div id="test">test</div>
</body>
<script type="text/javascript">
//将所有设备布局视口的宽度调整为设计图的宽度
/*var targetW = 640;
var scale = screen.width/targetW;
var meta = document.createElement("meta");
meta.name = "viewport";
meta.content="initial-scale="+scale+",minimum-scale="+scale+",maximum-scale="+scale+",user-scalable=no";
document.head.appendChild(meta);*/
//viewport
/*viewport适配的原理：
viewport适配方案中，每一个元素在不同设备上占据的css像素的个数是一样的。但是css像素和物理像素的比例是不一样的，等比的*/
/*viewport适配的优缺点：
优点:所量即所得
缺点:没有使用完美视口*/
(function(){
var targetW = 640;
var scale = document.documentElement.clientWidth/targetW;
var meta = document.querySelector("meta[name='viewport']");
meta.content="initial-scale="+scale+",minimum-scale="+scale+",maximum-scale="+scale+",user-scalable=no";
})()
</script>
</html>
5.一物理像素
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0"/>
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#test{
width: 16rem;
height: 1px;
margin-top: 1rem;
background: black;
}
</style>
</head>
<body>
<div id="test"></div>
</body>
<script type="text/javascript">
window.onload=function(){
(function(){
var dpr = window.devicePixelRatio||1;
var styleNode = document.createElement("style");
var w = document.documentElement.clientWidth*dpr/16;
styleNode.innerHTML="html{font-size:"+w+"px!important}";
document.head.appendChild(styleNode);
var scale = 1/dpr;
var meta = document.querySelector("meta[name='viewport']");
meta.content="width=device-width,initial-scale="+scale;
})()
}
</script>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0"/>
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#test{
width: 100%;
height:1px ;
margin-top: 50px;
background: black;
}
@media only screen and (-webkit-device-pixel-ratio:2 ) {
#test{
transform: scaleY(.5);
}
}
@media only screen and (-webkit-device-pixel-ratio:3 ) {
#test{
transform: scaleY(.333333333333333333);
}
}
</style>
</head>
<body>
<div id="test"></div>
</body>
</html>