文章目录
一、移动端适配
1、什么是移动端适配
2、认识视口
<!-- width: 设置布局视口的宽度 -->
<meta name="viewport"
content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
3、移动端适配方案
3.1 媒体查询
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
@media screen and (min-width: 320px) {
html {
font-size: 20px;
}
}
@media screen and (min-width:375px) {
html {
font-size: 30px;
}
}
@media screen and (min-width:400px) {
html {
font-size: 40px;
}
}
@media screen and(min-width:500px) {
html {
font-size: 50px;
}
}
.box {
width: 5rem;
height: 5rem;
background-color: orange;
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
</html>
3.2 js动态计算
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 设置font-size之后页面不会随便继承html的大小 */
body {
font-style: 16px;
}
.box {
width: 5rem;
height: 5rem;
background-color: orange;
}
p {
font-style: 0.5rem;
}
</style>
</head>
<body>
<div class="box"></div>
<p>我是文本</p>
<span>哈哈哈</span>
<script>
// 1.获取html的元素
const htmlEl = document.documentElement
function setRemUnit() {
// 2.获取html的窗口宽度
const htmlWidth = htmlEl.clientWidth
// 3.根据宽度计算一个html的font-size的大小
const htmlFontSize = htmlWidth / 10
// 4.将font-size甚至到html
htmlEl.style.fontSize = htmlFontSize + 'px'
}
// 保证第一次进来的时候,触发一次
setRemUnit()
// 当屏幕尺寸发生变化的时候,实时修改html的font-size
window.addEventListener('resize', setRemUnit)
// 当页面发生跳转的时候触发,前进后退按钮
window.addEventListener('pageshow', function (e) {
if (e.persisted) {
setRemUnit()
}
})
</script>
</body>
</html>
3.3 使用库
4、rem计算的方法
4.1 手动计算
<style>
/* 假设设计稿为750px 将他视为10份 每一份为37.5 */
/* 即1rem = 37.5px 100px = 100/37.5rem */
.box {
width: 2.66667rem;
height: 2.66667rem;
background-color: orange;
}
p {
font-size: 0.373333rem;
}
</style>
4.2 通过less计算
- 使用lessc插件 使得可以使用less编译器 lessc.org
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet/less" href="./rem_less/index.less">
<script src="./js/hy_flexible.js"></script>
<script src="./js/lessc.js"></script>
</head>
<body>
<div class="box">
</div>
<p>我是文本</p>
</body>
</html>
.pxToRem(@px) {
result: 1rem * (@px/37.5)
}
.box {
width: .pxToRem(100)[result];
height: .pxToRem(100)[result];
background-color: orange;
}
p {
font-size: .pxToRem(14)[result];
}
4.3 postcss-pxtorem
http://www.3qphp.com/web/javascript/4854.html