rem布局

移动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基础 

 

上一篇:如何将背景音乐添加到iMovie?


下一篇:【Android】从共享存储访问媒体文件