移动web开发之rem布局
rem 单位
rem (root em) 是一个相对单位,类似于em, em 是父元素字体大小
不同的是rem的基准是相对于html元素的字体大小
rem使用:
比如,根元素(html)设置font-sizi=12px ,非根元素设置width:2rem,则换成px表示就是24px.
/* 根html 为 12px */
html {
font-size: 12px;
}
/* 此时 div 的字体大小就是 24px */
div {
font-size: 2rem;
}
rem的优势: 父元素文字大小可能不一致,但是整个页面只有一个html,可以很好来控制整个页面的元素大小
媒体查询
什么是是媒体查询:
1.使用@media查询.可以针对不同的媒体类型定义不同的样式
2.@media可以针对不同的屏幕尺寸设置不同的样式
3.当你重置浏览器大小的过程中,页面也会根据浏览器的宽度和高度重新熏染页面
4.目前针对很多屏苹果手机,Android手机,平板等设备都用得到媒体查询
语法规范:
@media mediatype and|not|only (media feature) {
CSS-Code;
}
注意:
1.用@media开头,注意用@符号
2.mediatype 媒体类型
3.关键字 and not only
4.media feature 媒体特性必需有小括号包含
关键字详细说明:
1. mediatype 媒体类型
将不同的终端设备划分成不同的类型,称为媒体类型(理解为设备类型.非屏幕,屏幕)
值 解释说明
all 用于所有设备
print 用于打印机和打印预览
scree 用于电脑屏幕,平板电脑,智能手机等
2.关键字
关键字将媒体类型或多个媒体特性链接到一起作为媒体查询的条件
and : 可以将多个媒体特性链接到一起,相当于"且"的意思
not : 排除某个媒体类型,相当于"非"的意思,可以省略
only: 指定某个特定的媒体类型,可以省略
3.媒体特性
注意:要加小括号
值 解释说明
width 定义输出设备中页面可见区域的宽度
min-width 定义输出设备中页面最小可见区域 (达到最小值才会有样式)
最小屏幕宽度
(当屏幕大于多少时用 min-width)
max-width 定义输出设备中页面最大可见区域宽度 (超过最大值样式无效)
最大屏幕宽度
(小于等于)
(当屏幕小于多少时用 max-width)
总结:
1.为了防止混乱,媒体查询我们要按照从小到大或者从大到小的顺序来写
但是我们最喜欢的还是从小到大来写,这样代码更简洁
2.rem+媒体查询,实线屏幕大小改变,界面元素跟着一起改变的原理.
实现顺序:
1.媒体查询作用,根据屏幕尺寸的范围,来切换html的font-sizi(界面元素的参照物跟着屏幕改变)
2.界面元素的大小都以rem为单位(rem代表参照物html的font-sizi)
less基础