前端适配和响应式布局

前端适配/响应式布局

响应式布局指的是同一页面在不同屏幕尺寸下有不同的布局。传统的开发方式是PC端开发一套，手机端再开发一套，而使用响应式布局只要开发一套就够，缺点就是CSS比较重。

1. em和rem

• px：固定像素，一旦设置了就无法适应页面大小而改变

• em：em相对于父元素的font-size

  使用em的注意点：

  1. body选择器中声明font-size=62.5%

     参考：任意浏览器的默认字体高都是16px。未经调整的浏览器都符合: 1em=16px

  2. 将你的原来的px数值除以10，然后换上em作为单位

• rem：rem只相对于根元素html的font-size

  rem既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应

  对于不支持它的浏览器，应对方法也很简单，就是多写一个绝对单位的声明

em和rem都是相对长度，更适用于响应式布局，更加灵活

但是rem存在一个问题：在响应式布局中，必须通过js来动态控制根元素font-size的大小，也就是说css样式和js代码有一定的耦合性，且必须将改变font-size的代码放在css样式之前

下述代码中将视图容器分为10份，font-size用十分之一的宽度来表示，最后在header标签中执行这段代码，就可以动态定义font-size的大小，从而1rem在不同的视觉容器中表示不同的大小，用rem固定单位可以实现不同容器内布局的自适应。

function refreshRem() {
    var docEl = doc.documentElement;
    var width = docEl.getBoundingClientRect().width;
    var rem = width / 10;
    docEl.style.fontSize = rem + 'px';
    flexible.rem = win.rem = rem;
}
win.addEventListener('resize', refreshRem);

2. vw动态改变font-size

在rem布局中，我们可以使用js根据不同设备的视口宽度动态改变rem所参照的根元素的font-size

vw(view width)即视图宽度，能够通过纯css动态改变font-size

使用vw的应用包括：爱奇艺，淘宝等网页端项目

vw概念

vw和vh是两个类似的概念，vw是将屏幕的宽度划分成了100份

1 vw = (1 /100) width

例如iphone6的屏幕宽度为375，那么1vw = 3.75

那么为了得到100px，则 26.666667vm = 100px，我们可以基于iphone6机型，使用100px为基础更加方便的计算rem和web应用的开发

html{
    font-size: 26.666667vw;
}
body{
    font-size: .16rem;
}

注意：需要将body的font-size进行设置，防止未设置font-size的元素过大

兼容

• Android：自 4.4 版起就完美支持（2013年12月）
• iOS：自 iOS8 版起就完美支持（2014年9月）

3. 适配工具

在这里为大家提供一个px,em,rem单位转换工具。
地址：http://pxtoem.com/