移动端适配：使用flex布局和rem

目录

 

一、使用rem和flex布局

1.先说说几个前端常用的几个单位的概论：

2.开始进入rem教程

  3、媒体查询（插播：比较繁琐不推荐）

4、通过less方法写函数来简化代码

5、解决div字体font-size兼容问题

---

一、使用rem和flex布局

1.先说说几个前端常用的几个单位的概论：

• 1、px (pixel，像素)：是一个虚拟长度单位，是计算机系统的数字化图像长度单位，如果px要换算成物理长度，需要指定精度DPI(Dots Per Inch，每英寸像素数)，在扫描打印时一般都有DPI可选。Windows系统默认是96dpi，Apple系统默认是72dpi。
• 2、em(相对长度单位，相对于当前对象内文本的字体尺寸)：是一个相对长度单位，最初是指字母M的宽度，故名em。现指的是字符宽度的倍数，用法类似百分比，如：0.8em, 1.2em,2em等。通常1em=16px。
• 3、pt (point，磅)：是一个物理长度单位，指的是72分之一英寸。pt=1/72(英寸), px=1/dpi(英寸)
• 4、rem（root em，根em）：是CSS3新增的一个相对单位，这个单位引起了广泛关注。这个单位与em有什么区别呢？区别在于使用rem为元素设定字体大小时，相对大小对比的是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。目前，除了IE8及更早版本外，所有浏览器均已支持rem。对于不支持它的浏览器，应对方法也很简单，就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。

 

2.开始进入rem教程

（1）.先设置header里面的meta标签：

 <meta name="viewport" content="initial-scale=1,maximum-scale=1, minimum-scale=1">

上面代码的意思是，让布局视口的宽度等于理想视口的宽度，页面的初始缩放比例以及最大缩放比例都为1，且不允许用户对页面进行缩放操作。

（2）.在header写上<script>标签

 <script type="text/javascript">
 　　document.documentElement.style.fontSize = document.documentElement.clientWidth / 640*100 + 'px';
 </script>

问题：为什么要设置Html的font-size？

答：这里是设置html标签的font-size，上面概论红色字写的很清晰，页面元素使用rem单位时，是相对于这个html标签的font-size的大小为基础的。

问题：为什么是clientWidth/640?为什么要乘以100？

答：

1.是因为这里是作为一个基础数值，换个方向去想，这里先不乘以100以免产生误解。

例如：设计稿宽度是640px，有一个元素设计稿上的宽度是50px，设备物理宽度是320px,那么我们在页面上应该设置宽度为 width:50rem，相当于宽度是：50*（320/640）=25px；这里能正确算出在320px的设备上刚好占一半,其实可以想象为 rem=（320/640）。

2.一般浏览器的最小字体是12px，如果html的font-size=（320/640）px，相当于font-size=0.5px，那么这个数值就小于12px，会造成一些计算的错误，和一些奇怪的问题，*100后，font-size是50px，就可以解决这种字体小于12px的问题。

3. 为了计算方便   我们后面把比率乘以了100，（320/640）*100，那么相对应这个元素在设置数值的时候就需要除以100了（50/100）,这样可以保证最后出来的数值不变。

 

3、媒体查询（插播：比较繁琐不推荐）

媒体查询是响应式设计的基础，他有以下三点作用：

1. 检测媒体的类型，比如 screen，tv等

2. 检测布局视口的特性，比如视口的宽高分辨率等

3. 特性相关查询，比如检测浏览器是否支持某某特性（这一点不讨论，因为它被目前浏览器支持的功能对于web开发来讲很无用）

css中使用媒体查询的语法：

@media 媒体类型 and (视口特性阀值) {

// 满足条件的css样式代码

}

下面是一段在css中使用媒体查询的示例：

@media all and (min-width: 321px) and (max-width: 400px) {

.box {

background: red;

}

}

上面代码中，媒体类型为all，代表任何设备，并且设备的布局视口宽度大于等于321px且小于等于400px时，让拥有box类的元素背景变红。

 

4、通过less方法写函数来简化代码

.rem(@name, @px1) {
        @{name}: unit(@px1 / 100, rem);
    }

    .rem(@name, @px1, @px2) {
        @{name}: unit(@px1 / 100, rem) unit(@px2 / 100, rem);
    }

    .rem(@name, @px1, @px2, @px3, @px4) {
        @{name}: unit(@px1 / 100, rem) unit(@px2 / 100, rem) unit(@px3 / 100, rem) unit(@px4 / 100, rem);
    }

基本可以应对大部分CSS样式，之后所有的属性，都可y

写成这种形式，其中数字值仍是像素单位原值。

 

5、解决div字体font-size兼容问题

由于适配修改了html的字体font-size，所以所有div都会受到影响，都会有初始font-size，所以需要重置

div{   
    font-szie:0;
}

但是如果将所写代码引入一个不同写法的项目里可能会造成影响。

所以用一个大的div把所有的内容框起来然后在大div里重置所有的属性，就能避免影响其他的样式。