前端基础知识第三章---移动端WEB开发之rem适配布局
作者: 时间:2022-03-06阅读数:人阅读
前言 | ❤️ 我不停奔跑,只为追赶当年被寄予厚望的自己 ❤️ |
---|
前端基础知识第三章---移动WEB开发之rem适配布局
一、rem 基础
1️⃣ rem (root em)是一个相对单位,类似于em,em是父元素字体大小;
2️⃣ 不同的是rem
的基准是相对于html元素的字体大小;
3️⃣ rem的优势:父元素文字大小可能不一致,但是整个页面只有一个html,可以很好来控制整个页面的元素大小;
代码演示如下:
/* 根html 为 12px */
html {
font-size: 12px;
}
/* 此时 div 的字体大小就是 24px */
div {
font-size: 2rem;
}
二、媒体查询
(1)什么是媒体查询
媒体查询(Media Query)是CSS3新语法。
- 使用 @media 查询,可以针对不同的媒体类型定义不同的样式;
- @media 可以针对不同的屏幕尺寸设置不同的样式;
- 当你重置浏览器大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面;
- 目前针对很多苹果手机、Android手机,平板等设备都用得到多媒体查询;
(2)语法规范
代码演示如下:
@media mediatype and|not|only (media feature) {
CSS-Code;
}
本站所有文章、数据、图片均来自互联网,一切版权均归源网站或源作者所有。
如果侵犯了你的权益请来信告知我们删除。邮箱:licqi@yunshuaiweb.com
上一篇:最详细完整的flex弹性布局
下一篇:CSS基础之CSS文本属性