html 根元素字体的大小 来变 

加上meta viewport标签

1rem  等于 默认的大小  

rem转换规则

1rem = 16px (浏览器默认font-size，可通过修改html的font-size改变大小)

移动端设置viewport

<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">"

width：控制 viewport 的大小，可以指定的一个值，如果 600，或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。
height：和 width 相对应，指定高度。
initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例。
maximum-scale：允许用户缩放到的最大比例。
minimum-scale：允许用户缩放到的最小比例。
user-scalable：用户是否可以手动缩放

1rem = 浏览器默认的font-size

可以通过修改HTML根font-size， 达到修改1rem默认值

如果把HTML 默认字体大小改为：17px; 
BOX 宽度设置为 10rem 就等于 10*17=170px

总结：页面默认的默认的字体大小，如果用 rem 做单位讲的话，所有默认都是 1rem ，但是 1rem 到底等于多少 px ，这个可以根据 html css 对 font-size: ?px; 来初始化设定

如果不设定，页面默认的字体大小是 16px ，详细请见上一条笔记

浏览器默认的字体大小就是 1rem ，也就是等同于 16px

web 移动端独有的 viewport 属性，看图

rem 的原理

1rem = 17px = (html的font-size)

1rem 等于浏览器上默认的font-size px 

使用rem的步骤：加入head标签

Viewport 基础

一个常用的针对移动网页优化过的页面的 viewport meta 标签大致如下：

<meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1″>

width：控制 viewport 的大小，可以指定的一个值，如果 600，或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。
height：和 width 相对应，指定高度。
initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例。
maximum-scale：允许用户缩放到的最大比例。
minimum-scale：允许用户缩放到的最小比例。
user-scalable：用户是否可以手动缩放

1.  不设置页面的字体大小时，默认为16px
   

2. 最小字体大小显示为12px，

3. 可以通过修改html的文字大小来改变一下以rem计算的div宽高或者文字的字体大小
   

通过设计html的 font-size 来确认rem的值

如 html{font-size：17px}

rem=17px

如果font-size=16px，rem=16px；

1 rem = 16px;

rem是针对html设置的字体来算的，默认1rem=16px; html的font-size设置为多少px，1rem就等于多少px

1rem=16px

可以通过设置html全局的font-size来对rem定义为多少px

1rem=17px=（html的font-size）

1rem默认是16px

可以通过设置html全局的font-size来对rem进行初始化