方法一:rem
1.原理
等比缩放
2.步骤
2.1 <head>标签内统一视口
<!-- 1.统一视口 -->
<meta name="viewport" content="width=device-width,initial-scale=1.0,
minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
2.2 <body>标签内根据设备宽度计算font-size
<!-- 2.根据设备宽度计算font-size -->
<script>
function resetHtmlFont() {
// font-size=设备宽度/n,一般将页面分成10等份
//(若设备宽度为750px,则font-size=750/10=75px)
document.documentElement.style.fontSize = screen.width / 10 + 'px';
}
resetHtmlFont();
//窗口大小变化,重新计算font-size,实现实时适配
window.onresize = resetHtmlFont;
</script>
2.3 根据缩放比例设置元素的rem
/* 3.根据缩放比例设置元素的rem */
/* (若设计稿中元素尺寸为375px,则375px/75px=5rem,即为font-size的5倍) */
.box {
width: 5rem;
height: 5rem;
background-color: pink;
}
2.4 完整代码即运行结果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<!-- 1.统一视口 -->
<meta name="viewport"
content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<style>
* {
margin: 0;
padding: 0;
}
/* 3.根据缩放比例设置元素的rem */
/* (若设计稿中元素尺寸为375px,则375px/75px=5rem,即为font-size的5倍) */
.box {
width: 5rem;
height: 5rem;
background-color: pink;
}
</style>
</head>
<body>
<div class="box"></div>
<!-- 2.根据设备宽度计算font-size -->
<script>
function resetHtmlFont() {
// font-size=设备宽度/n,一般将页面分成10等份
//(若设备宽度为750px,则font-size=750/10=75px)
document.documentElement.style.fontSize = screen.width / 10 + 'px';
}
resetHtmlFont();
//窗口大小变化,重新计算font-size,实现实时适配
window.onresize = resetHtmlFont;
</script>
</body>
</html>
方法二:媒体监听
1.原理
PC端一个布局,移动端一个布局,设置一个px值,当屏幕尺寸大于该值时使用PC端布局,小于该值时使用移动端布局
2.案例
小米官网顶部的导航
3.步骤
3.1 标准视口
<!-- 1.标准视口 -->
<meta name="viewport"
content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
3.2 媒体监听
/* 2.媒体监听: 屏幕小于750px时,更换css样式*/
<style>
//2.1 先写PC端样式
@media screen and (max-width: 750px) {
//2.2 修改PC端样式匹配移动端
}
<style>
3.3 完整代码即效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<!-- 1.标准视口 -->
<meta name="viewport"
content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<style>
.header {
width: 100%;
height: 82px;
background-color: black;
}
.header .header-center {
width: 1200px;
height: 100%;
margin: 0 auto;
}
.header .header-center .nav {
width: 100%;
height: 100%;
padding: 0;
}
ul {
list-style-type: none;
}
.header .header-center .nav-item {
float: left;
width: 300px;
height: 100%;
text-align: center;
line-height: 82px;
font-size: 20px;
color: white;
}
/* 2.媒体监听: 屏幕小于750px时,更换css样式*/
@media screen and (max-width: 750px) {
.header {
height: 40px;
}
.header .header-center {
width: 100%;
position: relative;
}
.header .header-center .nav {
height: auto;
position: absolute;
top: 40px;
left: 0;
margin: 0;
background-color: black;
}
.header .header-center .nav-item {
float: none;
width: 100%;
height: 40px;
text-align: center;
line-height: 40px;
font-size: 16px;
}
}
</style>
</head>
<body>
<div class="header">
<div class="header-center">
<!-- 导航 -->
<ul class="nav">
<li class="nav-item">小米官网</li>
<li class="nav-item">小米商城</li>
<li class="nav-item">小米澎湃OS</li>
<li class="nav-item">小米汽车</li>
</ul>
</div>
</div>
</body>
</html>
ps: 要完整复刻小米官网的顶部导航效果需要用到js,暂时还不会,等学会了再更新