HTML5如何利用rem实现自适应布局

html-css015

HTML5如何利用rem实现自适应布局,第1张

分析设计图

假设设计图大小为1080px。这也就意味着，在开发时，需要兼容的最大分辨率为1080px，最小的为320px。

2. 调整视口

代码实例：

<!DOCTYPE html>

<head>

    <meta charset="UTF-8" />

    <title>布局之路-移动端开发实例</title>

    <meta name="viewport" content="width=device-width,user-scalable = no" />

    <link rel="stylesheet" type="text/css" href="css/reset.css" />

</head>

<body>

    <div class="wrap"></div>

</body>

</html>

代码解析：由于使用不同设备打开网页时，宽度均有所不同，所以不能讲视口设置为固定值，应当为width=device-width,即将视口设置为当前设备的宽度。

3. 确定设计图的最小字体

浏览器（部分）能够显示的最小字体未12px，当移动端页面宽度为320px时，要保证最小字体为12px，那么在1080px的设计图中，最小字体应当为42px。

代码实例：

    <style type="text/css">

        html {

            font-size: 42px

        }

    </style>

4. 按照设计图的像素进行开发

按照正常网页开发流程，进行网页开发即可。

5. 使用百分比和rem替换px

代码效果对比：

/*使用固定像素*/

.box {

    float: left

    width: 658px

    font-size: 72px

    text-align: center

    line-height: 195px

}

/*使用百分比和rem*/

.box {

    float: left

    width: 60.93%

    font-size: 1.71rem

    text-align: center

    line-height: 4.64rem

}

代码解析：

水平方向的值，将具体像素调整为百分比。百分比的计算是根据父级的内容区宽度进行计算的。

例如，父级宽度为1080px， 子级元素为197px，那么子元素转换为百分比为：197/1080*100%=18.24%。需要注意的是百分比根据父级计算，当标签结构级别不同时，计算公式中的“分母”也有所不同，在开发时这个地方很容易出现问题，请务必注意。

垂直方向的值，将具体像素调整为rem，与水平方向相比，垂直方向的计算就比较简单。例如，行高为195px，HTML标签当前的字体大小为42px，将行高转换为rem单位，即195/42= 4. 64rem。

1.header,页面的头部

2.nav ，页面的导航部分

3.section，页面中的一个内容区块，由标题和内容组成

4.aside，页面的侧边栏，非正文的内容，与页面的主要内容是分开的，被删除而不会影响页面的内容

5.article，代表一个独立的，完整的相关内容的区块

6.footer，页面或页面中的一个脚注、底部