width=device-width
时,那么设备独立像素就等于CSS像素window.devicePixelRatio
@media only screen and (-webkit-min-device-pixel-ratio:2){}
document.documentElement.clientWidth
来获取布局视口值width=device-width
的情况下,即是布局视口的宽度等于设备独立像素,这种情况下,CSS像素就等于设备独立像素了window.innerWidth
获取,iphone6就是375px。<meta name="viewport" content="width=device-width">
可以使布局视口与理想视口的宽度一致ideal layout
<meta name="viewport"
content="width=device-width,initial-scale=1.0,maximum-scale=1">
|属性名|取值|描述| |width|正整数或device-width|定义视口的宽度,单位为像素| |height|正整数或device-height|定义视口的高度,单位为像素,一般不用| |initial-scale|[0.0-10.0]|定义初始缩放值| |minimum-scale|[0.0-10.0]|定义放大最大比例,它必须小于或等于maximum-scale设置| |maximum-scale|[0.0-10.0]|定义缩小最小比例,它必须大于或等于minimum-scale设置| |user-scalable|yes / no|定义是否允许用户手动缩放页面,默认值 yes|
当缩放比例为 100% 时,dip 宽度 = CSS 像素宽度 = 理想视口的宽度 = 布局视口的
width=device-width
的情况下,布局视口是980px;设置了width=device-width
的情况下,布局视口的大小等于设备独立像素initial-scale
值的变化对布局视口和视觉视口的影响:在iphone6下,该值变大的时候,CSS元素的面积变大,看到的内容变少了,所以布局视口和视觉是变小了为187;反之,设置initial-scale为0.5时,布局视口和视觉视口都会变大,变为750. width=device-width
和initial-scale
都设置了,谁的值大就听谁的.最终布局视口和视觉视口为750pxfont-size
<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>
html{
/* font-size:375/10; 37.5px*/
}
#box{
width:2rem;/* 75px */
height:2rem;/* 75px */
border:1px solid red;
}
</style>
<script>
let root = document.documentElement;
function resize(){
root.style.fontSize = root.clientWidth/10+'px';
}
resize();
window.addEventListener('resize',resize);
</script>
</head>
font-size
值cnpm i px2rem-loader lib-flexible -D
index.html
<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>
<script>
let docEle = document.documentElement;
function setRemUnit () {
//750/10=75 375/10=37.5
docEle.style.fontSize = docEle.clientWidth / 10 + 'px';
}
setRemUnit();
window.addEventListener('resize', setRemUnit);
</script>
</head>
<body>
<div id="root"></div>
</body>
*{
padding: 0;
margin: 0;
}
#root{
width:375px;
height:375px;
border:1px solid red;
box-sizing: border-box;
}
{
test:/\.css$/,//如果要require或import的文件是css的文件的话
//从右向左处理CSS文件,oader是一个函数
use:[{
loader:MiniCssExtractPlugin.loader,
options:{
publicPath: (resourcePath, context) => {
return '/';
}
//publicPath: '/'
}
},{
loader:'css-loader',
options:{
//Enables/Disables or setups number of loaders applied before CSS loader.
importLoaders:0
}
},{
loader:'postcss-loader',
options:{
plugins:[
require('autoprefixer')
]
}
},{
+ loader:'px2rem-loader',
+ options:{
+ remUnit:75,
+ remPrecesion:8
+ }
+ }]
+ },