网页适配小技巧一

我们这里指的是原生的html代码，因为先写好原生的才能更好的驾驭框架嘛！

1.字体问题

 字体的单位：px em rem

 px：像素单位，这个是现在网页设计的一个bug 我都很不喜欢用，因为现在的设备千奇百怪，什么样子的都有，用像素来做单位是非常不保险的。

 em：根据父级元素得到子元素的大小 比如父元素font-size=16px 子元素font-size=1.5em 那么换算下来子元素的font-size=16px*1.5=24px

 这个相对与px要好些，但是如果网页结构的代码（层数）过多的话，经常会绕的你头晕，以前写网页时还不能搞懂em具体指什么，初学时觉得很神奇，把父级和子级元素改成一样的em 发现emmm 貌似长的不是很像，而且会发现牵一发动全身，也很鸡肋。

 然而 主角登场 rem：这个单位是非常666的，因为它就像一个统一的变量，很好理解也很好控制。它是根据根节点来设置的，然而根节点就只有一个。比如根节点font-size=16px 之后设置font-size=x rem;就相当于font-size=x*16px;而且对于每一个元素都是一样的。我们这里还可以获取设备的特性，比如宽高 屏幕参数 来对我们的根节点字体大小设置动态去适配设备

现在来看第二个绝招

2.页面布局分块问题

 当我们在进行网页分块时，就是绝对不能写死，不能出现如 写宽度写死成px的，这样对于网页来说就是灾难，正确的做法是尽量用到百分比，我们让网页分块是为了更好的展示内容，在布局上不能出现残留，要尽量对称留白要做到均匀。我们要熟悉html的盒子模型，不然我们经常会出现不能严丝合缝

的情况，多半是盒子模型没运用好

想象一个盒子，它有：外边距（margin）、边框（border）、内边距（padding）、内容（content）

margin用了和别的元素之间隔开距离 border是元素的最外层 padding是距离元素中的内容的距离 所以一个盒子通常我们设置元素长宽时不

包括padding border margin部分

蓝色的为content 红色paading 绿色border 黄色margin

<div style="width: 100px;height: 100px;padding: 100px;border:20px solid #ff0;margin: 100px;">5454</div>

我们发现代码中的width和height都才是100px 为中心蓝色部分。所以我们用width和height是不能很好进行分块的

所以经常都是外层分块 里层再进行内容的修饰 比如我们将宽度分为20%五块 后来发现如果加上border padding margin 发现根本不能好好

分块。所以外层划分区域内层修饰具体的样式。就比如我们要让一块居中显示（手机端很能说明问题）

我们可以这样写

 <div style="width: 100%;height: 100%;">

 <div style="width: 95%;height:100%;margin: 0 auto;"></div>
 </div>

而不用如下：

<div style="width: 95%;height:100%;margin-left: 2.5%;"></div>

后边这种 我们在修改宽度时还要修改margin-left,而且我们经常面临的不是一块的分区 而是多块的 所以我们就要手动计算margin-left  or margin-right