rem + 媒体查询
2020-02-11 本文已影响0人
这是这时
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<title>rem适配</title>
<style>
body {
margin: 0;
padding: 0;
}
html {
font-size: 50px;/*把页面所有的px都变成rem*/
}
header {
width: 100%;
height: 1.2rem;
line-height: 1rem;
text-align: center;
font-size: 1rem;
color: #fff;
background-color: #f00;
}
/*
* 1、流式布局适配方式：
* 只达到宽度的适配
* 内容没有自适应改变高度，高度也没有自适应改变
*
* 2、rem适配方式：
* 1、高度和宽度都自适应 内容可自适应 等比例缩放
* 2、当我在改变rem的基准值html的字体大小的时候，页面上的容器在等比例缩放
*/
/*
* 3、适配：
* 假设320px的设备 设置字体的大小是 50px
* 假设640px的设备 设置字体的大小是 100px
*/
/*4、使用媒体查询*/
@media (min-width: 320px) {
html {
font-size: 50px;
}
}
/*5、需要适配移动端主流的设备 有很多 这里以iphone6 375px 为例*/
/*但这个方法比较麻烦，要一个一个适配 用less可以解决这个问题*/
/* 375/640*100=58.59375px */
@media (min-width: 320px) {
html {
font-size: 50px;
}
}
/*5、需要适配移动端主流的设备 有很多 这里以iphone6 375px 为例*/
/*但这个方法比较麻烦，要一个一个适配 用less可以解决这个问题*/
@media (min-width: 375px) {
html {
font-size: 58.59375px; /* 375/640*100=58.59375px */
}
}
@media (min-width: 640px) {
html {
font-size: 100px; /* 640/320*50=100px */
}
}
</style>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
function fn(){
let htmlWidth = document.documentElement.clientWidth ||document.body.clientWidth;
let htmlDom = document.getElementsByTagName('html')[0];
htmlDom.style.fontSize = htmlWidth / 10 + 'px'
}
$(window).on('resize', function () {
fn()
});
</script>
</head>
<body>
<header>购物车</header>
</body>
</html>
