手记

rem布局

一、rem

1.em单位

em是相对 “父元素” 的 “字体大小” 来说的。

设置父元素的字号为12px,子元素的高宽都为10em,实际上子元素的宽高就是120px

<style type="text/css">
div{
    font-size: 12px;
}
p{
    width: 10em;
    height: 10em;
    background-color: lightpink;
}
</style>
<body>
   <div id="">
      <p></p>
   </div>
</body>


2.rem单位

rem(root em) 是一个相对单位,类似于em,em是父元素字体大小

不同的是,rem的基准是相对于 html 元素的字体大小。

比如,根元素(html)设置 font-size=12px;非根元素设置 width:2rem;则换成px表示就是24px。

优点:

 可以通过修改html里面的文字大小来改变页面中元素的大小,可以整体控制

二、媒体查询

2.1 什么是媒体查询

媒体查询(Media Query)是CSS3新语法。

  • 使用@media查询,可以针对不同的媒体类型定义不同的样式

  • @media 可以针对不同的屏幕尺寸设置不同的样式

  • 当你重置浏览器大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面

  • 目前针对很多苹果手机、Android手机、平板等设备都用得到媒体查询

2.2 语法规范

@media mediatype and|not|only (media feature) {
    CSS-Code;
}
  • 用 @media 开头 注意 @ 符号

  • mediatype 媒体类型

  • 关键字 and not only 

  • media feature 媒体特性,必须有小括号包含

  1. mediatype查询类型

    将不同的终端设备划分成不同的类型,成为媒体类型

    

    2.关键字

    关键字将媒体类型货多个媒体特性链接到一起作为媒体查询的条件

  •     and :可以将多个媒体特性连接到一起,相当于“且”的意思

  •    not :    排除某个媒体类型,相当于“非”的意思,可以省略

  •    only:指定某个特定的媒体类型,可以省略

    3.媒体特性

    每种媒体类型都具有各自不同的特性,根据不同的媒体类型的媒体特性设置不同的展示风格,注意他们要加小括号包含

    

    媒体查询一般按照从小到大或者从大到小的顺序来

    

注意:1.screen 还有 and必须带上,不能省略

          2.媒体特性的数字后面必须跟单位  970px 这个 px 不能省略

引入资源

0人推荐
随时随地看视频
慕课网APP