移动web开发之rem布局
1.1 rem单位
rem (root em)是一个相对单位，类似于em，em是父元素字体大小。
不同的是rem的基准是相对于html元素的字体大小。
rem使用：
比如，根元素（html）设置font-size=12px; 非根元素设置width:2rem; 则换成px表示就是24px。
/* 根html 为 12px */
html {
font-size: 12px;
}
/* 此时 div 的字体大小就是 24px */
div {
font-size: 2rem;
}
2.1 媒体查询
@media mediatype and|not|only (media feature) {
CSS-Code;
}
注意：
- 用 @media开头 注意@符号
- mediatype 媒体类型
- 关键字 and not only
- media feature 媒体特性必须有小括号包含
- 示例代码：
<style>
/* 这句话的意思就是： 在我们屏幕上 并且 最大的宽度是 800像素 设置我们想要的样式 */
/* max-width 小于等于800 */
/* 媒体查询可以根据不同的屏幕尺寸在改变不同的样式 */
@media screen and (max-width: 800px) {
body {
background-color: pink;
}
}
/* 总结：媒体查询， 检测媒体（手机，电脑），的特征变化*/
@media screen and (max-width: 500px) {
body {
background-color: purple;
}
}
</style>
</head>
<body>
</body>
总结：
rem+媒体查询，实现屏幕大小改变，界面元素跟着一起改变的原理，实现顺序：
- 媒体查询作用，根据屏幕尺寸的范围，来切换html的font-size （界面元素的参照物跟着屏幕改变）
- 界面元素的大小都以rem为单位（rem代表参照物html的font-size）
扫一扫
274
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
