rem和媒体查询

1. rem单位

1）em

em是一个相对的长度单位，与盒子自身的font-size值有关；

1em = 盒子中自身字体的大小 * 1

rem是一个相对的长度单位，始终参照html中设置的字体大小。

1rem = html标签中字体的大小 * 1

 1 html {
 2       font-size: 50px;
 3 }
 4 div {
 5     font-size: 20px;
 6     width: 10em; /*200px*/ 
 7     height: 10em;  /*200px*/
 8     width: 10rem;  /*500px*/
 9     height: 10rem;  /*500px*/
10 }

2）使用rem做适配

在不同设备下，只需要更改html中的 font-size 即可。

人为将UI图横向划分为指定的份数20份（如果UI图 width=640px ）

计算出1份所占的大小： 640 / 20 = 32px

把计算出的1份的大小设置给 html { font-size: 32px;}

1rem = 32px

 

2. 媒体查询

媒体指各种设备，查询指要检测属于哪种设备，通过查询当前属于哪种设备,让网页能够在不同的设备下正常的预览。

1）媒体类型

all (所有的设备)

print (打印设备)

screen(电脑屏幕,平板电脑,智能手机)

2）语法

@media not | only 媒体类型 and (特性条件)

• and 可以将多个媒体特性链接到一块，相当于 且 &；
• not 排除某个媒体特性 相当于 非 ! （可以省略）
• only 指定某个特定的媒体类型 （可以省略）

 1 /*若屏幕大小是320时，div的样式时这样的*/
 2     @media only screen and (width:320px) {
 3       div {
 4         width: 100%;
 5         height: 200px;
 6         background: red;
 7       }
 8     }
 9 /*若除了屏幕大小是320时，其他大小的屏幕的div的样式时这样的*/
10     @media not screen and (width:320px) {
11       div {
12         width: 100%;
13         height: 200px;
14         background: red;
15       }
16     }

3）外联式语法

1 <link rel="stylesheet" href="index.css" media="screen and (min-width:640px)">