1. 响应式设计 VS. 自适应设计
2. 何时选择响应式设计?
3. 响应式设计的技术手段?
4. 详解 REM
4.1. 什么是 REM?
Represents the font-size of the root element (typically <html>). When used within the root element font-size, it represents its initial value (a common browser default is 16px, but user-defined preferences may modify this).
兼容性:
示例:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
html {
font-size: 20px;
}
body {
font-size: 16px;
}
p {
font-size: 2rem;
border: .5rem solid blue;
padding: .5rem;
margin: 2rem;
}
</style>
</head>
<body>
<p>HelloWorld</p>
</body>
</html>
4.2. REM 布局的本质?
REM 布局的本质是等比缩放,一般是基于宽度。
4.3. 辅助工具?
4.4. 协作模式?
下面这张图是淘宝设计师分享的他们的工作流程:
解释:
由此完成大中小三屏适配。
4.5. 一个例子
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />
<style>
* {
box-sizing: border-box;
}
p {
margin: 0;
}
.rem-demo{
width: 3rem;
padding: 0.64rem 0.16rem 0.16rem 0.16rem;
margin: auto;
background-color: orange;
}
.rem-demo-content {
padding: .16rem;
background-color: #fff;
}
.rem-demo-content > .text {
border: 2px solid #E4E4E4;
height: .24rem;
margin-bottom: .08rem;
}
.rem-demo-content > .item {
border: 2px solid #E4E4E4;
height: .24rem;
background-color: #FFDAB4;
}
</style>
</head>
<body>
<div class="rem-demo">
<div class="rem-demo-content">
<p class="text">
这是一段文字
</p>
<div class="item">
这是一段组件
</div>
<p class="text">
这又是一段文字
</p>
<div class="item">
这又是一段文字
</div>
</div>
</div>
<script type="text/javascript">
!function(e, t) {
var n = t.documentElement;
function i() {
var e = n.clientWidth / 3.75;
n.style.fontSize = e + "px"
}
t.body.style.fontSize = "16px";
i();
e.addEventListener("resize", i);
e.addEventListener("pageshow", function(e) {
e.persisted && i()
});
} (window, document)
</script>
</body>
</html>
参考:
Responsive design versus adaptive design: https://developer.mozilla.org/en-US/docs/Archive/Apps/Design/UI_layout_basics/Responsive_design_versus_adaptive_design The building blocks of responsive design: https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Responsive/responsive_design_building_blocks 响应式设计: https://developer.mozilla.org/zh-CN/docs/Web_Development/Mobile/Responsive_design CSS Device Adaptation Module Level 1: https://drafts.csswg.org/css-device-adapt/ The Ultimate Guide To iPhone Resolutions: https://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions caniuse——rem: https://www.caniuse.com/?search=rem amfe-flexible: https://github.com/amfe/lib-flexible/blob/2.0/index.js postcss-pxtorem: https://github.com/cuth/postcss-pxtorem#readme